6

我无法让我的 angular5 服务人员工作。我有两个主要问题:

  1. 服务工作者不会缓存用作背景图像的资产图像
  2. 在模拟网络断开连接后,Service Worker 最初从缓存中拉取文件(除了前面提到的非缓存文件),但在第二次刷新后它会遇到错误。

以下是我的问题的更详细报告。您可以通过克隆我为突出显示位于此处的此问题而制作的 repo 来跟进。

我使用提供的 --service-worker 标签创建了应用程序。然后,我确保遵循此处Angular 文档中列出的 5 个步骤,即:

  1. 添加了 Service Worker 包。
  2. angular-cli.json 将 service-worker 设置为 true
  3. 在 app.module.ts 中导入并注册 Service Worker
  4. ngsw-config.json 是按照文档中的描述生成和配置的。
  5. 运行 ng build --prod 以在我的应用程序的 dist 文件夹中生成包。

我使用 node/express 和 server.js 文档为我的应用程序提供服务。当我在隐身窗口中打开应用程序时(按照文档的建议),我看到我的服务人员已注册,并且缓存存储了我的包和索引文件。它还缓存在 img 标签中使用的图像,但它不会缓存在我的 css 背景图像中指定的图像。当我通过选中我的服务人员上的脱机框然后刷新我的页面来模拟网络问题时,页面会正确显示除需要背景图像的部分之外的所有内容。

但是当我第二次刷新应用程序或打开另一个选项卡(在同一个隐身窗口上,因此服务工作者仍然注册并且缓存仍然处于活动状态)时,会出现最终/主要问题。在这一点上,我什么都没有显示。控制台给了我三个错误:

  1. GET http://localhost:3000/favicon.ico net::ERR_INTERNET_DISCONNECTED
  2. 提取脚本时发生未知错误。
  3. 加载资源失败:net::ERR_INTERNET_DISCONNECTED

最后一个错误来自 ngsw-worker.js。我不太确定如何处理这些错误。我想也许一个新的服务人员正在尝试注册,但我不确定为什么会发生这种情况......

这是我要求的 ng-config.json 文件:

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "resources": {
      "files": [
        "/favicon.ico",
        "/index.html"
      ],
      "versionedFiles": [
        "/*.bundle.css",
        "/*.bundle.js",
        "/*.chunk.js"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/**"
      ]
    }
  }]
}

对此的任何帮助将不胜感激!谢谢大家

更新

所以我注意到,当我在没有服务器运行的情况下转到 localhost:3000 时,我得到了错误:

Uncaught (in promise) Error: Response not Ok (fetchAndCacheOnce): request for http://localhost:3000/assets/images/background-silver-grainy.jpg returned response 504 Gateway Timeout

我也得到错误:

Failed to load resource: the server responded with a status of 504 (Gateway Timeout)

来自我所有的资源

更新2

我一直在使用节点测试这个项目,以提供一个快速应用程序,该应用程序将所有请求定向到位于 dist 文件夹中的我的 Angular 应用程序(在运行 ng build --prod 后生成)。我决定在一个简单的 http-server 上测试它。我还发现直接重新加载会破坏我的服务人员,但是如果我导航到另一个页面,然后返回到我的原始页面,服务人员可以工作(奇怪但与这个问题无关)。

我仍然无法让服务人员与 express 合作......

4

1 回答 1

6

*首先,Service Worker 仅适用于 --prod 构建。

*其次,Service Worker 不能被提供服务ng serve,在你创建你之后,
ng build --prod你需要使用不同的服务器为你的应用程序提供服务,例如:

1- npm install -g http-server// 全局安装 http-server
2- cd dist
3- http-server -p 4200
4- 在 localhost:4200 上打开浏览器

*第三,也是最重要的,你必须在你的浏览器中启用缓存,如果你选中了,在你的开发工具中取消选中“禁用缓存”。

这是您的应用程序,所有内容都从服务人员离线加载

在此处输入图像描述

于 2018-02-01T22:03:38.550 回答