Service Worker初体验

2019-11-05 06:25栏目:业界快讯
TAG:

Service Worker初体验

2016/01/06 · JavaScript · Service Worker

初藳出处: AlloyTeam   

在2015年,W3C发布了service worker的草案,service worker提供了重重新的工夫,使得web app具有与native app相仿的离线体验、音讯推送体验。
service worker是生机勃勃段脚本,与web worker同样,也是在后台运转。作为一个独门的线程,运营条件与普通脚本不一样,所以不可能直接出席web交互作用行为。native app能够成功离线使用、音信推送、后台自动更新,service worker的面世是还好为了使得web app也能够具有雷同的技术。

 

service worker可以:

  1. 后台新闻传递
  2. 互连网代理,转载倡议,捏造响应
  3. 离线缓存
  4. 音信推送
  5.  … …

正文以能源缓存为例,说美赞臣下service worker是哪些做事的。

生命周期

先来看一下一个service worker的运营周期

图片 1
上海体育场面是service worker生命周期,出处

图中得以见见,一个service worker要经验以下进度:

  1.  安装

2.  激活,激活成功之后,张开chrome://inspect/#service-workers能够查阅到近来运维的service worker

图片 2

  1. 监听fetch和message事件,下边三种事件会举办轻便描述

  2. 销毁,是还是不是销毁由浏览器决定,若是壹个service worker长时间不行使可能机器内部存款和储蓄器有数,则也许会销毁这一个worker

fetch事件

在页面发起http央浼时,service worker能够经过fetch事件拦截诉求,並且付诸本身的响应。
w3c提供了二个新的fetch api,用于替代XMLHttpRequest,与XMLHttpRequest最大不一样有两点:

1. fetch()方法再次回到的是Promise对象,通过then方法开展一而再接二连三调用,裁减嵌套。ES6的Promise在成为标准未来,会愈加方便开辟人士。

2. 提供了Request、Response对象,假诺做过后端开拓,对Request、Response应该比较熟稔。前端要提倡呼吁能够因此url发起,也得以选用Request对象发起,何况Request能够复用。然而Response用在哪个地方吗?在service worker现身从前,前端确实不会融洽给和谐发新闻,但是有了service worker,就能够在阻碍央求之后轶事必要发回自身的响应,对页面来说,那几个普通的伏乞结果并不曾差距,那是Response的风度翩翩处接纳。

下边是在中,作者利用fetch api通过fliker的公然api获取图片的例子,注释中详细分解了每一步的机能:

JavaScript

/* 由于是get恳求,直接把参数作为query string传递了 */ var URL = ''; function fetch德姆o() { // fetch(url, option)扶助五个参数,option中得以安装header、body、method音信fetch(U路虎极光L).then(function(response) { // 通过promise 对象得到对应内容,何况将响应内容依据json格式转成对象,json()方法调用之后回来的仍为promise对象 // 也足以把内容转化成arraybuffer、blob对象 return response.json(); }).then(function(json) { // 渲染页面 insertPhotos(json); }); } fetch德姆o();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* 由于是get请求,直接把参数作为query string传递了 */
var URL = 'https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=your_api_key&format=json&nojsoncallback=1&tags=penguins';
 
function fetchDemo() {
  // fetch(url, option)支持两个参数,option中可以设置header、body、method信息
  fetch(URL).then(function(response) {
    // 通过promise 对象获得相应内容,并且将响应内容按照json格式转成对象,json()方法调用之后返回的依然是promise对象
    // 也可以把内容转化成arraybuffer、blob对象
    return response.json();
  }).then(function(json) {
    // 渲染页面
    insertPhotos(json);
  });
}
 
fetchDemo();

fetch api与XMLHttpRequest相比较,特别简明,而且提供的功力更康健,财富获取形式比ajax更高贵。宽容性方面:chrome 42起来扶植,对于旧浏览器,能够经过法定维护的polyfill协助。

message事件

页面和serviceWorker之间能够经过posetMessage()方法发送新闻,发送的音信能够由此message事件选择到。

那是三个双向的长河,页面能够发音讯给service worker,service worker也能够发送音讯给页面,由于这么些性情,能够将service worker作为中间纽带,使得二个域名还是子域名下的七个页面能够私行通讯。

那边是多个小的页面之间通讯demo

行使service workder缓存文件

下边介绍叁个运用service worker缓存离线文件的事例
粮草先行粮草先行index.js,用于注册service-worker

JavaScript

if (navigator.serviceWorker) { navigator.serviceWorker.register('service-worker.js').then(function(registration) { console.log('service worker 注册成功'); }).catch(function (err) { console.log('servcie worker 注册铩羽') }); }

1
2
3
4
5
6
7
if (navigator.serviceWorker) {
    navigator.serviceWorker.register('service-worker.js').then(function(registration) {
        console.log('service worker 注册成功');
    }).catch(function (err) {
        console.log('servcie worker 注册失败')
    });
}

在上述代码中,注册了service-worker.js作为当下路径下的service worker。由于service worker的权能超高,全体的代码都急需是安全可信的,所以只有https站点才方可采用service worker,当然localhost是八个特例。
注册甘休,以往开始写service-worker.js代码。
听别人讲前边的生命周期图,在二个新的service worker被登记之后,首先会触发install事件,在service-workder.js中,能够经过监听install事件进展一些早先化工作,或然怎么样也不做。
因为我们是要缓存离线文件,所以能够在install事件中初露缓存,不过只是将文件加到caches缓存中,真正想让浏览器接纳缓存文件须求在fetch事件中梗阻

JavaScript

var cacheFiles = [ 'about.js', 'blog.js' ]; self.addEventListener('install', function (evt) { evt.waitUntil( caches.open('my-test-cahce-v1').then(function (cache) { return cache.addAll(cacheFiles); }) ); });

1
2
3
4
5
6
7
8
9
10
11
var cacheFiles = [
    'about.js',
    'blog.js'
];
self.addEventListener('install', function (evt) {
    evt.waitUntil(
        caches.open('my-test-cahce-v1').then(function (cache) {
            return cache.addAll(cacheFiles);
        })
    );
});

率先定义了亟需缓存的文本数组cacheFile,然后在install事件中,缓存这几个文件。
evt是叁个InstallEvent对象,世襲自Extendable伊芙nt,此中的waitUntil()方法采取三个promise对象,直到那几个promise对象成功resolve之后,才会三番两次运营service-worker.js。
caches是多个CacheStorage对象,使用open()方法张开五个缓存,缓存通过名称进行区分。
收获cache实例之后,调用addAll()方法缓存文件。

那般就将文件增加到caches缓存中了,想让浏览器选拔缓存,还索要拦截fetch事件

JavaScript

// 缓存图片 self.addEventListener('fetch', function (evt) { evt.respondWith( caches.match(evt.request).then(function(response) { if (response) { return response; } var request = evt.request.clone(); return fetch(request).then(function (response) { if (!response && response.status !== 200 && !response.headers.get('Content-type').match(/image/)) { return response; } var responseClone = response.clone(); caches.open('my-test-cache-v1').then(function (cache) { cache.put(evt.request, responseClone); }); return response; }); }) ) });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 缓存图片
self.addEventListener('fetch', function (evt) {
    evt.respondWith(
        caches.match(evt.request).then(function(response) {
            if (response) {
                return response;
            }
            var request = evt.request.clone();
            return fetch(request).then(function (response) {
                if (!response && response.status !== 200 && !response.headers.get('Content-type').match(/image/)) {
                    return response;
                }
                var responseClone = response.clone();
                caches.open('my-test-cache-v1').then(function (cache) {
                    cache.put(evt.request, responseClone);
                });
                return response;
            });
        })
    )
});

因此监听fetch事件,service worker能够回到本身的响应。

首先检缓存中是还是不是已经缓存了那么些伏乞,假若有,就直接重返响应,就裁减了一遍互联网诉求。不然由service workder发起央求,这个时候的service workder起到了多当中级代理的效率。

service worker央求的进度通过fetch api完毕,获得response对象现在举行过滤,查看是不是是图片文件,要是还是不是,就一向重临央浼,不会缓存。

假定是图片,要先复制意气风发份response,原因是request或许response对象归属stream,只能使用叁次,之后豆蔻梢头份存入缓存,另生机勃勃份发送给页面。
那正是service worker的有力之处:拦截央求,伪造响应。fetch api在此边也起到了相当的大的功效。

 

service worker的更新相当粗略,只要service-worker.js的文书内容有立异,就能够采取新的脚本。但是有有些要留意:旧缓存文件的清除、新文件的缓存要在activate事件中实行,因为恐怕旧的页面还在运用早先的缓存文件,解除之后会失掉功能。

 

在初次使用service worker的进度中,也遇上了有个别主题材料,上边是内部八个

主题素材1. 运营时刻

service worker并非向来在后台运维的。在页面关闭后,浏览器可以持续保险service worker运行,也能够关闭service worker,那取决与浏览器本身的一言一动。所以并非定义一些全局变量,举例上边包车型地铁代码(来自):

JavaScript

var hitCounter = 0; this.addEventListener('fetch', function(event) { hitCounter++; event.respondWith( new Response('Hit number ' + hitCounter) ); });

1
2
3
4
5
6
7
8
var hitCounter = 0;
 
this.addEventListener('fetch', function(event) {
  hitCounter++;
  event.respondWith(
    new Response('Hit number ' + hitCounter)
  );
});

归来的结果只怕是不曾规律的:1,2,1,2,1,1,2….,原因是hitCounter并从未直接存在,假诺浏览器关闭了它,后一次开发银行的时候hitCounter就赋值为0了
那般的事情引致调节和测量检验代码困难,当你更新贰个service worker未来,独有在开荒新页面以往才大概应用新的service worker,在调治进度中平日等上生龙活虎两秒钟才会动用新的,相比抓狂。

主题素材2. 权力太大

当service worker监听fetch事件之后,对应的伏乞都会透过service worker。通过chrome的network工具,能够见到此类央浼会标注:from service worker。假诺service worker中冒出了难点,会以致全部供给失利,包含普通的html文件。所以service worker的代码质量、容错性一定要很好才干确认保障web app符合规律运转。

 

参照小说:

1. 

2. 

3. 

4. 

5. 

1 赞 3 收藏 评论

图片 3

版权声明:本文由493333王中王开奖结果发布于业界快讯,转载请注明出处:Service Worker初体验