angular - 离线提供静态 Assets ，Angular Universal 中的缓存策略

Question

我的 service worker 没有缓存我的静态 Assets 。

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

在 Chrome DevTools Application 选项卡下，Cache Storage 部分有以下几行:

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

ngsw:xxx:assets:app:cache - http://127.0.0.1:8080

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

点击最后​​两行不会在 DevTools 的“路径”部分产生任何结果。

ngws-worker.js 处于“激活并正在运行”状态。奇怪的是“1969 年 12 月 31 日收到”。

然后，当我下线时，不会显示任何 Service Worker。并且缓存存储为空。最后一个网络行显示 ngsw.json?ngsw-cache-bust=xxx Status (failed) Type 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 中是否可以缓存静态 Assets 。第二，你认为我的代码有什么问题？谢谢:)

编辑:添加 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 project .

最后的选择是使用 Workbox CLI直接地。这就是 PWA 入门项目中使用的内容。

希望对您有所帮助。