Angular Service Worker 启动太晚

Question

我在内部 Service Worker 中使用 Angular 5.1 这是我的 ngsw-config.json 文件：

{
  "appData": "Angular 5.1",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": ["/favicon.ico", "/index.html"],
        "versionedFiles": ["/*.bundle.css", "/*.bundle.js", "/*.chunk.js"]
      }
    },
    {
      "name": "assets",
      "installMode": "prefetch",
      "updateMode": "prefetch",
      "resources": {
        "files": ["/assets/**"]
      }
    }
  ],
  "dataGroups": [
    {
      "name": "tasks-users-api",
      "urls": ["/api"],
      "cacheConfig": {
        "strategy": "freshness",
        "maxSize": 20,
        "maxAge": "1h",
        "timeout": "5s"
      }
    }
  ]
}

在我主页的ngOnInit 函数中，我调用了dataGroups 中列出的/api url。当我打开我的控制台时，我可以看到这个 url 在 service worker 开始之前被调用（下面用红色框起来）（我猜 service worker 的开始与下面用蓝色框起来的元素相匹配）。

因此，如果我关闭互联网连接，/api 调用将不会由 Service Worker 处理。如果我在另一个页面上导航并在关闭连接之前返回主页，则 /api 调用由 service worker 处理。

这是个问题吗？如何处理？

Answer 1

这是真的，这是一个功能而不是一个错误。 Service Worker 的设计目标之一是非常灵活，因此，您可以自由决定何时安装软件以及安装它需要什么。

理论上，安装可能会作为脚本执行的第一件事而调用，并且它可能会阻塞，直到安装完成。但由于安装阶段可能任意长（我们可能会尝试在那里预缓存一半的互联网），这将是非常不切实际的。

我不知道Angular实现的细节，但一般做法是在页面完全加载后才调用 SW 注册。因此，预计第一个负载（或至少在安装和激活 SW 之前的阶段）不会由 SW 提供服务。

如何处理这种情况？真的没什么好管的。如果您在第一次加载时失去连接，无论谁负责，它都会丢失。要么您的用户无法直接加载数据，要么您的软件无法缓存数据 - 在这两种情况下，您基本上没有任何服务。

Angular Service Worker 启动太晚

Angular Service Worker start too late

service-worker

angular

angular-service-worker