Angular：服务工作者配置

Question

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

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文件进行了比较：

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

[manifest.json之外的所有内容看起来都很相似。您有一种新格式吗？我还将共享我的manifest.json文件以完成操作，这可能会很有用：

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

如果要比较“网络”选项卡中发生的事情，则是相关网站：https://clubup.it/