static-v2event.waitUntil(caches.open('static-v2').then(cache=>cache.add('/cat.svg')));});// Response the cat image when requesting dog.self.addEventListener('fetch',event=>{consturl=newURL(event.request.url);/
高级Service Worker 功能 除了基本的离线缓存,Service Workers 还支持一些高级功能,如网络优先策略、动态缓存更新和推送通知。 1. 网络优先策略 在网络可用时,优先使用网络响应,只有在网络失败时才使用缓存。这可以通过修改 fetch 事件处理程序实现: self.addEventListener('fetch', (event) => { event.respondWith( fe...
W3C TPAC 大会上的 Service workers 内容总结[每日前端夜话0xCD]
fetch回调函数还可以调用waitUntil方法,来延长FetchEvent事件对象的生命,如果有FetchEent对象还未处理完浏览器是不会自动关闭SW的。 5. redundant redundant状态是ServiceWorker的终态。 关于serviceWorker如何变成redundant状态在Lavas Service Worker 生命周期和the-service-worker-lifecycle参考中列举了3种,但是测试发现激活...
在JavaScript中,可以通过监听这些事件来使用Service Worker。例如: self.addEventListener('install', (event) => { // 在这里执行安装时的初始化操作 }); self.addEventListener('activate', (event) => { // 在这里执行激活时的清理操作 }); self.addEventListener('fetch', (event) => { ...
你可以监听InstallEvent,事件触发时的标准行为是准备 service worker 用于使用,例如使用内建的 storage API 来创建缓存,并且放置应用离线时所需资源。 还有一个 activate 事件,触发时可以清理旧缓存和旧的 service worker 关联的东西。 Servcie worker 可以通过FetchEvent事件去响应请求。通过使用FetchEvent.respondWith方法...
Service Worker 注意在isSecureContext为false的环境下,拿不到navigator.serviceWorker 1、可以拦截请求,并允许我们自己设置响应: respondWith new Response // serviceworker.jsself.onfetch=event=>{console.log('拦截到:',event.request.url);constmyResponseBody=newBlob();// myResponseBody返回可以是text、json...
在fetch 事件侦听器中获取 Service Worker 范围 window.location.host, 但window在服务工作人员内部不可用。我还尝试使用 ServiceWorkerRegistration.scope (MDN doc),它将返回我想要的值,但这在 fetch 事件处理程序中也无法访问。 我希望有类似的东西event.scope(在注册处理程序中可用),但用于获取处理程序。这可能吗...
安装Service Worker并且用户导航到另一个页面或刷新他所在的页面后,Service Worker将收到fetch事件。下面是一个演示如何返回缓存资源或执行新请求然后缓存结果的示例: 代码语言:javascript 复制 self.addEventListener('fetch',function(event){event.respondWith(// This method looks at the request and// finds any ca...
fetch 事件,拦截到请求时执行,ServiceWorker 最为重要的部分,决定了是采用缓存还是发起新的请求。 二、两个 ServiceWorker 的脚本实现 脚本来源于网络,本文摘抄记录了一下。 2.1 脚本一 该ServiceWorker 脚本主要作用是用于监听 GitHub 、...