- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
基本上,我试图在检测到新的 serviceworker 版本时显示一个对话框,然后让用户决定重新加载以获取它。为此,我们需要在重新加载窗口之前主动设置 skipWaiting
。
这是我的操作:
onClickHandler = () => {
console.log('on click', 'posting skipWaiting');
navigator.serviceWorker.controller.postMessage('skipWaiting');
};
这是我创建 eventListener 的尝试:
navigator.serviceWorker
.register(swUrl)
.then(registration => {
registration.onupdatefound = () => {
const installingWorker = registration.installing;
if (installingWorker == null) {
return;
}
installingWorker.onstatechange = () => {
console.log('worker state', installingWorker.state);
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
console.log(
'New content is available and will be used when all ' +
'tabs for this page are closed.'
);
navigator.serviceWorker.addEventListener('message', event => {
console.log('skip waiting');
if (event.data === 'skipWaiting') {
self.skipWaiting();
}
});
}
}
};
};
})
.catch(error => {
console.error('Error during service worker registration:', error);
});
问题是 navigator.serviceWorker.addEventListener('message', event =>
没有被触发。我声明的监听器是错误的吗?
最佳答案
你很接近。在您安装的 block 中,您可以检查
navigator.serviceWorker.controller
如果存在,则意味着旧内容将被清除,新内容将被添加到缓存中。现在是显示消息或强制刷新的最佳时机。
navigator.serviceWorker.register('service-worker.js').then(function (registration) {
$log.debug('The service worker has been registered ', registration);
if(navigator.online) {
toastr.warning('Offline Mode', 'Application Status');
}
// updatefound is fired if service-worker.js changes.
registration.onupdatefound = function () {
// The updatefound event implies that reg.installing is set; see
// https://slightlyoff.github.io/ServiceWorker/spec/service_worker/index.html#service-worker-container-updatefound-event
var installingWorker = registration.installing;
installingWorker.onstatechange = function () {
switch (installingWorker.state) {
case 'installed':
if (navigator.serviceWorker.controller) {
// At this point, the old content will have been purged and the fresh content will
// have been added to the cache.
// It's the perfect time to display a "New content is available; please refresh."
// message in the page's interface.
toastr.info('Application has been updated, please refresh this page for the most recent version');
window.location.reload();
});
caches.delete('scope-dynamic').then(function () {
$log.debug('Killed the dynamic cache!');
})
$log.debug('New or updated content is available.');
} else {
// At this point, everything has been precached.
// It's the perfect time to display a "Content is cached for offline use." message.
toastr.success('Content is cached for offline use.', 'Application Status');
$log.debug('Content is now available offline!');
}
break;
case 'redundant':
$log.error('The installing service worker became redundant.');
break;
}
};
};
}).catch(function (e) {
$log.error('Error during service worker registration:', e);
});
那里散落着一些棱 Angular 分明的东西,但这应该可以帮助你到达你想去的地方。
关于javascript - 服务 worker 的事件监听器放在哪里,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54258089/
如果一个域有多个团队和多个 Web 应用程序,那么注册 Service Worker 来管理整个站点的最佳建议是什么?具有范围的顶级服务 worker /或子域中的多个服务 worker ?由于一个域
我开发了一个应用程序来分析播放 YouTube 视频时的网络流量。它使用 chrome.webRequest,我使用 onHeadersReceived 事件计算流量。 我想使用 service wo
假设我提供了不同网站使用的推送通知服务。此服务需要在我的客户站点上安装服务 worker 。我希望架构具有一些属性: 完全静态资源。安装service worker文件和配置JS片段等过程只需要完成一
我要缓存某人网站中的特定请求 ,那么我发现 service worker 是一个不错的选择。但我找不到任何方法 通过 tampermonkey 注入(inject)一个 service worker
当 Service Worker 更新时,它不会以正确的方式控制页面;它进入“等待”状态,等待被激活。 令人惊讶的是,更新后的 Service Worker 甚至在刷新页面后都无法控制选项卡。谷歌解释
有谁知道是否有办法在 service worker 中获取此号码或日期: 将我的服务 worker 缓存命名为 cache-1182 会很方便或 cache-20171127171448 我想在安装事
这link说: Workers may spawn more workers if they wish. So-called sub-workers must be hosted within the
有许多关于使用 ngsw-worker.js 安装 ServiceWorker 的分步指南;然而,甚至没有关于使用 safety-worker.js 卸载 ServiceWorker 的分步指南。 s
我正在尝试为我的网站使用后台定期同步。我正在使用 localhost 并在 1*1000 毫秒时注册 periodicsync 事件,但这根本不会触发。 我看过这个demo ,但即使我将该网站安装为应
我试图让用户安排一个周期性任务。我还在一个容器中运行多个 celery worker 。我对该容器的命令过去是这样的: celery worker -c 4 -B -l INFO -A my.cele
从我所看到的,你甚至可以缓存一个网页。根据此文档:https://www.mnot.net/cache_docs/#BROWSER ,表示可以缓存在浏览器缓存中。我看到即使是 serviceworke
我只是在测试 Service Worker 的功能以了解其工作原理。所以现在我遇到了一个问题。 var CACHE_NAME = 'my-site-cache-v1'; var urlsToCache
下图显示安装了两名工作人员 - 一名处于事件状态,另一名未处于事件状态(刚刚安装)。 注册 service worker 更改 service-worker.js并重新加载页面。 逻辑是 Servic
我正在尝试学习渐进式 Web 应用程序的一些基础知识,并且在我阅读的其中一篇教程中学习 [在安装了 service worker 并且用户导航到不同的页面或刷新后,service worker 将开始
我正在开发一个应用程序,其目标是定期(例如每小时)向用户发送通知。 我的想法是使用一个可以在选项卡关闭后运行的服务 worker ,并继续向用户发送这些通知。 网页需要能够与 Service Work
我正在尝试为一个简单但旧的 Django Web 应用程序安装 ServiceWorker。我开始使用示例 read-through caching example from the Chrome t
在我们开发的情况下,我们提供来自 https://localhost 的文件因为该应用程序托管在 salesforce.com 中。在 chrome service worker 中,chrome 会
我是服务人员的新手,并且浏览了各种文档(Google,Mozilla,serviceworke.rs,Github,StackOverflow questions)。最有用的是ServiceWorke
我正在解决一个问题,我有一组“热情的 worker ”。这意味着它们被维护在内存中,维护自己的上下文并且是可调用的。我一直在研究各种 Go Worker 实现,但都依赖于闭包或返回结果的简单计算函数。
我有一个部署到静态服务器的非根路径的网络应用程序。即MyApp构建时部署到路径/文件夹 https://example.com/myapp . MyApp正在使用 vue 和 webpack 所以我添
我是一名优秀的程序员,十分优秀!