1

I am using Workbox 2 to deal with "offline" behavior of my PWA. The content is produced by HexoJS and is deployed to GitHub Pages. Here is the workbox-cli-config.js for reference:

module.exports = {
    globDirectory: "./public/",
    globPatterns: ["**/*.html", "**/*.js", "**/*.css", "**/*.png"],
    swDest: "public/sw.js",
    clientsClaim: true,
    skipWaiting: true,
    runtimeCaching: [
        {
            urlPattern: /^https:\/\/use\.fontawesome\.com\/releases/,
            handler: "networkFirst"
        },
        {
            urlPattern: /^https:\/\/fonts\.gstatic\.com\/s\//,
            handler: "networkFirst"
        },
        {
            urlPattern: /^https:\/\/maxcdn\.bootstrapcdn\.com\/bootstrap/,
            handler: "networkFirst"
        },
        {
            urlPattern: /^https:\/\/fonts\.googleapis\.com/,
            handler: "networkFirst"
        },
        {
            urlPattern: /^https:\/\/code\.jquery\.com\/jquery-3/,
            handler: "networkFirst"
        },
    ]
};

Everything works as expected and the app properly handles switch to the offline mode in Chrome DevTools.

The problem shows up when I update some static content, say HTML, and re-deploy it onto the GitHub pages --- I can see the updated version of the content but not always, and not in all browsers.

I always have to use "Clear browsing data" action in Opera or Chrome (or other browsers) to refresh the appearance of the page, because simple "Refresh/reload" doesn't help.

The problem gets even worser with the "Added to home screen" PWA. I cannot enforce content refresh even by doing uninstall/reinstall. Only wiping off browsing data in Android Chrome browser helps to refresh app content.

My questions are:

  • Is it possible at all to let pre-cached static assets being automatically updated when I re-visit the page or refresh the installed PWA?
  • Am I configuring Workbox in a wrong way (see my workbox-cli-config.js above)
  • Will migration to Workbox 3 make any difference?

I'd be glad to share other config files if this will help to resolve to problem.

PS: The page has the score of 100 in Lighthouse for all criteria except for performance (because of loading blocking content of bootstrap.min.js but read in SO that this is OK).

Simon
  • 158
  • 1
  • 7
  • It's very likely that you're running into https://stackoverflow.com/questions/38843970/service-worker-javascript-update-frequency-every-24-hours/38854905#38854905, because GitHub pages always includes a `Cache-Control: max-age=600` header on all its HTTP responses. – Jeff Posnick Mar 15 '18 at 20:23
  • I totally forgot to mention that I pass site GitHub Pages traffic through Cloudflare to allow HTTPs on custom domain. After reading the first comment I looked at HTTP header and noticed the `max-age=14400` for my service-worker script, so I guess it was heavily cached by Cloudflare without leaving my PWA any chances for static content refreshing. I added `Cache Level: bypass` page rule on Cloudflare specifically for `sw.js`, and now I can see `max-age=600` enforced by GitHub pages. – Simon Mar 16 '18 at 01:04

0 Answers0