Angular 9 PWA: проблемы с областью служебного воркера / манифеста при запуске приложения в подкаталоге и служебный воркер, размещенный в другом подкаталоге

Question

Использование ASP. NET CORE 3.1 для размещения и обслуживания всего. "index. html" не предназначен для прямого доступа, "/ app" попадает в конечную точку в. net ядре, которое обслуживает индекс. html файл

1. Angular 9 с PWA
2. Запуск приложения в https://example.com/app
3. Сервисный работник и ресурсы хранятся в https://example.com/dist/assets
4. Объем Service worker был установлен на "/"
5. Область манифеста установлена ​​на "/", а start_url установлен на "index. html"

Проблемы:

1. Сервисный работник пытается кэшировать активы в root: https://example.com/index.html. ДОЛЖЕН БЫТЬ https://example.com/dist/assets/index.html
2. Я попытался поймать это на сервере и установить постоянное перенаправление 301 на правильный актив
3. Проблема в том, что у меня также есть конечная точка Home / Выход из системы, которую обслуживающий работник пытается обслужить
4. У меня также есть код на бэкэнде, который вместо того, чтобы обслуживать 404 для ненайденных путей, он просто обслуживает результат нажатия / app
5. Если вы получаете доступ к index. html, но вы не вошли в систему, он пытается перенаправить вас на Home / Logout
6. Сервисный работник, похоже, думает, что Home / Logout должен обслуживать контент для index. html
7. Вы попадаете в это безумное бесконечное перенаправление l oop

Итак, проблема root связана с приложением, запущенным в / app вместо / и потенциально имеющим все мои активы в / dist / assets вместо /.

Мне нужно, чтобы PWA можно было установить с моей целевой страницы, расположенной в /, но в идеале start_url должен быть «/ app», но пока это index. html файл в порядке

Могу ли я внести какие-либо изменения в конфигурацию или какие-либо. net основных изменений, которые я мог бы внести, чтобы поддержать это?

Кроме того, я не устанавливал pwa с параметром basehref, если это имеет значение.

Answer 1

Я понял.

1. Вы хотите построить с помощью --baseRef = / your / sub / directory / here /
2. Вы хотите, чтобы ваш файл манифеста имел scope = "." и start_url = "./"
3. Вам необходимо обновить файл ngsw-config. json.
4. Это означает, что добавьте свойство navigationUrls, включите все, что angular предоставляет в стандартной форме, а затем добавьте правила в EXCLUDE specifici c urls.
5. Angular предоставляет следующее в стандартной форме:

    [
      '/**',           
      '!/**/*.*',      
      '!/**/*__*',     
      '!/**/*__*/**',  
    ] 

В моем случае мне нужно было исключить URL-адреса, содержащие «Home». Но похоже, что я не могу использовать шаблон глобуса, который работает с компилятором angular. Итак, я написал шаг развертывания, который объединяет пользовательскую конфигурацию с конфигурацией, которая компилируется angular.

        public static void Execute()
        {
            Log.Info("Configuring ngsw.json");
            var ngsw = System.IO.File.ReadAllText($"{DeploySettings.SourcePath}wwwroot/dist/assets/ngsw.json");

            var ngswJson = JObject.Parse(ngsw);
            var toMerge = JObject.Parse(@"{
                                            ""navigationUrls"":[
                                                {
                                                  ""positive"": false,
                                                  ""regex"": ""^.*Home.*$""
                                                }

                                             ]}");
            ngswJson.Merge(toMerge);

            var json = ngswJson.ToString();

            System.IO.File.WriteAllText($"{DeploySettings.SourcePath}wwwroot/dist/assets/ngsw.json", json);
        }

На этом этапе мне просто нужно выяснить, как исключить мою целевую страницу, и все будет хорошо. Мое приложение наконец-то работает в офлайн-режиме!