I'm trying to set up a PWA with Angular 6 and having trouble to make the service worker serve content offline. I tried a lot of configurations and stuff for a couple of days now but with no success.
The service worker seems to be registered and running lighthouse in audits tab in Chrome passes the pwa test.
I'm using Contentful to serve texts/assets for this site. Service worker is fetching the content from dataGroups but it returns a 204 code when the service worker is doing the fetching. I can only assume that this results in the cache storage being empty.
But then again, I would expect the lighthouse test to fail, since it doesn't serve content offline. I think this happens because the page works offline as long as the session is not changed. Meaning if I turn off the network connection it will work when I navigate from a route to another route, but will fail with a 504 code if I reload/open a new tab/re-open the browser.
I'm hosting the Angular 6 app under local IIS.
index.html:
<base href="/servicemanager/">
web.config:
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Angular Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/servicemanager/index.html" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
ngsw-config.json:
"dataGroups": [
{
"name": "contentful-api",
"urls": [
"https://cdn.contentful.com/**"
],
"cacheConfig": {
"maxSize": 20,
"maxAge": "1h",
"timeout": "5s",
"strategy": "freshness"
}
}
]
Rest of it like assetGroups is just default.
manifest.json:
{
"name": "Service Manager",
"short_name": "ASM",
"theme_color": "#03A753",
"background_color": "#1b2a32",
"display": "standalone",
"scope": "/",
"start_url": "/servicemanager/index.html",
"icons": [
{
"src": "assets/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "assets/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "assets/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "assets/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "assets/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "assets/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "assets/icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "assets/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
Generated ngsw.json:
{
"configVersion": 1,
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"updateMode": "prefetch",
"urls": [
"/0.05ca3f943f64d55f5fa7.js",
"/favicon.ico",
"/index.html",
"/main.053796e1e3924671dbee.js",
"/polyfills.5fa68b41d92ab3b795c7.js",
"/runtime.69ef21bf8bcc49e08c9e.js",
"/scripts.64e0c48f62b83802d584.js",
"/styles.e43a5292c1af99ea721e.css"
],
"patterns": []
},
{
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"urls": [
"/assets/icons/icon-128x128.png",
"/assets/icons/icon-144x144.png",
"/assets/icons/icon-152x152.png",
"/assets/icons/icon-192x192.png",
"/assets/icons/icon-384x384.png",
"/assets/icons/icon-512x512.png",
"/assets/icons/icon-72x72.png",
"/assets/icons/icon-96x96.png"
],
"patterns": []
}
],
"dataGroups": [
{
"name": "contentful-api",
"patterns": [
"https:\\/\\/cdn\\.contentful\\.com\\/spaces\\/MY-SPACE-ID\\/environments\\/master\\/entries\\?content_type=[^/]*[^/]*"
],
"strategy": "freshness",
"maxSize": 20,
"maxAge": 3600000,
"timeoutMs": 5000,
"version": 1
}
],
"hashTable": {
"/0.05ca3f943f64d55f5fa7.js": "dd54298a2e628e75609193708728c5712ced700c",
"/assets/icons/icon-128x128.png": "dae3b6ed49bdaf4327b92531d4b5b4a5d30c7532",
"/assets/icons/icon-144x144.png": "b0bd89982e08f9bd2b642928f5391915b74799a7",
"/assets/icons/icon-152x152.png": "7479a9477815dfd9668d60f8b3b2fba709b91310",
"/assets/icons/icon-192x192.png": "1abd80d431a237a853ce38147d8c63752f10933b",
"/assets/icons/icon-384x384.png": "329749cd6393768d3131ed6304c136b1ca05f2fd",
"/assets/icons/icon-512x512.png": "559d9c4318b45a1f2b10596bbb4c960fe521dbcc",
"/assets/icons/icon-72x72.png": "c457e56089a36952cd67156f9996bc4ce54a5ed9",
"/assets/icons/icon-96x96.png": "3914125a4b445bf111c5627875fc190f560daa41",
"/favicon.ico": "64a8e578c637632445eb27146bdace22a0a67d3f",
"/index.html": "25109496c7fb90a5405bfcfc6e9dd6cf58ec3944",
"/main.053796e1e3924671dbee.js": "5c36b96118d14a3359f5ee1fa0e6364039800813",
"/polyfills.5fa68b41d92ab3b795c7.js": "8bec897f2edb48724e3ee0be629023a4341f11fe",
"/runtime.69ef21bf8bcc49e08c9e.js": "f8968c9729551f87114304197d9024d845442965",
"/scripts.64e0c48f62b83802d584.js": "a5da6a77894682a4392ff3cf708be911dd595c12",
"/styles.e43a5292c1af99ea721e.css": "d7f76e3762b515c48a214df68fea7775d5095085"
},
"navigationUrls": [
{
"positive": true,
"regex": "^\\/.*$"
},
{
"positive": false,
"regex": "^\\/(?:.+\\/)?[^/]*\\.[^/]*$"
},
{
"positive": false,
"regex": "^\\/(?:.+\\/)?[^/]*__[^/]*$"
},
{
"positive": false,
"regex": "^\\/(?:.+\\/)?[^/]*__[^/]*\\/.*$"
}
]
}
In my app.component.ts constructor I'm using SwUpdate:
updates.available.subscribe(() => {
updates.activateUpdate().then(() => {
document.location.reload()
})
})
I ran out of ideas. I would like to be able to get the page to reload on refresh or when opening new tab/browser.
If anyone with greater service worker knowledge has some ideas about what I could do, I would really appreciate it.
Thanks!
