Angular 5服务人员不工作/不缓存背景图像

Question

我很难让我的angular5服务人员工作。我有两个主要问题：

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

下面是我的问题的更详细的报告。您可以通过克隆我所做的回购来强调这个问题。

我创建了带有--service-Worker标记的应用程序。然后我确保了Angular留档中列出的5个步骤，即：

1. 添加了Service Worker包。
2. angular-cli.json已将服务工人设置为true
3. 服务工人进口并在app.module.ts注册
4. ngsw-config.json按照留档中的描述生成和配置。
5. 运行ng build--prod在应用程序的dist文件夹中生成包。

我使用node/express和服务器为我的应用程序提供服务。js文档。当我在一个匿名窗口中打开应用程序时（按照文档的建议），我看到我的服务人员得到了注册，缓存存储了我的包和索引文件。它还缓存img标记中使用的图像，但不缓存在我的css背景图像中指定的图像。当我通过选中“服务人员”上的“脱机”框模拟网络问题，然后刷新页面时，页面会正确显示所有内容，但需要背景图像的部分除外。

但当我第二次刷新应用程序或打开另一个选项卡时（在同一个“匿名”窗口上，因此服务工作者仍在注册，缓存仍处于活动状态），就会出现最终/主要问题。在这一点上，我没有得到任何显示。控制台给了我三个错误：

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

最后一个错误来自ngsw工作者。js。我不太清楚如何理解这些错误。我想也许一个新的服务人员正在尝试注册，但我不知道为什么会发生这种情况。。。

这是我的ng配置。请求的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

我一直在测试这个项目，使用node为一个express应用程序提供服务，该应用程序将所有请求定向到位于dist文件夹（在运行ng build--prod之后生成）中的angular应用程序。我决定在一个简单的http服务器上测试它。我还发现，直接重新加载会破坏我的服务人员，但如果我导航到另一个页面，然后返回到原始页面，服务人员就会工作（奇怪，但与此问题无关）。

我仍然无法让服务人员与express一起工作。。。

Answer 1

*首先，服务工作者只在--prod构建上工作。

*其次，不能通过ng serve为服务人员提供服务，在您完成
ng build--prod之后，您需要使用不同的服务器为您的应用程序提供服务，如：

1-npm安装-g http服务器//全局安装http服务器
2-cd dist
3-http服务器-p 4200
4-在本地主机上打开浏览器：4200

*第三，也是最重要的一点，您必须在浏览器中启用缓存，如果已选中，请取消在开发工具中选中“禁用缓存”。

这是您的应用程序，所有内容都从服务人员脱机加载