title: How to force loading the current version of an offline-able web app?
body: <p>I'm doing a tiny offline-able web app / PWA. It's meant to be opened from a home screen icon and mimic a regular app by loading entirely from a cache when offline.</p>
  
  <p>The app is written using Vue and to accomplish the above I'm just using their PWA template and whatever it generates. To the best of my knowledge what this does is set up <a href="https://developers.google.com/web/tools/workbox/" rel="nofollow noreferrer">workbox</a> using the <a href="https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#generatesw_plugin_1" rel="nofollow noreferrer">GenerateSW plugin</a> to precache everything in the Webpack build, and registers it using <a href="https://www.npmjs.com/package/register-service-worker" rel="nofollow noreferrer">register-service-worker</a>. That is, I have fairly little control out of the box over the fine details, it's meant to be a turnkey solution.</p>
  
  <p>That said, I'm not sure how to actually load a new build of the application when it's available. The above can detect this - the generated SW registration file with my changes looks like this:</p>
  
  <pre><code>import debug from 'debug';
  import { register } from 'register-service-worker';
  
  
  if (process.env.NODE_ENV === 'production') {
    register(`${process.env.BASE_URL}service-worker.js`, {
      ready(...args) {
        log('App is being served from cache by a service worker.\n', ...args);
      },
      cached(...args) {
        log('Content has been cached for offline use.', ...args);
      },
      updated(...args) {
        log('New content is available; please refresh.', ...args);
      },
      offline(...args) {
        log('No internet connection found. App is running in offline mode.', ...args);
      },
      error(error, ...args) {
        log('Error during service worker registration:', error, ...args);
      }
    });
  }
  </code></pre>
  
  <p>When I make a new build of the application, and I refresh the app in a browser, the <code>updated()</code> callback is executed, but nothing else is done. When I tried adding:</p>
  
  <pre><code>window.location.reload(true);
  </code></pre>
  
  <p>which should be a forced refresh, I just get a refresh loop. I'm assuming this is because the service worker cache is completely independent from the browser cache and unaffected by things like the above or <kbd>Ctrl</kbd>+<kbd>F5</kbd>. (Which makes the "please refresh" rather misleading.)</p>
  
  <p>Since this is going to mimic a native app, and it's supposed to be a simple line-of-business tool, I don't really need to do anything more complicated than immediately reload to the new version of the app when an update is available. How can I achieve this?</p>