详解javascript中的Service Workers！
相关引荐：《编程入门》
service worker 是啥
Service Worker 是 Chrome 团队提出和力推的一个 WEB API，用于给 web 利用供给高级的可连续的后台处置能力。该 WEB API 标准起草于 2013 年，于 2014 年纳入 W3C WEB 标准草案，当前还在草案阶段。
Service Worker 最主要的特点是：在页面中注册并安置成功后，运转于阅读器后台，不受页面刷新的影响，可以监听和截拦作用域范畴内所有页面的 HTTP 恳求。
相似一个效劳器与阅读器之间的中心人角色，假如网站中注册了service worker 那么它可以拦截当前网站所有的恳求，停止推断（需要编写响应的推断程序），假如需要向效劳器发起恳求的就转给效劳器，假如可以直接使用缓存的就直接返回缓存不再转给效劳器。从而大大提高阅读体验。
Service Worker 可以启用之前原生利用程序专有的一组功效。 Service Worker 的初稿已于2014年公布，此刻所有主流阅读器都支撑它们。
就像已经指出的定义一样，Service Worker 是网络代理。 这意味着它们可以操纵页面中的所有网络恳求，并且可以对其停止编程，使用缓存的停止响应。
Service Worker 特点
- 网站必需使用
HTTPS。除了使用当地开发环境调试时(如域名使用localhost) - 运转于阅读器后台，可以操纵翻开的作用域范畴下所有的页面恳求
- 独自的作用域范畴，独自的运转环境和施行线程
- 不克不及操纵页面 DOM。但可以通过事件机制来处置
怎样注册 Service Worker
注册 Service Worker 不需要太多代码，只需要一个用于Service Worker 代码的 JS 文件，一样取名为 service-worker.js
// 第一检查阅读器可否支撑 Service Worker
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('/sw/service-worker.js')
.then(function(registration) {
console.log(registration);
})
.catch(function(err) {
console.log(err);
});
}其实关键代码只要一行：
navigator.serviceWorker.register('/sw/service-worker.js')留意：
Service Worker 的注册途径决议了其 scope 默许作用范畴。示例中 service-worker.js 是在 /sw 途径下，这使得该 Service Worker 默许只会收到 /sw 途径下的 fetch事件。假如存置在网站的根途径下，则将会收到该网站的所有 fetcg事件。
假如但愿改动它的作用域，可在第二个参数设定 scope范畴。示例中将其改为了根名目，即对整个站点生效。
别的应意识到这一点：Service Worker 没有页面作用域的概念，作用域范畴内的所有页面恳求都会被当前激活的 Service Worker 所监控。
Service Worker 可以启用哪些功效？
在本节中，我将进一步具体介绍Service Worker的功效，包罗一些小代码示例。
效劳工作者启用以下功效，这些功效也是 PWA的中心：
- 离线功效
- 按期后台同步
- 推送通知
离线功效
Service Worke 通过缓存资源和拦截网络恳求来供给离线功效，这些恳求可以与先前缓存的资源一起使用，而不是从新恳求效劳器。
我们可以从中得出两个步骤：
- 预缓存
- 从缓存中处置恳求
这两个步骤都利用了Cache API，它由 Web Workers 和阅读器使用，并且为我们供给了用于网络恳求的储备机制。
对 Web 和效劳工作人员上下文的 localStorage 拜访被阻挠，以防止并发性问题。作为一种替换方案，IndexedDB 可以用于储备大量数据。
预缓存
预缓存是一个术语，描写了在 Service Worker 处于激活状态此前下载和缓存文件。 它是在 Service Worker 生命周期的“install ”步骤中完成的。 一旦 Service Worker 处于激活状态，它将预备为缓存中的文件供给效劳。
平常，我们要缓存 Application Shell，这是运转网站所需的最少代码量。 假如开发了本机利用程序，那么这就是您将上传到利用程序商店的代码包。 这包罗所有必需的根本JavaScript，HTML和图片。
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open(currentCache.offline).then(function(cache) {
return cache.addAll([
'/static/images/offline.svg',
'/static/html/offline.html',
]);
});
);
});从缓存中处置恳求
在此阶段，我们已经将所有利用程序代码储备在缓存中，并且Service Worker 已处于激活即运转于阅读器后台。
此刻独一缺少的是监听 fetch 事件并从缓存中返回结果。可以通过 fetch 事件可以拦截到当前作用域范畴内的 http/https 恳求，并且给出本人的响应。结合 Fetch API ，可以简便利便地处置恳求响应，实现对网络恳求的操纵。
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
})
);
});在本例中，我们尽大概使用缓存的内容停止响应。作为回退，我们发出一个网络恳求。
这里实现了一个缓存优先、落级处置的战略逻辑：监控所有 http 恳求，当恳求资源已经在缓存里了，直接返回缓存里的内容；不然使用 fetch API 连续恳求，假如是 图片或 css、js 资源，恳求成功后将他们参加缓存中；假如是离线状态或恳求出错，则落级返回预缓存的离线内容。
按期后台同步
正如在引言中已经提到的那样，Service Worker 与其他效劳工作者在一个独自的线程上运转，所以即便关闭页面，它们也可以施行其代码。 此功效关于施行后台同步和供给推送通知很重要。
后台同步
会员分开页面后，后台同步平常用于同步数据。
例如，在手机上编纂文档后，我们写完会点击“留存”并分开页面。 假如在编纂文档期间连接断开，我们必需等候连接复原才能留存文档。
后台同步的目的是解决这个问题，一旦连接从新创立，主动发送数据。
来看一个示例：
app.js
navigator.serviceWorker.ready.then((registration) => {
return registration.sync.register('sync-save-document');
});service-worker.js
self.addEventListener('sync', (event) => {
if (event.tag === 'sync-save-document') {
event.waitUntil(saveDocument());
}
});saveDocument是一个返回 Promise，假如被回绝（例如由于网络问题），同步将主动重试。
要留意的一件事是，同步标志必需是独一的。 例如，假如我要安排5个“message”类型的后台同步，则只要最后一个会通过。 因此，在这种状况下，每个标签都应具有独一的标识符。
按期后台同步
按期后台同步解决与正常后台同步不一样的问题。 该API可用于在后台更新数据，而不必等候会员。
这对许多利用程序都很有用。有了这项技术，会员可以在没有互联网连接的状况下阅读最新的新闻文章。
为了防止滥用这一功效，同步的频率取决于阅读器为每个网站设定的站点参与度分数。假如你经常翻开一个网页利用，这个频率最多可以到达12个小时。
要实现此目的一个要求是，该网站已作为移动设备上的 PWA 安置并增加到主屏幕。
推送通知
Service Worker另一个相似本机的特性是推送通知。我们平常通过手机短信或社交媒体通知的情势知道它们，但它们也可以在台式电脑上使用。
除Safari之外，所有主流阅读器都支撑它们，而Safari对桌面利用程序有本人的实现。
要使用推送通知，需要设定一台效劳器，该效劳器会将通知推送给所有客户端。 由于Service Worker在后台在另一个线程上运转，因此即便页面当前未翻开，会员也可以看到推送通知。
推送的实现有两步：
不一样阅读器需要用不一样的推送新闻效劳器。以 Chrome 上使用 Google Cloud Messaging<GCM> 作为推送效劳为例，第一步是注册 applicationServerKey(通过 GCM 注册猎取)，并在页面上停止订阅或发起订阅。每一个会话会有一个独立的端点（endpoint），订阅对象的属性(PushSubscription.endpoint) 即为端点值。将端点发送给效劳器后，效劳器用这一值来发送新闻给会话的激活的 Service Worker （通过 GCM 与阅读器客户端沟通）。
阅读器支撑状况
除了 Safari 和 IE/Edge，大部分现代阅读器都已经得到了支撑。
总结
但愿通过本文介绍根本概念和特性，可以让你更好地懂得Service Worker。
