gpt4 book ai didi

javascript - Service Worker - 使用 skipWaiting() 在新版本上更新缓存

转载 作者:行者123 更新时间:2023-12-04 10:16:14 26 4
gpt4 key购买 nike

我已经实现了 Workbox 以使用 webpack 生成我的服务 worker 。这有效 - 我可以确认在运行 "generate-sw": "workbox inject:manifest" 时生成的服务 worker 中的修订已更新。

问题是 - 我注意到我的客户在新版本发布后没有更新缓存。即使在更新 service worker 几天后,我的客户仍在缓存旧代码,新代码只会在几次刷新和/或取消注册 service worker 后加载。对于每个版本,我都确认修订已更新。

我知道我需要实现 skipWaiting 以确保客户端得到更新 - 尤其是 PWA。我已经阅读并尝试在这里遵循第三种方法:https://redfin.engineering/how-to-fix-the-refresh-button-when-using-service-workers-a8e27af6df68 .

我的应用安装在 app.js

我已将此代码添加到serviceWorker-base.js

addEventListener('message', function(messageEvent){
if (messageEvent.data === 'skipWaiting') return skipWaiting();
});

我在 app.js 中有这段代码

const runServiceWorker = true
const serviceWorkerAvailable = ('serviceWorker' in navigator) ? true : false

// reload once when the new Service Worker starts activating
let refreshing
navigator.serviceWorker.addEventListener('controllerchange', function() {
if (refreshing) return
refreshing = true
window.location.reload()
}
)

function promptUserToRefresh(reg) {
// this is just an example - don't use window.confirm in real life; it's terrible
if (window.confirm("New version available! OK to refresh?")) {
reg.waiting.postMessage('skipWaiting')
}
}

function listenForWaitingServiceWorker(reg, callback) {
console.log('listenForWaitingServiceWorker')
function awaitStateChange() {
reg.installing.addEventListener('statechange', function() {
if (this.state === 'installed') callback(reg)
})
}
if (!reg) return
if (reg.waiting) return callback(reg)
if (reg.installing) awaitStateChange()
reg.addEventListener('updatefound', awaitStateChange)
}

// Register service worker
if (runServiceWorker && serviceWorkerAvailable) {
navigator.serviceWorker.register('/serviceWorker.js')
.then( (registration) => {
console.log('Service worker registered', registration)
listenForWaitingServiceWorker(registration, promptUserToRefresh) // <-- Added to existing code
})
}else{
console.log('Service worker disabled - process.env.NODE_ENV', process.env.NODE_ENV)
}

此代码的问题是 promptUserToRefresh() 仅在初始服务工作线程安装时被调用,而不是在新服务工作线程等待时调用!

此外,我在接受第一次安装时收到以下错误。

TypeError: registration.waiting is null
promptUserToRefresh app.js:154
awaitStateChange app.js:162

错误在 promptUserToRefresh(registration) 中被触发registration.waiting.postMessage('skipWaiting')

我也用同样的结果测试了这个方法:https://github.com/GoogleChrome/workbox/issues/1120

最佳答案

代码经过简单的重新排列后现在可以正常工作了!

更新了 app.js

// *** PWA Functionality START ***

// skipWaiting() functions
function promptUserToRefresh(registration) {
// this is just an example - don't use window.confirm in real life; it's terrible
if (window.confirm("New version available! Refresh?")) {
registration.waiting.postMessage('skipWaiting')
}
}
function listenForWaitingServiceWorker(registration) {
console.log('listenForWaitingServiceWorker', registration)
function awaitStateChange() {
registration.installing.addEventListener('statechange', function() {
if (this.state === 'installed') promptUserToRefresh(registration)
})
}
if (!registration) return
if (registration.waiting) return promptUserToRefresh(registration)
if (registration.installing) awaitStateChange()
registration.addEventListener('updatefound', awaitStateChange)
}
//**

const enableServiceWorker = true
const serviceWorkerAvailable = ('serviceWorker' in navigator) ? true : false
// Register service worker
if (enableServiceWorker && serviceWorkerAvailable) {
navigator.serviceWorker.register('/serviceWorker.js')
.then( (registration) => {
console.log('Service worker registered', registration)
listenForWaitingServiceWorker(registration) // ** skipWaiting() code
})
}else{
console.log('Service worker disabled - process.env.NODE_ENV', process.env.NODE_ENV)
}

// Install prompt event handler
export let deferredPrompt
window.addEventListener('beforeinstallprompt', (event) => {
// Prevent Chrome 76 and later from showing the mini-infobar
event.preventDefault()
deferredPrompt = event // Stash the event so it can be triggered later.
try{
showInstallPromotion()
}catch(e){
console.error('showInstallPromotion()', e)
}
})
window.addEventListener('appinstalled', (event) => {
console.log('a2hs installed')
})
// *** PWA Functionality END *

也许下面(删除的)行造成了所有的麻烦?

// reload once when the new Service Worker starts activating
let refreshing
navigator.serviceWorker.addEventListener('controllerchange', function() {
if (refreshing) return
refreshing = true
window.location.reload()
}
)

现在剩下的就是弄清楚如何在首次访问应用/安装时显示提示! (^__^)/

关于javascript - Service Worker - 使用 skipWaiting() 在新版本上更新缓存,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61040426/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com