Angular 9 PWA：当 运行 子目录中的应用程序和不同子目录中托管的服务工作者时，服务工作者/清单范围问题

Question

使用 ASP.NET CORE 3.1 来托管和服务一切。 "index.html" 不打算直接访问，“/app”命中 .net 核心中为 index.html 文件提供服务的端点

1. Angular 9 与 PWA
2. 运行 应用位于 https://example.com/app
3. Service Worker 和资产存储在 https://example.com/dist/assets
4. Service Worker 的范围设置为“/”
5. 清单范围设置为“/”并且 start_url 设置为 "index.html"

问题：

1. Service Worker 正在尝试在根目录缓存资产：https://example.com/index.html. SHOULD BE https://example.com/dist/assets/index.html
2. 我尝试在服务器上捕获它，并将 301 永久重定向设置为正确的资产
3. 问题是，我还有一个端点 Home/Logout，service worker 正在尝试提供该端点
4. 我在后端也有代码，它不是为未找到的路径提供 404，而是提供点击 /app
的结果
5. 如果您访问 index.html 但您没有登录，它会尝试将您重定向到 Home/Logout
6. 服务人员似乎认为 Home/Logout 应该为 index.html
提供内容
7. 你最终陷入了这个疯狂的无限重定向循环

因此，根本问题与应用程序 运行 在 /app 而不是 / 有关，并且我的所有资产可能都在 /dist/assets 而不是 /。

我需要 PWA 可以从我的着陆页安装，位于 /，但 start_url 理想情况下是“/app”，但只要它是 index.html 文件很好

我是否可以进行任何配置更改或我可以进行任何 .net 核心更改以支持此功能？

此外，如果重要的话，我没有安装带有 basehref 参数的 pwa。

Answer 1

我想通了。

1. 您想使用 --baseRef=/your/sub/directory/here/
构建
2. 您希望您的清单文件具有 scope="."和 start_url="./"
3. 您需要更新您的 ngsw-config.json 文件。
4. 这意味着，添加 navigationUrls 属性，包括 angular 以库存形式提供的所有内容，然后添加排除特定 url 的规则。
5. Angular 提供以下库存形式：

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

6. 就我而言，我需要排除包含 "Home" 的网址。但是，似乎没有可以与 angular 的编译器一起使用的 glob 模式。因此，我编写了一个部署步骤，将自定义配置与 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);
        }

在这一点上，我只需要弄清楚如何排除我的着陆页就可以了。我的应用终于可以离线使用了！