Service Worker：如何为每个新部署构建 "Fresh" 版本的网站？

Question

问题

我在生产中遇到了一个网站（使用 Polymer Shop 模板构建）的问题，尽管我进行了新的和改进的部署，但它仍在提供旧版本的代码。

我正在使用 Polymer CLI $ polymer build 命令和 Firebase 工具 $ firebase deploy 命令将更改推送到 Firebase 托管。部署完成后，我导航到该网站只看到更改未更新：

Chrome: 我先看到网站的旧版本，必须 "hard refresh" 才能显示更改。
FireFox: 我先看到旧版本的网站，必须 "hard refresh" 才能显示更改。

Here's the before n' after shot:

Service Worker 工作流程？

我正在尝试找出对此的最佳工作流程。我想进行设置，以便每次进行新部署时，整个站点都会被清除干净，服务人员会通过互联网重新设置自己，我将 100% 确定现有用户将获得新部署的体验

with out having to hard refresh or use incognito mode.

我应该...

删除服务工作者并在没有它的情况下部署新版本（坏主意）？
在 Firebase 控制台中创建一个 "New Project" 并重新link 自定义域（乏味）？
在 Firebase 控制台中找到 "magic button" 以进行重置（是否存在）？
编辑 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'
        }
      }
    }
  ]
};

Service Worker 是一个了不起的工具，我绝对希望在我的项目中使用它。我只需要学习如何驯服野兽。

Answer 1

我不了解 Polymer，但这是我通常使用 Service Worker 的流程。
- 在客户端中，我检查是否有更新，如果 he/she 想要更新，应用程序会通知用户。
- 用户接受新版本，然后客户端向 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'});
        }
      });
    });
});

-在 service worker 中监听消息并在用户接受新版本时跳过等待。
serviceWorker.js:

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

客户端在 service worker 改变状态后刷新应用程序。 client.js:

let refreshing;

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

也许这可以给你一个想法。

Service Worker：如何为每个新部署构建 "Fresh" 版本的网站？

Service Worker: How to build "Fresh" version of website for each new deployment?

polymer

service-worker

firebase-polymer

polymer-cli

sw-precache

问题

Service Worker 工作流程？

我应该...