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>

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.