快乐十分钟开奖走势图-广东十分快乐开奖结果-广东快乐十分开奖查询

热门关键词: 快乐十分钟开奖走势图,广东十分快乐开奖结果,广东快乐十分开奖查询
您的位置:快乐十分钟开奖走势图 > 广东十分快乐开奖结果-web前端 > service worker是后生可畏段脚本

service worker是后生可畏段脚本

2019-11-07 00:59

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

本文以财富缓存为例,说美素佳儿(Friso卡塔尔下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宝马X3L).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

本文由快乐十分钟开奖走势图发布于广东十分快乐开奖结果-web前端,转载请注明出处:service worker是后生可畏段脚本

关键词: