title: Best approach of Service Worker with query string version identifier on a heavy cached site
body: <h2>Story</h2>
  <p>I got a website using traditional browser cache, the site is heavy cached, up to 365 days for static content.</p>
  <p>And to purge the cache after new version deployed, I am using a query string of version identifier like:</p>
  <pre><code>&lt;script src=&quot;js/main.js?version=1.3.0&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p>But for every upgrade of version, the load time is bad because browser need to download all the new contents when query string changed.</p>
  <hr />
  <h2>Situation</h2>
  <p>Now, we got Service Worker, and I've integrated it into my website. All is OK so far, the query string of version identifier still got using.</p>
  <pre><code>// simply cache all the static contents
  global.toolbox.router.get('/', global.toolbox.networkFirst); 
  global.toolbox.router.get(/(.js|.css|.png|.jpg|.json|.html)/, global.toolbox.fastest);
  </code></pre>
  <p>And the same behavior still presenting just like before SW integrated. And yet the upgrade is slow like it always do...</p>
  <hr />
  <h2>Question</h2>
  <p><strong>And I am wondering if there are any better approach?</strong> which can do something like below and still keep the heavy cache mechanism (for old browsers):</p>
  <ol>
  <li>New version found</li>
  <li>Still use the old content of latest version,</li>
  <li>Under going fetch all the new content of new version,</li>
  <li>Next time user visit the site, they will use the latest version.</li>
  </ol>
  <p><em>NOTE The goal it to load the site faster when a new version deployed</em></p>