Auto refresh page on manifest.json change. iOS offline PWA hack to handle auto updates.

force-reload.js

// ------------------------------------------- IMPORTANT -------------------------------------------
// This is a development file to be minified using https://javascript-minifier.com/ and inlined in
// the index.html file. This file is not compiled or processed by webpack so it should be treated as
// low-level precompiled es5-compatible javascript. The code here is not meant to be clean, it's
// meant to be as light and fast as possible since it runs in the head tag.

// HACK: This file a hack to ensure that home-screen apps on mobile devices gets refreshed when they
// start. It works by forcing a load of the service-worker.js file and use the precache-manifest
// file name as an application version, just like a desktop browser like chrome would do. When
// when it detects a change in the application version, it reloads the page and bypass the browser's
// cache. This should force mobile devices to reload the new version of the app even if they cached
// an older version of the site.
(function () {
  var r = new XMLHttpRequest();
  r.onload = function () {
    var t = r.responseText;
    var versionStart = t.indexOf('"/precache-manifest.') + 20;
    var versionEnd = t.indexOf('.js"', versionStart);

    if (versionEnd - versionStart === 32) {
      var ls = localStorage;
      var oldPrecacheManifestVersion = ls.getItem('pmv');
      var newPrecacheManifestVersion = t.substring(versionStart, versionEnd);

      if (newPrecacheManifestVersion !== oldPrecacheManifestVersion) {
        ls.setItem('pmv', newPrecacheManifestVersion);
        return window.location.reload(true);
      }
    }
  };
  r.open('GET', '/service-worker.js?c=' + new Date().getTime());
  r.setRequestHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
  r.send();
}());

force-reload.min.js

<script type="application/javascript">!function(){var e=new XMLHttpRequest;e.onload=function(){var n=e.responseText,t=n.indexOf('"/precache-manifest.')+20,o=n.indexOf('.js"',t);if(o-t==32){var r=localStorage,i=r.getItem("pmv"),s=n.substring(t,o);if(s!==i)return r.setItem("pmv",s),window.location.reload(!0)}},e.open("GET","/service-worker.js?c=" + new Date().getTime()),e.setRequestHeader('Cache-Control', 'no-cache, no-store, must-revalidate'),e.send()}();</script>

I started to test these solutions because I was running into the same problem. I'm not all the way through my testing but after updating my index.html to include these kinds of scripts, I noticed that the page itself was being cached (and of course meant that my updates to it weren't really being loaded). So I checked all of the usual suspects of headers, etc and all of that looked totally fine. It was then that I noticed that workbox was doing the caching itself.

In figuring out why, the answer was essentially that I guess I sort of told it to. Mind you this was only a problem in iOS but I was noticing some inconsistent behavior in MacOS Safari as well (like sometimes it would get stuck). Never a problem on chrome.

I use webpack to build my SPA, specifically the WorkboxPlugin (v4.3.1).

In my configuration I had this..

new WorkboxPlugin.GenerateSW({
            clientsClaim: true,
            skipWaiting: true,
            navigateFallback: '/index.html',

It was the navigateFallback, that I thought would help me in offline mode. Maybe it does, but obviously I was not fully clear on the ramifications. Once I removed that fallback, everything started behaving properly again.

Just putting that out there in case someone else needs to try something to get past this frustrating issue.

Edit: just to clarify. I did NOT need any of the tricks above. The caching of the index page seemed to cause a bad cycle of caching the wrong resources (in iOS and sometimes Safari, never in chrome). Once it was not cached, things work well.

Ok still at it... definitely not consistent (getting old versions of my index page even with reload(true). I'm trying this script out to see how it does (in addition to my above post). It seems to be working with one extra reload to set the initial version. I also changed the 'find the version string' which wasn't quite right for my version of webpack as the url didn't start with a slash /.

window.addEventListener('focus', () => {
    const isApple = !!window.navigator.vendor && window.navigator.vendor.match(/apple/i);
    if (isApple) {
        const r = new XMLHttpRequest();
        r.onload = function () {
            const t = r.responseText;
            const versionStart = t.indexOf('"precache-manifest.') + 19;
            const versionEnd = t.indexOf('.js"', versionStart);
            if (versionEnd - versionStart === 32) {
                const ls = localStorage;
                const oldPrecacheManifestVersion = ls.getItem('pmv');
                const newPrecacheManifestVersion = t.substring(versionStart, versionEnd);
                if (newPrecacheManifestVersion !== oldPrecacheManifestVersion) {
                    ls.setItem('pmv', newPrecacheManifestVersion);
                    return window.location.reload(true);
                }
            }
        };
        r.open('GET', '/service-worker.js?c=' + new Date().getTime());
        r.setRequestHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
        r.send();
    }
});

So I also figured out that the latest version of Safari seems to also cache the service-worker.js file if you configure the service worker to cache it (even on accident). This seems to be the source of really all the problems I've been having (although I left the focus listener in just in case).

I had this within my web pack configuration:

new WorkboxPlugin.GenerateSW({
    clientsClaim: true,
    skipWaiting: true,
    cleanupOutdatedCaches: true,
    offlineGoogleAnalytics: true,
    runtimeCaching: [
        {
            urlPattern: /.*/,
            handler: 'networkFirst'
        }
    ]
})

What I noticed is that a force refresh in the browser (on MacOS) would load the new service-worker.js but the subsequent refresh (without a force) would actually bring up the older one. So I noticed the browser would swap between the versions seemingly randomly. I changed my runtime caching to be much more specific and things are stable now.

Edit:

Also now got rid of the forced update via the focus listener as the normal updating (via timed update() checks works just fine/consistently when the service-worker.js file isn't cached by itself. Also the problem with this forced reload technique is that the reload itself can happen before the service worker has truly updated (causing multiple refreshes to get the latest app).

In my index.html I have this (which calls the service worker 'update' every 2 minutes after an initial 30s check):

window.isUpdateAvailable = new Promise(function (resolve) {
    // lazy way of disabling service workers while developing, since no https
    if ('serviceWorker' in navigator && location.protocol.startsWith('https')) {
        window.addEventListener('load', () => {
            navigator.serviceWorker.register('service-worker.js')
                .then(reg => {
                    resolve(reg);
                    setTimeout(function update() {
                        reg.update().catch((err) => {
                            console.log('[SW UPDATE ERROR]:' + err);
                        });
                        setTimeout(update, 120000);
                    }, 30000);
                })
                .catch(err => console.error('[SW ERROR]', err));
        });
    }
});

Then in my code (Angular + Material) I do this to 'show a prompt' to the user to reload:

ngOnInit(): void {
    window['isUpdateAvailable']
        .then((reg) => {
            if (reg) {
                this.setupListener(reg);
            }
        });
}

private setupListener(reg) {
    reg.onupdatefound = () => {
        const installingWorker = reg.installing;
        installingWorker.onstatechange = () => {
            if (installingWorker.state === 'installed') {
                this._ngZone.run(() => {
                    this.openSnackBar();
                });
            }
        };
    };
}

private openSnackBar() {
    if (!this.dialogOpen) {
        this.dialogOpen = true;
        this.snackBar.openFromComponent(NewApplicationVersionDataComponent, {
            duration: -1,
            verticalPosition: 'bottom',
            horizontalPosition: 'center'
        }).afterDismissed().subscribe(() => {
            this.dialogOpen = false;
        });
    }
}

Let's assume you already have the app installed without that code implemented: there is no way to force update existing PWAs right away right? I guess you just need to wait until the iPhone refreshes the cache automatically, replace the old index file by the new one including the script and only by then is updating as desired based on that script.

@alexeigs That is right. As far as I am aware off, the only way to reliably force an update in this case is to clear safari's cache. I have seen this cache survive OS updates so I wouldn't count on this happening by itself too much.