从入门到进阶

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提出此前,别的3个提供开发者离线体验的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。
  • 瑟维斯worker大批量使用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之后,浏览器会在后台默默运转3个service worker的安装进程。

在安装进程中,浏览器会加载并缓存一些静态财富。假如具有的公文被缓存成功,service
worker就设置成功了。如若有别的文件加载或缓存退步,那么安装进度就会破产,service
worker就不能够被激活(也即没能安装成功)。假设发生那样的题材,别担心,它会在下次再品尝安装。

当安装到位后,service
worker的下一步是激活,在这一品级,你仍是能够升官3个service
worker的本子,具体内容大家会在后头讲到。

在激活之后,service
worker将接管全数在融洽管辖域范围内的页面,不过一旦3个页面是刚刚注册了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的辨证

瑟维斯 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获得1个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
实行注册,第3遍注册前会开始展览剖析,判断加载的文本是不是在域名下,协议是或不是为
HTTPS 的,通过那两点则成功注册。
service Worker 开头进入下3个生命周期状态 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() 方法接收1个 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,

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图