A Service Worker 是一个相对较新的 API,在过去几年中被引入到 现代网页浏览器 这是一个非常重要的技术. 这是一个特殊的类型的 web worker,可以安装在您的浏览器中,以提供以前不适用于普通网页的特殊功能,如允许离线访问网站内容。
服务工作者是 进步式 Web 应用程序的核心,因为它们允许缓存资源和推送通知,这是迄今为止区分本地应用程序的两个主要区别功能。
Progressive Web App傘下的功能大多是面向建立使用Web技術的全功能行動應用程式的能力,而這不是與原生堆積相比的次要體驗。
服务工作者运行在一个单独的线程上,这意味着您无法访问主JavaScript线程中可用的许多对象,包括访问DOM和多个API,如XHR或Cookies。
请记住,服务人员需要通过HTTPS服务,否则浏览器不会注册他们。
服务工人的主要特点
Progressive Web Apps(PWAs)的最终目标是在移动设备上表现出色,而在移动设备上,网页始终失败的一件事是处理离线状态。
服务人员可以 拦截网络请求,使用Cache API将其添加到浏览器缓存中,如果他们检测到浏览器离线并且网络不可用,他们可以服务缓存资源。
另一个重要功能是通过使用Push API和Notifications API来启用推送通知,这是两个独立的Web平台API,开发人员可以在服务人员中使用。
如何安装服务工人
服务人员必须安装在浏览器中,才能使用。
首先,您需要检查浏览器是否部署服务人员。
最好的方法是检查在 导航对象上是否存在服务工作者:
1if (!('serviceWorker' in navigator)) {
2 // service workers not supported 😣
3 return
4}
如果服务人员可用,您可以通过指定可找到的文件来注册您的服务人员. 您总是有单独的文件,可以通过浏览器访问。
您等待页面加载,然后使用navigator.serviceWorker.register()方法注册服务工作者:
1window.addEventListener('load', () => {
2 if (!('serviceWorker' in navigator)) {
3 // service workers not supported 😣
4 return
5 }
6
7 navigator.serviceWorker.register('/worker.js').then(
8 () => {
9 // registered! 👍🏼
10 },
11 err => {
12 console.error('SW registration failed! 😱', err)
13 }
14 )
15})
服务工人生命周期
我提到,服务工作者需要在浏览器中安装,才能使用。
当用户第一次访问您的网站时,服务人员唯一能做的就是安装。
服务工作者内部的一切,它所提供的任何功能,都不会启用,直到用户访问您的网站上的第二页,或更新当前页面。
什么是服务工人
我们刚刚看到如何安装生活在worker.js文件中的服务工作者,但我们还没有查看该文件。
在服务工作者中,您可以听到浏览器发出的几个事件:
它可以是一个新页面,一个JSON API,一个图像,一个CSS文件,任何东西
*安装在服务工作者安装时被发送
*激活在服务工作者注册和安装时被发送。这个地方是你可以清理与服务工作者的旧版本相关的东西,如果更新了
*如果浏览器之前发现连接不可用,则同步被发送,并且现在向服务工作者发出信号,即互联网连接正在运行
*推动在收到新推事件时被Push API召唤
使用隐藏的资源
当服务工作者安装时,我们可以告诉浏览器缓存我们需要在稍后离线时服务页面的特定资源:
1self.addEventListener('install', event => {
2 event.waitUntil(
3 caches
4 .open('my-site-name')
5 .then(cache =>
6 cache.addAll([
7 'favicon.ico',
8 'style.css',
9 'script.js',
10 'https://fonts.googleapis.com/css?family=Inconsolata:400,700'
11 ])
12 )
13 )
14})
此代码使用Cache API,使浏览器在名为我的网站名称的缓存中缓存所有这些资源。
让我们看看如何聆听一个fetch事件,以便在下次访问我们的网站页面时为用户提供缓存资源:
1self.addEventListener('fetch', event => {
2 event.respondWith(
3 caches.match(event.request).then(response => {
4 if (response) {
5 //we found an entry in the cache!
6 return response
7 }
8 return fetch(event.request)
9 })
10 )
11})
我们检查缓存是否包含由请求属性识别的资源,否则我们启动了 fetch request来获取它。
请注意在上面的例子中使用自我。工人获得一个全球的自我只读的属性,以允许访问自己。
更新服务员
一旦安装服务工作者,它将继续运行,直到用户删除它,或者您更新它。
要更新服务工作者,你只需要在服务器上推一个新版本(即使改变一个字节就足够了),浏览器将检测它是一个新版本,它将下载并安装它。
就像第一次安装时一样,新服务工作者直到下一个页面加载才可用。