[英]Service Worker skipWaiting unable to activate currently waiting SW
描述:
我们正在使用sw预缓存来预先缓存脚本,因此更新我们提供重载选项的脚本,因为我们正在监听工作者消息以跳过等待新安装的服务工作者,原因不明我们没有得到正确的
importScript
// GETTING OLD SW reference (self) and NOT getting newly installed SW reference
self.addEventListener('message', function(event) {
*// not working*
self.skipWaiting();
});
// But if we put skipWaiting() in 'install' listener
// it is getting correct new SW reference and working correctly
self.addEventListener('install', function(event) {
// self.skipWaiting();
});
SW注册
if('serviceWorker' in window.navigator) {
window.addEventListener('load', function() {
window.navigator.serviceWorker.register("/serviceWorker.js").then(function(registration) {
console.log("ServiceWorker registration successful with scope: ", registration);
registration.onupdatefound = function() {
console.log('NEW WILD WORKER HAS SPAWNED.!', registration);
var installedWorker = registration.installing;
installedWorker.onstatechange = function() {
if (installedWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
console.log('Updated content is available RELOAD!', navigator.serviceWorker.controller);
var el = document.getElementById('feature');
el.style['display'] = 'block';
}
}
}
}
}).catch(function(error) {
console.error("ServiceWorker registration failed: ", error);
});
});
window.navigator.serviceWorker.addEventListener('controllerchange', function() {
console.log('SERVICE WORKER UPDATED');
});
}
webpack配置
new SWPrecacheWebpackPlugin({
cacheId: 'pwa',
filename: 'serviceWorker.js',
staticFileGlobsIgnorePatterns: [/\.map$/, /\.json$/, /_nch\.[0-9a-z]+\.[js, css]+/g, /webpackManifest\.[0-9a-z]+\.js/g, /.DS_Store\.[0-9a-z]+/g],
importScripts: ['offline/offline.1a2b3c4df1.js'],
dontCacheBustUrlsMatching: /./,
minify: false,
skipWaiting: false,
runtimeCaching: [ {
urlPattern: /_nch\.[0-9a-z]+\.[js, css]+/g,
handler: 'fastest',
options: {
cache: {
name: 'jd-internal-script',
maxEntries: 10,
},
},
}, {
urlPattern: /webpackManifest\.[0-9a-z]+\.js/g,
handler: 'networkFirst',
options: {
cache: {
name: 'jd-root-doc',
},
},
}],
}),
有关skipWaiting()
的最佳文档, skipWaiting()
访问https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/lifecycle#skip_the_waiting_phase
您可以在install
处理程序中无条件地调用它,也可以按照您似乎正在执行的模型,即监听message
事件并有条件地调用skipWaiting()
。
如果你去条件路线,那么你应该修改你的客户页面的代码,以正确检测你正在注册的服务工作者何时进入waiting
状态,并让用户选择以导致相应的方式与页面交互postMessage()
告诉服务工作者skipWaiting()
。 基于你所说的,你已经尝试过了,但看起来你正在将消息发送给错误的服务工作者实例。
这是你的页面代码应该是这样的:
// On your page:
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('service-worker.js').then(function(reg) {
reg.onupdatefound = function() {
var newSW = reg.installing;
newSW.onstatechange = function() {
if (newSW.state === 'waiting') {
// This assumes there's a button with id='skip-waiting-button' that
// users should click to get the new SW to activate immediately.
var button = document.querySelector('#skip-waiting-button');
button.addEventListener('click', function() {
newSW.postMessage('skipWaiting');
});
// Assume that 'display' is 'none' initially.
button.style.display = 'inline';
}
// Handle whatever other SW states you care about, like 'active'.
};
};
})
});
}
// In your service worker:
self.addEventListener('message', event => {
if (event.data === 'skipWaiting') {
self.skipWaiting();
}
});
所以这就是我的想法...你的新服务工作者仍然在等待...因此,事件监听器仍然在你的老服务工作者上...你发送的任何消息仍然会被旧的sw捕获(因为新服务器正在等待) 。
如果你唯一的情况是让新的sw行动起来,你可以简单地刷新页面而不是发送消息
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.