Angular 7 Service Worker 未在生产中缓存资产答案

【问题标题】：Angular 7 Service Worker not caching assets in productionAngular 7 Service Worker 未在生产中缓存资产
【发布时间】：2019-04-23 09:10:19
【问题描述】：

在本地环境中，我的 Ng7 应用程序在由 http-server 提供服务时可以完美运行。但是，当使用 Netlify 在线部署时，不会使用以下 ngsw-config.json 缓存文件

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/*.css",
          "/*.js"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

我发现它缓存了一些 js 文件，但它们的内容长度均为 0，这意味着它们实际上甚至没有任何内容。有趣的是，它拒绝缓存实际上是最大的 main.HASH.js 文件。

更新

我已经从这个question 带头并从文件中删除了index.html，我可以获得.js 文件列表以显示在缓存存储中。

但是和以前一样，它们的内容长度都为零！

【问题讨论】：

标签： angular service-worker

【解决方案1】：

首先，您必须将资产的 installMode 设置为“预取” - 这可以确保在您的应用启动时 ServiceWorker 会缓存给定的资源。您将其设置为惰性 - 这意味着只有资源被请求时才会被缓存。见angular guide 有时（我的经验）updateMode 会导致问题 - 所以在没有资产“updateMode”的情况下先尝试一下。所以 ngsw-config.json 看起来像这样：

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/*.css",
          "/*.js"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

【讨论】：