前端项目部署自动检测更新后通知用户刷新页面（前端实现，技术框架vue、js、webpack）——方案二：轮询去判断服务端的index.html是否跟当前的index.html的脚本hash值一样

// service-worker.js

self.addEventListener('install', () => self.skipWaiting());

self.addEventListener('activate', (event) => {
  event.waitUntil(self.clients.matchAll().then(clients => {
    clients.forEach(client => {
      if (client.url && 'navigate' in client) {
        client.navigate(client.url);
      }
    });
  }));
});

// webpack.config.js

new WorkboxWebpackPlugin.GenerateSW({
  clientsClaim: true,
  skipWaiting: true
}),

// main.js

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js').then(registration => {
    registration.onupdatefound = () => {
      const installingWorker = registration.installing;

      installingWorker.onstatechange = () => {
        if (installingWorker.state === 'installed' && navigator.serviceWorker.controller) {
          new Worker('./update-worker.js');
        }
      };
    };
  });
}

// update-worker.js

self.onmessage = () => {
  const message = '新版本已经更新，请刷新页面！';
  self.postMessage(message);
};

self.onmessage = (event) => {
  alert(event.data);
};