Angular 5服务工作者无法工作/不缓存背景图像

Question

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

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

以下是我的问题的更详细报告。您可以通过克隆我制作的回购来强调这个位于here.

的问题

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

1. 添加了服务工作包。
2. angular-cli.json将service-worker设置为true
3. 服务工作者已导入并在app.module.ts
中注册
4. ngsw-config.json的生成和配置如文档中所述。
5. 运行build build --prod以在应用程序的dist文件夹中生成包。

我使用node / express和server.js文件提供我的应用程序。当我在隐身窗口中打开应用程序时（根据文档的建议），我看到我的服务工作者已注册，缓存存储了我的包和索引文件。它还缓存img标记中使用的图像，但它不缓存我的css background-image中指定的图像。当我通过检查服务工作人员的离线框然后刷新我的页面来模拟网络问题时，除了需要背景图像的部分之外，页面会正确显示所有内容。

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

1. 获取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)

来自我的所有资源

UPDATE2

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

我仍然无法让服务工作者与快递合作......

Answer 1

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

*其次，在您完成任务后，服务工作人员无法通过ng serve提供服务 ng build --prod您需要使用其他服务器来提供您的应用，例如：

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

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

这是您的应用服务，一切从服务工作人员离线加载