Angular：服务工作者配置

Question

我正在尝试将 pwa 功能添加到在 Angular 8 上运行的网站。我遵循了很多官方和非官方的教程，但我不明白我做错了什么。

ngsw-config.json 是这样的：

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js",
          "/*.min.js"
        ],
        "urls": [
          "https://fonts.googleapis.com/**"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

我可以在 Chrome 开发控制台的“应用程序”选项卡中看到服务工作线程已注册并正在运行。

但我有两个主要问题。

1. 当我在离线模式下通过浏览器并重新加载页面时，我收到一条 chrome 错误消息：

索引页面似乎无法提供服务，服务工作人员仍在注册并运行。

我可以在在线模式下看到我从 Service Worker 获取索引页，那么为什么它在离线模式下不起作用？

2. 在在线模式下，我可以从网络选项卡中看到每个请求都被缓存，甚至是来自 api 的请求。但我没有在 ngsw-config.json 中配置 dataGroups 那么为什么会发生这种情况？对于 assetGroups 的 url 数组中未指定的外部 js 文件也是如此。

该网站可以在这里进行测试： https: //dev.ecni.fr/

谢谢 ！

编辑：在两台运行 Windows 的计算机上尝试使用不同的最新浏览器时出现同样的问题。不过，在 mac 上使用 chrome 可以正常工作。Windows 计算机发生了什么事？

Answer 1

我可以在 Chrome 离线模式下查看您的网站，看起来不错。我还与我的ngsw-config.json文件进行了比较：

\n\n

{\n  "index": "/index.html",\n  "assetGroups": [\n  {\n    "name": "app",\n    "installMode": "prefetch",\n    "updateMode": "prefetch",\n    "resources": {\n      "files": [\n        "/index.html",\n        "/manifest.json",\n        "/browserconfig.xml",\n        "/assets/images/favicon/**",\n        "/*.css",\n        "/*.js"\n      ]\n    }\n  }, {\n    "name": "assets",\n    "installMode": "lazy",\n    "updateMode": "prefetch",\n    "resources": {\n      "files": [\n        "/assets/**",\n        "/*.woff",\n        "/*.woff2",\n        "/*.svg",\n        "/*.ttf",\n        "/*.eot"\n      ]\n    }\n  }]\n}\n

\n\n

除了 之外，一切看起来都非常相似manifest.json。你有新的格式吗？我还将分享我的manifest.json完整文件，它可能有用：

\n\n

{\n    "name": "ClubUp! Volley Network",\n    "short_name": "ClubUp!",\n    "theme_color": "#00aeef",\n    "background_color": "#ffffff",\n    "display": "standalone",\n    "scope": "/",\n    "start_url": "/search?utm_source=homescreen",\n    "dir": "ltr",\n    "lang": "it",\n    "orientation": "portrait",\n    "description": "Cerchi un giocatore o una squadra? Fai un salto in ClubUp! per trovare il tuo team ideale. Provalo, \xc3\xa8 semplice da usare.",\n    "related_applications": [],\n    "prefer_related_applications": false,\n    "icons": [\n        {\n            "src": "assets/images/pwa/icon-72x72.png",\n            "sizes": "72x72",\n            "type": "image/png"\n        },\n        {\n            "src": "assets/images/pwa/icon-96x96.png",\n            "sizes": "96x96",\n            "type": "image/png"\n        },\n        {\n            "src": "assets/images/pwa/icon-128x128.png",\n            "sizes": "128x128",\n            "type": "image/png"\n        },\n        {\n            "src": "assets/images/pwa/icon-144x144.png",\n            "sizes": "144x144",\n            "type": "image/png"\n        },\n        {\n            "src": "assets/images/pwa/icon-152x152.png",\n            "sizes": "152x152",\n            "type": "image/png"\n        },\n        {\n            "src": "assets/images/pwa/icon-192x192.png",\n            "sizes": "192x192",\n            "type": "image/png"\n        },\n        {\n            "src": "assets/images/pwa/icon-384x384.png",\n            "sizes": "384x384",\n            "type": "image/png"\n        },\n        {\n            "src": "assets/images/pwa/icon-512x512.png",\n            "sizes": "512x512",\n            "type": "image/png"\n        }\n    ]\n  }\n

\n\n

如果您想比较网络选项卡中发生的情况，相关网站是这样的： https: //clubup.it/

\n