@angular/service-worker 离线时不工作答案

【问题标题】：@angular/service-worker not working when offline@angular/service-worker 离线时不工作
【发布时间】：2017-03-26 13:58:20
【问题描述】：

我从来没有让 Angular Mobile Team 的服务人员正常工作，此时我想我忘了启用某些东西，因为它自最初发布以来就从未工作过。即使它在我离线时在 Google Chrome（智能手机和桌面）上安装并运行，它也不再工作，更新后它也会随机崩溃。

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

ng new test-service-worker
npm install @angular/service-worker
在.angular-cli.json，我添加"serviceWorker": true
npm build --prod，输出ngsw-manifest.jsonsw-register.b73048fe3d9f8a1e7ae5.bundle.js 和worker-basic.min.js。所以一切似乎都很好
https://test-service-worker-97321.firebaseapp.com/ 软件安装
如果我离线，请等待一小时让缓存过期（或干脆禁用缓存），无论我使用什么设备，都会收到 failed to load 错误。

生成的dist目录：

生成的ngsw-manifest.json:

Service Worker 已安装并运行：测试可用https://test-service-worker-97321.firebaseapp.com/

当我将 chrome devtools 选项设置为 Offline 和 Disable cache 时，服务人员不再加载内容。 Twitter 就是一个很好的例子，当Offline 和Disable cache 被选中时，他们的网络应用程序就可以工作了。

注意：我之前使用服务人员创建了一些应用程序，它们在 Chrome 上运行良好。我不知道我在这里做错了什么。

【问题讨论】：

标签： angular angular-cli service-worker

【解决方案1】：

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

如果您希望您的应用在不提及索引文档的情况下离线工作（以及所有其他路线），您必须设置route redirection

见the example。这个自定义的ngsw-manifest.json 将在构建过程中与自动生成的合并。

【讨论】：

但是现在，由于 ngsw-manifest.json 不再可用（Angular v5），我将如何定义路由？还是我不再需要了？
@Nadine ngsw-manifest.json 更改了它的名称和格式（稍微）以及它的处理方式 - 现在它是 ngsw-config.js：angular.io/guide/service-worker-config
“路由”是否仍然作为配置的一部分存在？
@Nadine：不是。现在我们有了一种更灵活的配置方式，其中assetGroups 用于app shell，dataGroups 用于API 调用（和其他运行时请求）

【解决方案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"
      }
    ]
  }
}

【讨论】：