这篇翻译不完整。请帮忙从英语翻译这篇文章

Service workers 本质上充当位于Web应用程序之间的代理服务器,以及浏览器和网络(如果可用)。它们旨在(除其他之外)使得能够创建有效的离线体验,拦截网络请求并基于网络是否可用以及更新的资产是否驻留在服务器上来采取适当的动作。他们还允许访问推送通知和后台同步API。

服务工作者(Service worker) 概念和用法

Service worker是一个注册在指定源和路径下的事件驱动worker。它采用JavaScript控制关联的页面或者网站,拦截并修改访问和资源请求,细粒度地缓存资源。你可以完全控制应用在特定情形(最常见的情形是网络不可用)下的表现。

Service worker运行在worker上下文,因此它不能访问DOM。相对于驱动应用的主JavaScript线程,它运行在其他线程中,所以不会造成阻塞。它设计为完全异步,同步API(如XHRlocalStorage)不能在service worker中使用。

出于安全考量,Service workers只能由HTTPS承载,毕竟修改网络请求的能力暴露给中间人攻击会非常危险。在Firefox浏览器的用户隐私模式,Service Worker不可用。

注意:Service workers之所以优于以前同类尝试(如AppCache),是因为它们无法支持当操作出错时终止操作。Service workers可以更细致地控制每一件事情。

注意:Service workers大量使用Promise,因为通常它们会等待响应后继续,并根据响应返回一个成功或者失败的操作。Promise非常适合这种场景。

注册

使用 ServiceWorkerContainer.register() 方法首次注册service worker。如果注册成功,service worker就会被下载到客户端并尝试安装或激活(见下文),这将作用于整个域内用户可访问的URL,或者其特定子集。

下载、安装和激活

此时,你的服务工作者(service worker)将遵守以下生命周期:

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

用户首次访问service worker控制的网站或页面时,service worker会立刻被下载。

之后至少每24小时它会被下载一次。它*可能*被更频繁地下载,不过每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

其他使用场景

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
扩展被分发到ServiceWorkerGlobalScopeinstall和activate事件时序,作为service worker生命周期的一部分。这会确保任何功能型事件(如FetchEvent)不被分发到ServiceWorker,直到它更新了数据库架构、删除过期缓存项等等以后。
FetchEvent
The parameter passed into the ServiceWorkerGlobalScope.onfetch handler, FetchEvent represents a fetch action that is dispatched on the ServiceWorkerGlobalScope of a ServiceWorker. It contains information about the request and resulting response, and provides the FetchEvent.respondWith() method, which allows us to provide an arbitrary response back to the controlled page.
InstallEvent
The parameter passed into the oninstall handler, the InstallEvent interface represents an install action that is dispatched on the ServiceWorkerGlobalScope of a ServiceWorker. As a child of ExtendableEvent, it ensures that functional events such as FetchEvent are not dispatched during installation. 
Navigator.serviceWorker
Returns a ServiceWorkerContainer object, which provides access to registration, removal, upgrade, and communication with the ServiceWorker objects for the associated document.
NotificationEvent
The parameter passed into the onnotificationclick handler, the NotificationEvent interface represents a notification click event that is dispatched on the ServiceWorkerGlobalScope of a ServiceWorker.
PeriodicSyncEvent

The parameter passed into the sync handler, the SyncEvent interface represents a periodic sync action that is dispatched on the ServiceWorkerGlobalScope of a ServiceWorker. 

PeriodicSyncManager
Provides an interface for registering and retrieving PeriodicSyncRegistration objects.
PeriodicSyncRegistration
Provides an object for managing periodic background synchronization. 
ServiceWorker
Represents a service worker. Multiple browsing contexts (e.g. pages, workers, etc.) can be associated with the same ServiceWorker object.
ServiceWorkerContainer
Provides an object representing the service worker as an overall unit in the network ecosystem, including facilities to register, unregister and update service workers, and access the state of service workers and their registrations.
ServiceWorkerGlobalScope
Represents the global execution context of a service worker.
ServiceWorkerMessageEvent
Contains information about an event sent to a navigator.serviceWorker target. 
ServiceWorkerRegistration
Represents a service worker registration.
SyncEvent

The parameter passed into the sync handler, the SyncEvent interface represents a sync action that is dispatched on the ServiceWorkerGlobalScope of a ServiceWorker. 

SyncManager
Provides an interface for registering and retrieving SyncRegistration objects.
SyncRegistration
Provides an object for managing background synchronization. 
WindowClient
Represents the scope of a service worker client that is a document in a browser context, controlled by an active worker. This is a special type of Client object, with some additional methods and properties available.

规范

Specification Status Comment
Service Workers Working Draft Initial definition.

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 40.0 44.0 (44.0)[1] 未实现 24 未实现
install/activate events 40.0 44.0 (44.0)[1] 未实现 (Yes) 未实现
fetch event/request/
respondWith()
40.0 44.0 (44.0)[1] 未实现 未实现 未实现
caches/cache

42.0

39.0 (39.0)[1] 未实现 未实现 未实现
Feature Android Chrome for Android Firefox Mobile (Gecko) Firefox OS IE Phone Opera Mobile Safari Mobile
Basic support   40.0 44.0 (44.0) (Yes) 未实现 (Yes) 未实现
install/activate events 未实现 40.0 44.0 (44.0) (Yes) 未实现 (Yes) 未实现
fetch event/request/
respondWith()
未实现 40.0 44.0 (44.0) (Yes) 未实现 未实现 未实现
caches/cache 未实现 40.0 39.0 (39.0) (Yes) 未实现 未实现 未实现

[1] Service workers (and Push) have been disabled in the Firefox 45 Extended Support Release (ESR.)

也可以看看

  •  

文档标签和贡献者

 最后编辑者: xgqfrms-GitHub,