Question

我从未让Angular Mobile Team的服务工作者正常工作，此时我想我忘了启用某些东西，因为它从最初的版本开始就没有用过。即使它在我离线时在谷歌浏览器（智能手机和桌面）上安装并运行它也不再起作用，它也会在更新后随机崩溃。

没有关于如何设置的文档。所以我就是这样做的：

ng new test-service-worker
npm install @angular/service-worker
在.angular-cli.json中，我添加了"serviceWorker": true
npm build --prod，输出ngsw-manifest.json sw-register.b73048fe3d9f8a1e7ae5.bundle.j和worker-basic.min.js。所以一切都好看
https://test-service-worker-97321.firebaseapp.com/ SW安装
如果我离线，等待一小时让缓存过期（或者只是禁用缓存），无论我使用哪种设备，都会出现failed to load错误。

生成的dist目录：

生成的ngsw-manifest.json：

安装并运行的服务工作者：可用的测试https://test-service-worker-97321.firebaseapp.com/

当我将chrome devtools选项设置为Offline和Disable cache时，服务工作人员不再加载内容。关于它应该如何工作的一个很好的例子是Twitter，他们的网络应用程序在Offline和Disable cache被检查时有效。

注意：我之前与服务工作者创建了一些应用程序，并且他们在Chrome上正常运行。我不知道我在这里做错了什么。

Answer 1

您必须在离线模式下测试您的应用，并明确提及index.html。我检查了https://test-service-worker-97321.firebaseapp.com/index.html - 它工作正常。

如果您希望您的应用在脱机状态下工作而未提及索引文档（以及所有其他路线），则必须设置route redirection

见the example。此自定义ngsw-manifest.json将在构建期间与自动生成的自定义session_start()合并。

Answer 2

在Maxim的帮助下，我沿着与询问人相同的路径，设法将离线功能添加到现有静态网络并在Firebase上部署。根文件夹上的custom manifest应如下所示，它们最终将与自动生成的清单合并：

{
  "routing": {
    "index": "/index.html",
    "routes": {
      "/": {
        "prefix": false
      },
      "/home": {
        "prefix": false
      },
      "/work": { // any routes starting with '/work'
        "prefix": true
      }
    }
  },
  "external": {
    "urls": [
      {
        "url": "https://fonts.googleapis.com/css?family=Quicksand"
      }
    ]
  }
}

@ angular / service-worker离线时无法正常工作

2 个答案: