离线提供静态资源,Angular Universal 缓存策略

7

我的服务工作者没有缓存我的静态资源。

在线时,使用Chrome DevTools看起来ServiceWorker正在工作。我可以看到styles.xxx.css、runtime.xxx.js、polyfills.xxx.js和main.xxx.js的行,Size列中标记为“from Service Worker”。然后,在稍后的行中,这些相同的文件以“from disk cache”的Size列出。enter image description here

在Chrome DevTools应用程序选项卡下的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的“Path”部分没有任何内容。

ngws-worker.js的状态为“activated and is running”。它的“Received”时间是“12/31/1969”,这很奇怪。

然后,当我离线时,没有显示任何服务工作者。而且,Cache Storage为空。最后一个网络行显示ngsw.json?ngsw-cache-bust=xxx 状态(失败)类型fetch,发起者是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));
});
1个回答

3

好的,那就先忘掉 Angular 的问题吧。你尝试过使用 Workbox 吗?或者考虑迁移到 PWA 的 starter kit 上?除非你的 Angular 应用程序中存在编码不当的问题,否则这些方法都会起作用。 - Randy Casburn
那个 Angular Universal PWA Starter 项目使用的是 Angular 5,而我现在正在使用 Angular 7,所以我不太确定。我还使用了预渲染,因此需要将许多代码复制到新项目中。 - flobacca
我对Workbox CLI不是很了解,我觉得很难相信我需要它才能使ServiceWorker正常工作。我不想在这个黑盒子上再添加更多的东西。但如果必要的话,我会使用它的。 - flobacca
请将您的整个项目放在StackBlitz上或在GitHub上创建一个存储库。我会查看一下。 - Randy Casburn
好的,现在它正在运行。我不确定问题出在哪里。我将其推送到了名为cachePro的github分支上,但它说没有要提交的内容,因此在github上的cachePro版本可以运行,但无法缓存文件。 - flobacca
显示剩余7条评论

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接