MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

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

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
传递给ServiceWorkerGlobalScope.onfetch处理函数的参数,FetchEvent代表一个在ServiceWorkerServiceWorkerGlobalScope中分发的请求动作。它包含关于请求和响应的结果信息,并且提供FetchEvent.respondWith()方法,这个方法允许我们提供任意的响应返回到控制页面。
InstallEvent
传递给oninstall处理函数的参数,InstallEvent接口代表一个在ServiceWorkerServiceWorkerGlobalScope中分发的安装动作,作为ExtendableEvent的子事件,它保证诸如FetchEvent 的功能性事件在安装过程中不会被分发。
Navigator.serviceWorker
返回一个ServiceWorkerContainer对象,可以提供入口用于注册,删除,更新以及与在相关 documentServiceWorker通信的对象。
NotificationEvent
传递给onnotificationclick处理函数的参数,NotificationEvent 接口代表在ServiceWorkerServiceWorkerGlobalScope中分发的单击事件通知。
PeriodicSyncEvent
传递给同步处理函数的参数,SyncEvent接口描述一个在ServiceWorker里ServiceWorkerGlobalScope分发的周期性的同步动作。
PeriodicSyncManager
提供一个用于注册以及获取PeriodicSyncRegistration对象的接口。
PeriodicSyncRegistration
提供一个用于管理周期性后台同步的对象。
ServiceWorker
表示一个service worker。多个浏览的上下文(例如pages,workers等等)都能通过相同的ServiceWorker对象相关联。
ServiceWorkerContainer
提供一个在网络生态中把service worker 作为一个整体的对象,包括辅助注册,反注册以及更新服务工作者,并且访问service worker 的状态以及他们的注册信息。
ServiceWorkerGlobalScope
表示service worker的全局执行上下文。
ServiceWorkerMessageEvent
包含关于一个发送给以navigator.serviceWorker为目标的事件信息。
ServiceWorkerRegistration
表示service worker的注册。
SyncEvent
传递给同步函数的参数,SyncEvent接口代表在ServiceWorker里ServiceWorkerGlobalScope分发的同步动作。
SyncManager
提供一个接口用于注册和返回SyncRegistration对象。
SyncRegistration
提供用于管理后台同步的对象。
WindowClient
表示在浏览器上下文中记录的service worker客户端的作用域,被活动的工作者控制。是Client对象的特殊类型,包含一些附加的方法和可用的属性。

规范

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.)

也可以看看

  •  

文档标签和贡献者

 最后编辑者: yellowkingdom,