服务人员：如何为每个新部署构建“新”版本的网站？

Question

问题

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

我正在使用$ polymer build带有Firebase Tools $ firebase deploy命令的Polymer CLI 命令将更改推送到Firebase Hosting。部署完成后，我仅浏览网站以查看未更新的更改：

• Chrome：我首先看到的是网站的旧版本，必须“强制刷新”才能显示更改。

• FireFox：我首先看到该网站的旧版本，并且必须“强制刷新”以使更改出现。

---

以下是射门前的n'：

---

服务人员工作流程？

我试图弄清楚什么是最好的工作流程。我想要进行设置，以便每次进行新部署时，整个站点都被清理干净，服务人员可以通过内部网络重置自己，我将100％确保现有用户将获得新部署的体验

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

---

我是不是该...

• 删除服务工作者并部署没有它的新版本（不好的主意）？
• 在Firebase控制台中创建“新项目”，然后将自定义域重新链接起来（乏味）？
• 找到“魔术按钮”以在Firebase控制台中按下以进行重置（是否存在）？
• 编辑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 发送一条消息来跳过Wating。
客户端.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();
  }
});

Service Worker 更改状态后，客户端刷新应用程序。 客户端.js：

let refreshing;

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

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