Service worker is a proxy between

最主要是的它具有拦截并处理网络请求的能力，如果你不熟悉，很有可能造成强缓存，手动强制刷新页面都无法更新。参考谨慎处理 Service Worker 的更新。
如果非要使用的话， 建议使用 vite-plugin-pwa，插件已经内置了更新提示功能，开发也不用关心如何更新 sw.js。

离线缓存

installing: 页面JS调用navigator.serviceWorker.register()， 浏览器下载并解析相关脚本，我们的新版本service worker获得install事件，它须要为事件的installEvent.waitUntil()方法提供一个promise，以示意浏览器service worker本身安装是否成功；
installed/waiting: 状态在installEvent.waitUntil()的promise成功之后触发。倘若此时已经存在一个先前版本的service worker，浏览器会让我们的新版本service worker等待，直到先前版本控制0个客户端（客户端一般指service worker所在域名下的tab页面）。这里就是阻挡你的内容更新的地方。
activating: service worker获得activate事件，此时先前版本的service worker（如果有）已经让出控制权。我们的新版本service worker会在这个状态中做一些承前启后的准备工作，例如清理旧版本留下的缓存，接管已经开启的tab页面。它会用传递给activateEvent.waitUntil()的promise来示意浏览器是否准备就绪；
activated: 新版本service worker接管客户端，处理从客户端传递的fetch和push等事件；
redundant: service worker的废弃状态，原因可能是安装失败或被新版本替代。

notification

function randomNotification() {
    var randomItem = Math.floor(Math.random()*games.length);
    var notifTitle = games[randomItem].name;
    var notifBody = 'Created by '+games[randomItem].author+'.';
    var notifImg = 'data/img/'+games[randomItem].slug+'.jpg';
    var options = {
        body: notifBody,
        icon: notifImg
    }
    var notif = new Notification(notifTitle, options);
    setTimeout(randomNotification, 30000);
}

# app install

自己在本地调试的时候也发现了消息是否成功发送跟网络也有关系，毕竟 FCM 是谷歌的，科学上网还是要的，不然在 web-push 发送消息调用 FCM 接口会超时的。如果有国外的服务器的话，建议将通知用户接口（必需）和接收订阅用户接口部署在国外的服务器上，否则你跟你的订阅用户就百分百失联了。

如果 FCM 接口返回的状态是 201，该通知消息才有可能被订阅用户收到，谷歌是是收到你的推送意图，但是谷歌能否通知到你的订阅用户就得看你的订阅用户的网络怎么样了，用户的手机系统，我实测的时候 pixel 手机能收到，国产手机有时候就没有成功收到。。