Office worker: how to create a “fresh” version of the site for each new deployment?

Question

Problem

I had a problem with a website (built with the Polymer Store template ) in production serving old versions of code despite my new and improved deployments.

I am using the Polymer CLI $ polymer buildcommand along the Firebase Tools command $ firebase deployto discard changes to Firebase Hosting. After the deployment is complete, I will go to the site to see the changes that are not updated:

• Chrome: First, I see the old version of the website and I need to “hard update” for the changes to display.

• FireFox: First, I see an old version of the website and I need to “hard update” for the changes to be displayed.

---

Here before n 'after the shot:

---

Service worker service worker?

I'm trying to figure out what the best workflow is for. I want to configure everything so that every time I do a new deployment, the whole site is cleaned up and the service worker is reset via the Internet, and I will be 100% sure that existing users will get this recently deployed experience

without the need for hard updates or incognito mode.

---

Should I...

• Delete an employee and deploy a new version without it (bad idea)?
• Create a "New Project" in the Firebase console and re-link your own domain (tedious)?
• " ", Firebase Console reset ( )?
• sw-precache-config.js ( , )?
• $ polymer build, sw-precache ( , )?
• - , ¯\_(ツ)_/¯?

---

, sw-precache-config.js, , .

module.exports = {
  staticFileGlobs: [
    '/index.html',
    '/manifest.json',
    '/bower_components/webcomponentsjs/webcomponents-lite.min.js',
    '/images/*'
  ],
  navigateFallback: '/index.html',
  navigateFallbackWhitelist: [/^(?!.*\.html$|\/data\/).*/],
  runtimeCaching: [
    {
      urlPattern: /\/data\/images\/.*/,
      handler: 'cacheFirst',
      options: {
        cache: {
          maxEntries: 200,
          name: 'items-cache'
        }
      }
    },
    {
      urlPattern: /\/data\/.*json/,
      handler: 'fastest',
      options: {
        cache: {
          maxEntries: 100,
          name: 'data-cache'
        }
      }
    }
  ]
};

---

- , . .

Answer 1

, , .
- , , , .
- , sw skipWating.
client.js:

navigator.serviceWorker.register('/serviceWorker.js').then(function(reg) {
    reg.addEventListener('updatefound', function() {

      reg.installing.addEventListener('statechange', function() {

        if (reg.installing.state == 'installed') {
          // Notify the user, there is a app new version.
          // User accept
           reg.installing.postMessage({msg: 'skipwaiting'});
        }
      });
    });
});

- , .
serviceWorker.js:

self.addEventListener('message', function(event) {
  if (event.data.msg === 'skipwaiting') {
    self.skipWaiting();
  }
});

, . client.js:

let refreshing;

navigator.serviceWorker.addEventListener('controllerchange', function() {
    if (refreshing) 
    return;
    window.location.reload();
    refreshing = true;
});

, .