服务工作者：如何建立＆＃34; Fresh＆＃34;每个新部署的网站版本？

Question

问题

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

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

• Chrome：我首先看到旧版本的网站，并且必须＆＃34;硬刷新＆＃34;要显示更改。

• FireFox：我首先看到网站的旧版本，并且必须＆＃34;硬刷新＆＃34;要显示更改。

  

这里是之前的n＆＃39;拍摄后：

服务工作者工作流程？

我试图找出最适合这种情况的工作流程。我想进行设置，以便每次进行新部署时，整个站点都会被清理干净，服务人员会通过内部网重置自己，并且我将100％确定现有用户将获得新部署经验

  

无需硬刷新或使用隐身模式。

我应该......

• 删除服务工作者并在没有它的情况下部署新版本（坏主意）？
• 创建一个＆＃34;新项目＆＃34;在Firebase控制台中重新链接自定义域（繁琐）？
• 找到＆＃34;魔术按钮＆＃34;按内部Firebase控制台重置（这是否存在）？
• 编辑sw-precache-config.js文件（不确定如何）？
• 在$ polymer build处理此问题以配置sw-precache（不确定如何）？
• 甚至不了解¯\_(ツ)_/¯的一些令人敬畏的事情？

我知道问题存在于sw-precache-config.js文件中，但我不确定这是否应该 fix 这个。< / p>

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;
});

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