Workbox多缓存更新时BroadcastUpdatePlugin多次触发刷新提示如何仅提示一次

实现思路 #

通过防抖逻辑合并短时间内的多次更新事件：设置固定等待窗口，每次收到更新通知时重置计时器，等待窗口结束后没有收到新的更新通知，才触发一次刷新提示。同时增加已提示标记，避免重复弹出提示框。

代码调整 #

原有ServiceWorker逻辑无需修改，仅调整前端监听部分的代码即可。

修改后前端JS代码 #

if ('serviceWorker' in navigator) {
    // 防抖定时器
    let updateDebounceTimer = null
    // 已提示标记，避免重复弹出
    let hasNotifiedUpdate = false

    window.addEventListener('load', () => {
        navigator.serviceWorker.register('sw.js', { scope: '/' }).then(swReg => {
            console.log('Service Worker Registered', swReg);
        }).catch(error => {
            console.log('There was an error!', error);
        })
    })
        
    // 监听缓存更新事件，提示页面重载
    navigator.serviceWorker.addEventListener('message', async (event) => {
        if (event.data.meta === 'workbox-broadcast-update' && !hasNotifiedUpdate) {
            const {cacheName, updatedURL} = event.data.payload;
            const cache = await caches.open(cacheName);
            const updatedResponse = await cache.match(updatedURL);
            const updatedText = await updatedResponse.text();
            console.log('Updated: '+cacheName+', '+updatedURL);

            // 每次收到更新事件就清空之前的定时器，重置计时
            if (updateDebounceTimer) clearTimeout(updateDebounceTimer)
            
            // 设置3秒等待窗口，可根据项目资源数量调整
            updateDebounceTimer = setTimeout(() => {
                if(confirm('内容已更新，请刷新页面查看新版本。')){
                    // 注意原代码此处漏写了()，reload是方法需要调用
                    window.location.reload()
                }
                // 标记已提示，后续再有更新也不会重复弹出
                hasNotifiedUpdate = true
            }, 3000)
        }
    })
}

可调整配置 #

• 防抖等待时间：当前设置的3000ms（3秒）可根据项目实际情况调整，资源文件多的站点可适当拉长到5000ms，避免遗漏更新事件。
• 如果需要支持页面生命周期内多次更新提示，可以在用户点击取消刷新/或者页面刷新后重置hasNotifiedUpdate为false即可。

内容的提问来源于stack exchange，提问作者Carl Newlands