Serving static assets offline, cache policy in Angular Univeral

Question

My service worker isn't caching my static assets.

When online, using Chrome DevTools it looks like ServiceWorker is working. I see rows for styles.xxx.css, runtime.xxx.js, polyfills.xxx.js and main.xxx.js with the Size listed as "from Service Worker". Then in later rows, these same files are listed with Size as "from disk cache".

Under the Chrome DevTools Application tab, Cache Storage section I have the following rows:

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

Clicking on the last two rows results in nothing in the "Path" section of DevTools.

The ngws-worker.js has an "activated and is running" status. It was "Received 12/31/1969" which is odd.

Then when I go offline, no Service Workers are shown. And the Cache Storage is empty.The last network row says ngsw.json?ngsw-cache-bust=xxx Status (failed) Type fetch Initiator ngsw-worker.js:2662.

My package.json scripts are (which I copied from AngularFirebasePro) are

"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"

In angular.json I have

"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"
            }
          ]
        }
      }
    }

my ngsw-config.json file is

{
 "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/**"
     ]
   }
 }]

}

Once I build my app, my dist folder does contain ngsw.json and ngws-worker.js.

I don't know NodeJS. First, I'd like to know if caching static assets is possible in Angular Universal. Second, what do you think is wrong with my code? Thank you : )

EDIT: adding main.ts file contents.

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

Depending on the version of Angular involved, this is most likely related to this bug:

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

There are many work arounds posted in that issue page. If you cannot get those to work, the next (very good) alternative is to migrate your app to the Angular Universal PWA Starter project.

The final alternative is to use the Workbox CLI directly. This is what is used in the PWA Starter Project.

Hope this is helpful.