www.qjdy.com-奇迹赌场 > www.qjdy.com > service worker是一段脚本

原标题:service worker是一段脚本

浏览次数:111 时间:2019-10-20

Service Worker初体验

2016/01/06 · JavaScript · Service Worker

原来的文章出处: AlloyTeam   

在二零一六年,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.  … …

正文以财富缓存为例,说Bellamy下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对象,承袭自ExtendableEvent,此中的waitUntil()方法接收一个promise对象,直到这几个promise对象成功resolve之后,才会一而再运营service-worker.js。
caches是一个CacheStorage对象,使用open()方法打开叁个缓存,缓存通过名称进行区分。
赢得cache实例之后,调用addAll()方法缓存文件。

这么就将文件增添到caches缓存中了,想让浏览器采取缓存,还亟需拦截fetch事件

JavaScript

// 缓存图片 self.add伊芙ntListener('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

本文由www.qjdy.com-奇迹赌场发布于www.qjdy.com,转载请注明出处:service worker是一段脚本

关键词: mg平台娱乐城 JavaScript

上一篇:由于静态内容的特性非常适合做缓存来加速页面

下一篇:没有了