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

Question

我从来没有让 Angular Mobile Team 的 service worker 正常工作，在这一点上我想我忘了启用某些东西，因为它自最初发布以来就没有工作过。即使它在 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/SW安装
如果我离线，等待一个小时让缓存过期（或简单地禁用缓存），无论我使用什么设备，我都会收到 failed to load 错误。

生成的dist目录：

生成的ngsw-manifest.json:

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

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

注意：我之前使用 Service Worker 创建了一些应用程序，它们在 Chrome 上运行正常。我不知道我在这里做错了什么。

Answer 1

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

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

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

Answer 2

在 Maxim 的帮助下，我按照与提问者相同的方式，设法将离线功能添加到现有的静态网站并将其部署在根文件夹的 Firebase. The 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 离线时不工作

@angular/service-worker not working when offline

service-worker

angular-cli

angular