离线提供静态资产，在Angular Univeral中缓存策略

Question

我的服务人员没有缓存我的静态资产。

在线使用Chrome DevTools时，ServiceWorker似乎正在运行。我看到styles.xxx.css，runtime.xxx.js，polyfills.xxx.js和main.xxx.js的行，其大小列为“来自Service Worker”。然后，在以后的行中，这些相同的文件以“来自磁盘缓存”的大小列出。

在“ Chrome DevTools应用程序”选项卡的“缓存存储”部分下，我具有以下行：

ngsw：db：control- http ://127.0.0.1: 8080

ngsw：xxx：资产：app：缓存-http://127.0.0.1: 8080

ngsw：xxx：assets：app：meta- http : //127.0.0.1 : 8080

单击最后两行不会在DevTools的“路径”部分中显示任何内容。

ngws-worker.js的状态为“已激活，正在运行”。它是“ Received 12/31/1969”，很奇怪。

然后，当我离线时，没有显示服务人员。缓存存储为空。最后一个网络行显示ngsw.json？ngsw-cache-bust = xxx状态（失败）键入fetch Initiator ngsw-worker.js：2662。

我的package.json脚本是（我从AngularFirebasePro复制的）

"webpack:prerender": "webpack --config webpack.prerender.config.js",
"build:prerender": "node dist/abogado/prerender.js",
"serve:prerender": "http-server dist/abogado -o",
"build:all": "ng build --prod && ng run abogado:server && npm run 
webpack:prerender && npm run build:prerender"

在angular.json我有

"server": {
      "builder": "@angular-devkit/build-angular:server",
      "options": {
        "outputPath": "dist/abogado-server",
        "main": "src/main.server.ts",
        "tsConfig": "src/tsconfig.server.json"
      },
      "configurations": {
        "production": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ]
        }
      }
    }

我的ngsw-config.json文件是

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

}

构建应用程序后，我的dist文件夹中确实包含ngsw.json和ngws-worker.js。

我不知道NodeJS。首先，我想知道在Angular Universal中是否可以缓存静态资产。其次，您认为我的代码有什么问题？谢谢 ： ）

编辑：添加main.ts文件内容。

if (environment.production) {
  enableProdMode();
}

document.addEventListener('DOMContentLoaded', () => {
  platformBrowserDynamic().bootstrapModule(AppModule)
    .then(() => {
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('/ngsw-worker.js') ;
      }
    })
  .catch(err => console.error(err));
});

Answer 1

根据所涉及的 Angular 版本，这很可能与此错误有关：

https://github.com/angular/angular/issues/20360

该问题页面中发布了许多解决方法。如果您无法让这些工作，下一个（非常好的）替代方案是将您的应用程序迁移到Angular Universal PWA Starter 项目。

最后的替代方案是直接使用Workbox CLI。这就是 PWA 入门项目中使用的内容。

希望这有帮助。