从入门到进阶

Service Worker入门

2015/03/26 · JavaScript
· Service Worker

原稿出处: Matt
Gaunt   译文出处:[w3ctech

  • 十年踪迹]()   

原生App拥有Web应用一般所不富有的富离线体验,定时的沉默更新,音讯通告推送等功效。而新的Serviceworkers标准让在Web App上保有这几个功效成为或然。

从入门到进阶。image

原文

简书放不了demo,demo可以看原文

Service Worker 是什么?

一个 service worker
是一段运行在浏览器后台进度里的脚本,它独自于近日页面,提供了那一个不要求与web页面交互的功力在网页背后悄悄执行的能力。在将来,基于它可以兑现音信推送,静默更新以及地理围栏等劳务,可是近期它首先要具有的效应是掣肘和处理网络请求,包涵可编程的响应缓存管理。

为啥说那一个API是一个可怜棒的API呢?因为它使得开发者可以支撑尤其好的离线体验,它赋予开发者完全控制离线数据的力量。

在service worker指出在此以前,别的一个提供开发者离线体验的API叫做App
Cache。但是App
Cache有些局限性,例如它可以很不难地解决单页应用的题材,不过在多页应用上会很劳顿,而Serviceworkers的产出正是为了缓解App Cache的痛点。

上边详细说一下service worker有何样需求专注的地点:

  • 它是JavaScript
    Worker,所以它无法一向操作DOM。可是service
    worker可以透过postMessage与页面之间通讯,把消息公告给页面,若是须求的话,让页面自身去操作DOM。
  • Serviceworker是一个可编程的互连网代理,允许开发者控制页面上处理的网络请求。
  • 在不被应用的时候,它会融洽终止,而当它再度被用到的时候,会被另行激活,所以您不可以凭借于service
    worker的onfecth和onmessage的处理函数中的全局状态。若是你想要保存一些持久化的新闻,你可以在service
    worker里使用IndexedDB API。
  • Serviceworker多量使用promise,所以尽管您不通晓什么是promise,那您需求先读书这篇文章。

越发简的介

二零一八年始于火遍南北的 PWA 技术诞生意况有负重望,主要来自 safrai
对于这一技术辅助不甚美好,不接济 mainfest 文件也不辅助
service Worker

service worker 是一个奇特的 web Worker,由此他与页面通讯和 worker
是同样的,同样不可以访问 DOM。特殊在于她是由事件驱动的享有生命周期的
worker,并且可以阻挡处理页面的网络请求(fetch),可以访问 cache
IndexDB

换言之 service Worker
可以让开发者本人决定管理缓存的始末以及版本,为离线弱网环境下的 web
的周转提供了或许,让 web 在心得上更是靠近 native。

早期准备

一般来说的基础知识:

  • Angular service
    workers介绍.

从5angular.0.0发端,在任意cli项目中,你可以很不难的开启Angular service
worker。这文档是介绍怎么去在新的或旧的连串中启用Angular service
worker。会透过一个简练的例子是显得service worker的一颦一笑与基本缓存。

Service Worker 是什么?

service worker 是单独于近日页面的一段运行在浏览器后台进度里的本子。
service worker不需要用户打开 web
页面,也不需要其余交互,异步地运作在一个通通独立的上下文环境,不会对主线程造成堵塞。基于service
worker可以兑现音信推送,静默更新以及地理围栏等服务。
service
worker提供一种渐进增强的特色,使用特性检测来逐步增强,不会在老旧的不扶助service workers 的浏览器中爆发震慑。可以经过service
workers化解让应用程序能够离线工作,让存储数据在离线时行使的题目。

注意事项:
1.service
worker运作在它们本人的一心独立异步的大局上下文中,约等于说它们有温馨的器皿。
2.service
worker从未向来操作DOM的权位,可是可以通过postMessage方法来与Web页面通讯,让页面操作DOM。
3.service
worker是一个可编程的网络代理,允许开发者控制页面上拍卖的网络请求。
4.浏览器只怕每日回收service
worker,在不被使用的时候,它会协调终止,而当它再也被用到的时候,会被重新激活。
5.service worker的生命周期是由事件驱动的而不是通过Client。

Service Worker的生命周期

Service worker拥有一个通通独立于Web页面的生命周期。

要让一个service
worker在您的网站上生效,你必要先在你的网页中登记它。注册一个service
worker之后,浏览器会在后台默默启动一个service worker的装置进度。

在安装进度中,浏览器会加载并缓存一些静态资源。如若拥有的文件被缓存成功,service
worker就安装成功了。假如有其余公文加载或缓存退步,那么安装进程就会失利,service
worker就无法被激活(也即没能安装成功)。如果发生那样的题材,别担心,它会在下次再尝试安装。

当安装到位后,service
worker的下一步是激活,在这一等级,你还足以荣升一个service
worker的本子,具体内容我们会在背后讲到。

在激活之后,service
worker将接管所有在融洽管辖域范围内的页面,不过一旦一个页面是刚刚注册了service
worker,那么它那五回不会被接管,到下五次加载页面的时候,service
worker才会生效。

当service
worker接管了页面之后,它或然有二种意况:要么被截至以节本省存,要么会处理fetch和message事件,那八个事件分别发生于一个互联网请求出现照旧页面上发送了一个音讯。

下图是一个简化了的service worker初次安装的生命周期:

图片 1

匹配情形

safrai 已经于 2017年8月 开始了 service Worker 的开发。

image

当前浏览器PC协助情形如图

境内重点浏览器支持意况

android 设备在 4.4 版本拔取 Chromium 作为基础,Chromium 在 40
对于 service worker 援救。国内浏览器蕴含微信浏览器在内基本已经支撑
service Worker 那为提高体验提供了说不定。service workerHTTP2
越发配哦,在前几日基于它可以落成信息推送,静默更新以及地理围栏等服务。

在新类型中添加service worker

万一您要生成一个新的cli项目,你可以使用cli去配置Angular service worker:

ng new my-project --service-worker

--service-worker命令会去做有所的配置并加上需求正视的包。想询问越来越多,可查看下边的有关怎么着在旧项目添加service
worker的求证

Service Worker生命周期

service worker拥有一个截然独立于Web页面的生命周期

图片 2

sw-lifecycle.png

  1. 挂号service worker,在网页上生效
  2. 设置成功,激活 或然 安装战败(下次加载会尝试重新安装)
  3. 激活后,在sw的效果域下功能有所的页面,首次决定sw不会生效,下次加载页面才会生效。
  4. sw效能页面后,处理fetch(互联网请求)和message(页面音讯)事件 或许被截止(节外省存)。

在大家起首写码从前

从这个类型地址拿到chaches
polyfill。

这个polyfill支持CacheStorate.match,Cache.add和Cache.addAll,而现在Chrome
M40实现的Cache
API还从未辅助那么些措施。

将dist/serviceworker-cache-polyfill.js放到你的网站中,在service
worker中经过importScripts加载进来。被service
worker加载的本子文件会被活动缓存。

JavaScript

importScripts(‘serviceworker-cache-polyfill.js’);

1
importScripts(‘serviceworker-cache-polyfill.js’);

需要HTTPS

在开发阶段,你能够透过localhost使用service
worker,不过一旦上线,就需求你的server辅助HTTPS。

你可以经过service
worker恫吓连接,伪造和过滤响应,非常逆天。即便你能够约束自个儿不干坏事,也会有人想干坏事。所以为了防患旁人使坏,你只好在HTTPS的网页上登记service
workers,那样大家才得以防止加载service
worker的时候不被坏人篡改。(因为service
worker权限很大,所以要防患于未然它自身被歹徒篡改利用——译者注)

Github
Pages赶巧是HTTPS的,所以它是一个特出的天赋实验田。

只要你想要让您的server帮助HTTPS,你须要为您的server拿到一个TLS证书。不一致的server安装方法不一致,阅读帮助文档并经过Mozilla’s
SSL config
generator询问最佳实践。

刺探前的刺探

webWorker
fetch
cache
promise

在旧项目中添加service worker

添加步骤:

  1. 添加service worker的包依赖。
  2. 在cli配置中启用service worker。
  3. 导入和挂号service worker。
  4. 新建配置文件,定义缓存的一坐一起和其他设定。
  5. 编译项目。

Service Worker支持选取

使用Service Worker

当今咱们有了polyfill,并且消除了HTTPS,让大家看看到底怎么用service
worker。

生命周期

image

Service Workermain.js
举办登记,首次注册前会展开解析,判断加载的文件是还是不是在域名下,协议是不是为
HTTPS 的,通过那两点则成功注册。
service Worker 开始进入下一个生命周期状态 installinstall
完结后会触发 service Workerinstall 事件。 如果 install
成功则接下去是 activate情状, 然后那几个 service worker
才能接管页面。当事件 active 事件执行到位未来,此时 service Worker
有三种意况,一种是 active,一种是 terminatedactive
是为了工作,terminated则为了节省里存。当新的 service Worker 处于
install/waitting 阶段,当前 service Worker 处于
terminated,就会生出交接替换。大概可以因而调用 self.skipWaiting()
方法跳过等待。
被替换掉的原本的 service WorkerRedundant 阶段,在 install 或者
activating 中断的也会进入 Redundant 阶段。所以一个 Service Worker
脚本的生命周期有这般有些等级(从左往右):

[图形上传退步…(image-af3cfa-1511157771617)]

步骤1:添加service worker的包依赖。使用yarn包管理工具:

yarn add @angular/service-worker

浏览器接济

service worker
support

图片 3

navigator-serviceworker.png

如何注册和设置service worker

要设置service
worker,你需求在你的页面上登记它。这些手续告诉浏览器你的service
worker脚本在哪个地方。

JavaScript

if (‘serviceWorker’ in navigator) {
navigator.serviceWorker.register(‘/sw.js’).then(function(registration) {
// Registration was successful console.log(‘ServiceWorker registration
successful with scope: ‘, registration.scope); }).catch(function(err) {
// registration failed 🙁 console.log(‘ServiceWorker registration
failed: ‘, err); }); }

1
2
3
4
5
6
7
8
9
if (‘serviceWorker’ in navigator) {
  navigator.serviceWorker.register(‘/sw.js’).then(function(registration) {
    // Registration was successful
    console.log(‘ServiceWorker registration successful with scope: ‘,    registration.scope);
  }).catch(function(err) {
    // registration failed 🙁
    console.log(‘ServiceWorker registration failed: ‘, err);
  });
}

上面的代码检查service worker API是或不是可用,倘使可用,service
worker /sw.js 被注册。

只要那么些service worker已经被登记过,浏览器会自动忽略上边的代码。

有一个内需专门表达的是service
worker文件的门路,你势必注意到了在那个事例中,service
worker文件被放在那一个域的根目录下,那意味service
worker和网站同源。换句话说,这几个service
work将会接到那么些域下的具有fetch事件。若是笔者将service
worker文件注册为/example/sw.js,那么,service worker只能收到/example/路径下的fetch事件(例如: /example/page1/, /example/page2/)。

未来你可以到 chrome://inspect/#service-workers 检查service worker是否对你的网站启用了。

图片 4

当service
worker第一版被完毕的时候,你也可以在chrome://serviceworker-internals中查看,它很有用,通过它可以最直观地熟悉service worker的生命周期,不过这个功能很快就会被移到chrome://inspect/#service-workers中。

您会发现那一个功能可以很便利地在一个模拟窗口中测试你的service
worker,那样您可以关闭和再一次打开它,而不会影响到您的新窗口。任何创立在模拟窗口中的注册服务和缓存在窗口被关闭时都将一去不复返。

Install

install 存在中游态 installing 那个情景在 main.js
registration登记对象中可以访问到。

/* In main.js */
// 重写 service worker 作用域到 ./
navigator.serviceWorker.register('./sw.js', {scope: './'}).then(function(registration) {  
    if (registration.installing) {
        // Service Worker is Installing
    }
})

安装时 service Workerinstall
事件被触发,这一般用来拍卖静态资源的缓存

service worker 缓存的静态资源

chrome PWA 演示实例

/* In sw.js */
self.addEventListener('install', function(event) {  
  event.waitUntil(
  // currentCacheName 对应调试工具中高亮位置,缓存的名称
  // 调用 `cache.open` 方法后才可以缓存文件
    caches.open(currentCacheName).then(function(cache) {
    // arrayOfFilesToCache 为存放缓存文件的数组
      return cache.addAll(arrayOfFilesToCache);
    })
  );
});

event.waitUntil() 方法接收一个 promise 对象, 如若那一个 promise
对象 rejectedservice Worker 安装战败,状态变更为
Redundant。关于 cache 相关表明看下文。

步骤2:在cli配置中启用service worker:

要开启Angular service worker,cli必须在编译时生成Angular service
worker的安插。要在旧项目中文告cli去做这一步,必须把.angular-cli.json文本里的
serviceWorker的值改成true

ng set apps.0.serviceWorker=true

polyfill

使用ServiceWorker cache
polyfill让旧版本浏览器辅助ServiceWorker cache API,

相关文章