You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
// ...self.addEventListener('fetch',event=>{event.respondWith(caches.match(event.request).then(response=>{if(response){//found cached resourcereturnresponse;}// get resource and add it to cachereturnfetch(event.request).then(response=>{// check if the response is validif(!response.ok){returnresponse;}// clone the responseconstnewResponse=response.clone();// add it to cachecaches.open(CACHE_NAME).then(cache=>cache.put(event.request,newResponse));// return responsereturnresponse;});}));});
Service workers是
Progressive Web Apps
的核心部分,允许缓存资源和Web推送通知等,以创建良好的离线体验。它们充当Web应用程序,浏览器和网络之间的代理,允许开发人员拦截和缓存网络请求,并基于网络的可用性采取适当的操作。一个
service worker
在单独的线程上运行,因此它是非阻塞的。这也意味着它无法访问主JavaScript
线程中可用的DOM和其他API,比如cookie,XHR,Web存储API(本地存储和会话存储)等。由于它们被设计为完全异步,因此它们重度依赖promise来等待网络请求的响应。浏览器支持
Service Workers是一种相对较新的API,仅受现代浏览器的支持。因此,我们首先需要检查浏览器是否支持该API:
Service Worker 注册
在我们开始缓存资源或拦截网络请求之前,我们必须在浏览器中安装
service worker
。由于service worker
本质上是一个JavaScript
文件,因此可以通过指定文件的路径来注册它。该文件必须可以通过网络访问,并且只应包含service worker
代码。你应该等待页面加载完成,然后将
service worker
文件路径传给navigator.serviceWorker.register()
方法:每次页面加载时都可以运行上面的代码,没有任何问题;浏览器将决定是否已经安装
service worker
并相应地处理它。Service Worker 生命周期
注册生命周期包括三个步骤:
当用户首次访问您的网站时,会立即下载
service worker
文件并尝试安装。如果安装成功,则激活service worker
。在用户访问另一个页面后刷新当前页面之前,service worker
文件中的任何功能都不可用。浏览器事件
一旦
service worker
被安装并激活了,它就可以开始拦截网络请求和缓存资源。这可以通过监听service worker
文件中浏览器发出的事件来完成。浏览器发出以下事件:install
active
。在安装新版本之前,此事件可用于删除过期的缓存资源。fetch
。资源可以是任何东西:新的HTML文档,图像,JSON API,样式表或者JavaScript文件,以及远程位置上可用的任何内容。push
由Push API发送。你可以使用此事件向用户显示通知。sync
。提供缓存资源
我们可以在安装
service worker
时监听install
事件,以缓存当我们离开网络时需要为网页提供服务的特定资源:上面的例子中,代码使用
Cache API
将资源存储在名为site-name-cache
的缓存中。现在让我们监听一个
fetch
事件来检查所请求的资源是否已经存储在缓存中,如果找到则将其返回:我们查找请求属性标识的资源缓存条目,如果没有找到,我们会发送获取请求。如果你也想缓存新的请求,可以通过处理获取请求的响应然后将其添加到缓存来完成,如下所示:
Service Worker 更新
安装
service worker
程序后,它将继续运行,直到用户将其删除或者更新为止。要更新service worker
,你需要做的就是在服务器上上传新版本的service worker
文件。当用户访问你的站点时,浏览器将自动检测文件更改(即使只有一个字节更改就足够了),并安装新版本。就像第一次安装一样,只有当用户导航到另一个页面或刷新当前页面时,新的
service worker
的功能才能使用。我们可以做的事情就是监听
activate
事件,并删除旧的缓存资源。以下代码通过遍历所有缓存并删除与缓存名称匹配的缓存来完成此操作:以上就是
service workers
的简介了。如果你想了解更多,移步SerciceWorker Cookbook -- 这里有一系列现代网站中使用service worker
的实用例子。参考和后话
更多的内容,请戳我的博客进行了解,能留个star就更好了💨
The text was updated successfully, but these errors were encountered: