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

Question

我从未能够正确地使用Angular Mobile Team的服务工作者，现在我猜我忘记了启用某些内容，因为自从最初发布以来它从未正常工作过。即使它安装并在Google Chrome（智能手机和桌面电脑）上运行，但当我离线时它就无法工作了，而且还会在更新后随机崩溃。

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

• ng new test-service-worker 新建一个名为test-service-worker的Angular项目
• npm install @angular/service-worker 安装@angular/service-worker模块
• 在.angular-cli.json中添加"serviceWorker": true，启用Service Worker功能
• npm build --prod 编译项目并生成ngsw-manifest.json, sw-register.b73048fe3d9f8a1e7ae5.bundle.js和worker-basic.min.js等文件，一切看起来都很正常
• https://test-service-worker-97321.firebaseapp.com/ Service Worker安装成功
• 如果我断网，等待一个小时以使缓存过期（或者直接禁用缓存），无论使用哪种设备，都会出现failed to load错误。

---

生成的dist目录：

---

生成的 ngsw-manifest.json 文件：

---

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

---

当我将Chrome开发者工具选项设置为离线和禁用缓存时，Service Worker不再加载内容。Twitter是一个很好的例子，他们的Web应用程序在选中离线和禁用缓存时仍然能够正常工作。

NB: 我以前使用服务工作者创建过几个应用程序，并且它们在Chrome上正常运行。我不知道我在这里做错了什么。

- Ploppy

Answer 1

您需要以显式提及 index.html 的方式在离线模式下测试您的应用程序。我检查了https://test-service-worker-97321.firebaseapp.com/index.html - 它可以正常工作。

如果您希望您的应用程序在离线工作时不需要提及索引文档（以及所有其他路由），则必须设置路由重定向。

请参见示例。此自定义ngsw-manifest.json将在构建期间与自动生成的清单合并。

- Maxim Salnikov

---

但是现在，由于ngsw-manifest.json不再可用（Angular v5），我该如何定义路由？或者我不需要再定义了吗？ - seawave_23

@Nadine ngsw-manifest.json 的名称和格式（略微）已更改，以及处理方式 - 现在是 ngsw-config.js：https://angular.io/guide/service-worker-config - Maxim Salnikov

“路由”是否仍然作为配置的一部分存在？ - seawave_23

@Nadine：现在我们有了更加灵活的配置方式，使用assetGroups来处理应用程序外壳，使用dataGroups来处理API调用（以及其他运行时请求）。 - Maxim Salnikov

Answer 2

在Maxim的帮助下，我沿着询问者的相同路径，成功地为现有的静态网站添加了离线功能，并部署到了Firebase上。 根文件夹中的自定义清单应该如下所示，它们将最终与自动生成的清单合并：

{
  "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"
      }
    ]
  }
}

- bob