Polymer 使用浏览器服务人员通知新的应用程序版本
我用Polymer和Polymer cli构建了一个html/js应用程序(一个渐进式web应用程序),并使用生成良好的service worker进行缓存和脱机 我想知道当应用程序的新版本可用时,如何通知用户并邀请他重新启动浏览器 有什么想法吗 编辑 在IO2016的一次演讲中,Eric Bidel谈到了服务人员,并通知用户应用程序的新版本:Polymer 使用浏览器服务人员通知新的应用程序版本,polymer,service-worker,progressive-web-apps,Polymer,Service Worker,Progressive Web Apps,我用Polymer和Polymer cli构建了一个html/js应用程序(一个渐进式web应用程序),并使用生成良好的service worker进行缓存和脱机 我想知道当应用程序的新版本可用时,如何通知用户并邀请他重新启动浏览器 有什么想法吗 编辑 在IO2016的一次演讲中,Eric Bidel谈到了服务人员,并通知用户应用程序的新版本: 需要检查google IO Web源代码感谢IO团队。。我们需要检查当前的服务人员是否冗余 // Check to see if the servic
需要检查google IO Web源代码感谢IO团队。。我们需要检查当前的服务人员是否冗余
// Check to see if the service worker controlling the page at initial load
// has become redundant, since this implies there's a new service worker with fresh content.
if (navigator.serviceWorker && navigator.serviceWorker.controller) {
navigator.serviceWorker.controller.onstatechange = function(event) {
if (event.target.state === 'redundant') {
// Define a handler that will be used for the next io-toast tap, at which point it
// be automatically removed.
const tapHandler = function() {
window.location.reload();
};
if (IOWA.Elements && IOWA.Elements.Toast &&
IOWA.Elements.Toast.showMessage) {
IOWA.Elements.Toast.showMessage(
'A new version of this app is available.', tapHandler, 'Refresh',
null, 0); // duration 0 indications shows the toast indefinitely.
} else {
tapHandler(); // Force reload if user never was shown the toast.
}
}
};
}
参考资料:
polymer cli
在构建时生成服务工作者,我非常确定这类代码也包括在内。至于引用爱荷华州的应用程序。。。首选的模板应用程序是,它不包括冗余
状态检查。我认为商店应用程序不包括冗余检查,因为这不是一个需要的行为。大多数情况下,服务工作者用于缓存和脱机:这是polymer cli构建脱机和缓存工作者的方式。但是如果你关心你的用户使用你的应用程序的最新版本,你需要处理它。如果浏览器在缓存更新后重新加载自身,将是一种糟糕的用户体验。
// page script
document.addEventListener('DOMContentLoaded', function(){
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('/sw.js')
.then(function(registration) {
console.info('ServiceWorker registration successful with scope:', registration.scope);
// if there's no controller, this page wasn't loaded
// via a service worker, so they're looking at the latest version.
// In that case, exit early
if (!navigator.serviceWorker.controller) return;
// if there's an updated worker already waiting, update
if (registration.waiting) {
console.info('show toast and upon click update...');
registration.waiting.postMessage({ updateSw: true });
return;
}
// if there's an updated worker installing, track its
// progress. If it becomes "installed", update
if (registration.installing) {
registration.addEventListener('statechange', function(){
if (registration.installing.state == 'installed'){
console.info('show toast and upon click update...');
registration.installing.postMessage({ updateSw: true });
return;
}
});
}
// otherwise, listen for new installing workers arriving.
// If one arrives, track its progress.
// If it becomes "installed", update
registration.addEventListener('updatefound', function(){
let newServiceWorker = registration.installing;
newServiceWorker.addEventListener('statechange', function() {
if (newServiceWorker.state == 'installed') {
console.info('show toast and upon click update...');
newServiceWorker.postMessage({ updateSw: true });
}
});
});
})
.catch(function(error) {
console.info('ServiceWorker registration failed:', error);
});
navigator.serviceWorker.addEventListener('controllerchange', function() {
window.location.reload();
});
}
});
// sw script
self.addEventListener('message', function(e) {
if (e.data.updateSw){
self.skipWaiting();
}
});