关于前端:Service-worker-简介

Service workers 实质上充当 Web 应用程序、浏览器与网络（可用时）之间的代理服务器。这个 API 旨在创立无效的离线体验，它会拦挡网络申请并依据网络是否可用采取来适当的动作、更新来自服务器的的资源。它还提供入口以推送告诉和拜访后盾同步 API。

Service worker 的概念和用法

Service worker 是一个注册在指定源和门路下的事件驱动 worker。它采纳 JavaScript 管制关联的页面或者网站，拦挡并批改拜访和资源申请，细粒度地缓存资源。你能够齐全管制利用在特定情景（最常见的情景是网络不可用）下的体现。

Service worker 运行在 worker 上下文，因而它不能拜访 DOM。绝对于驱动利用的主 JavaScript 线程，它运行在其余线程中，所以不会造成阻塞。它设计为齐全异步，同步 API（如 XHR 和 localStorage）不能在 service worker 中应用。

出于平安考量，Service workers 只能由 HTTPS 承载，毕竟批改网络申请的能力裸露给中间人攻打会十分危险。在 Firefox 浏览器的用户隐衷模式，Service Worke 不可用。

留神：Service workers 能够更粗疏地管制每一件事件，反对当操作出错时终止操作

留神：Service workers 大量应用 Promise，因为通常它们会期待响应后持续，并依据响应返回一个胜利或者失败的操作。Promise 非常适合这种场景。

注册

应用 ServiceWorkerContainer.register() 办法首次注册 service worker。如果注册胜利，service worker 就会被下载到客户端并尝试装置或激活（见下文），这将作用于整个域内用户可拜访的 URL，或者其特定子集。

下载、装置和激活

此时，你的服务工作者 (service worker) 将恪守以下生命周期：

1. 下载
2. 装置
3. 激活

用户首次拜访 service worker 管制的网站或页面时，service worker 会立即被下载。

之后，在以下状况将会触发更新:

• 一个返回作用域内页面的导航
• 在 service worker 上的一个事件被触发并且过来 24 小时没有被下载

无论它与现有 service worker 不同（字节比照），还是第一次在页面或网站遇到 service worker，如果下载的文件是新的，装置就会尝试进行。

如果这是首次启用 service worker，页面会首先尝试装置，装置胜利后它会被激活。

如果现有 service worker 已启用，新版本会在后盾装置，但不会被激活，这个时序称为 worker in waiting。直到所有已加载的页面不再应用旧的 service worker 才会激活新的 service worker。只有页面不再依赖旧的 service worker，新的 service worker 会被激活（成为 active worker）。

你能够监听 InstallEvent，事件触发时的规范行为是筹备 service worker 用于应用，例如应用内建的 storage API 来创立缓存，并且搁置利用离线时所需资源。

还有一个 activate 事件，触发时能够清理旧缓存和旧的 service worker 关联的货色。

Servcie worker 能够通过 FetchEvent 事件去响应申请。通过应用 FetchEvent.respondWith 办法，你能够任意批改对于这些申请的响应。

留神: 因为 oninstall 和 onactivate 实现前须要一些工夫，service worker 规范提供一个 waitUntil 办法，当 oninstall 或者 onactivate 触发时被调用，承受一个 promise。在这个 promise 被胜利 resolve 以前，功能性事件不会散发到 service worker。

其余应用场景

Service workers 也能够用来做这些事件：

• 后盾数据同步
• 响应来自其它源的资源申请
• 集中接管计算成本高的数据更新，比方地理位置和陀螺仪信息，这样多个页面就能够利用同一组数据
• 在客户端进行 CoffeeScript，LESS，CJS/AMD 等模块编译和依赖治理（用于开发目标）
• 后盾服务钩子
• 自定义模板用于特定 URL 模式
• 性能加强，比方预取用户可能须要的资源，比方相册中的前面数张图片

将来 service workers 可能用来做更多使 web 平台靠近原生利用的事。值得关注的是，其余规范也能并且将会应用 service worker，例如:

• 后盾同步：启动一个 service worker 即便没有用户拜访特定站点，也能够更新缓存
• 响应推送：启动一个 service worker 向用户发送一条信息告诉新的内容可用
• 对工夫或日期作出响应
• 进入天文围栏

接口

• Cache

示意用于 Request/Response对象对的存储，作为 ServiceWorker 生命周期的一部分被缓存。

• CacheStorage

示意 Cache 对象的存储。提供一个所有命名缓存的主目录，ServiceWorker能够拜访并保护名字字符串到 Cache 对象的映射。

• Client

示意 service worker client 的作用域。一个 service worker client 能够是浏览器上下文的一个文档，也能够是一个由流动 worker 管制的SharedWorker。

• Clients

示意一个 Client 对象容器，是拜访以后源的流动 service worker clients 的次要路径。

• ExtendableEvent

扩大被散发到 ServiceWorkerGlobalScope 的 install 和 activate 事件时序，作为 service worker 生命周期的一部分。这会确保任何功能型事件（如FetchEvent）不被散发到 ServiceWorker，直到它更新了数据库架构、删除过期缓存项等等当前。

• ExtendableMessageEvent

在 ServiceWorker 上触发的音讯事件的事件对象（当在 ServiceWorkerGlobalScope 上从另一个上下文接管到通道音讯时）——缩短了此类事件的生命周期。

• FetchEvent

传递给 ServiceWorkerGlobalScope.onfetch 处理函数的参数，FetchEvent 代表一个在 ServiceWorker 的 ServiceWorkerGlobalScope 中散发的申请动作。它蕴含对于申请和响应的后果信息，并且提供 FetchEvent.respondWith() 办法，这个办法容许咱们提供任意的响应返回到管制页面。

• InstallEvent

传递给 oninstall 处理函数的参数，InstallEvent 接口代表一个在 ServiceWorker 的ServiceWorkerGlobalScope 中散发的装置动作，作为 ExtendableEvent 的子事件，它保障诸如 FetchEvent 的功能性事件在装置过程中不会被散发。

• NavigationPreloadManager

提供应用 Service Worker 治理资源预加载的办法。

• Navigator.serviceWorker

返回一个 ServiceWorkerContainer 对象，能够提供入口用于注册、删除、更新以及与在相干 document 中 ServiceWorker 通信的对象。

• NotificationEvent

传递给onnotificationclick 处理函数的参数，NotificationEvent 接口代表在 ServiceWorker 里 ServiceWorkerGlobalScope 中散发的单击事件告诉。

• ServiceWorker

示意一个 service worker。多个浏览的上下文 (例如 pages,workers 等等) 都能通过雷同的 ServiceWorker 对象相关联。

• ServiceWorkerContainer

提供一个在网络生态中把 service worker 作为一个整体的对象，包含辅助注册，反注册以及更新服务工作者，并且拜访 service worker 的状态以及他们的注册信息。

• ServiceWorkerGlobalScope

示意 service worker 的全局执行上下文。

• ServiceWorkerMessageEvent

蕴含对于一个发送给以 navigator.serviceWorker 为指标的事件信息。

• ServiceWorkerRegistration

示意 service worker 的注册。

• ServiceWorkerState

与它本人的 ServiceWorker 的状态相关联。

• SyncEvent

传递给同步函数的参数，SyncEvent 接口代表在 ServiceWorker 里ServiceWorkerGlobalScope 散发的同步动作。

• SyncManager

提供一个接口用于注册和返回 SyncRegistration 对象。

• WindowClient

示意在浏览器上下文中记录的 service worker 客户端的作用域，被流动的工作者管制。是 Client 对象的非凡类型，蕴含一些附加的办法和可用的属性。

学习乏味的常识，结识乏味的敌人，塑造乏味的灵魂！

大家好！我是〖编程三昧〗的作者 隐逸王，我的公众号是『编程三昧』，欢送关注，心愿大家多多指教！