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));
});
