澳门新葡8455手机版-澳门新葡8455最新网站

您的位置:澳门新葡8455手机版 > 澳门新葡8455最新网站 > service worker是一段脚本

service worker是一段脚本

2019-10-11 18:10

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

本文以能源缓存为例,说爱他美(Aptamil)下service worker是什么行事的。

连不上网?大不列颠及北爱尔兰联合王国卫报的特性离线页面是那样做的

2015/11/20 · HTML5 · Service Worker, 离线页面

本文由 伯乐在线 - Erucy 翻译,weavewillg 校稿。未经许可,防止转发!
法语出处:Oliver Ash。款待参预翻译组。

咱俩是怎么行使 service worker 来为 theguardian.com 创设一个自定义的离线页面。

图片 1

theguardian.com 的离线页面。插图:Oliver Ash

您正在朝着公司途中的大巴里,在手提式有线电话机上开垦了 Guardian 应用。大巴被隧道包围着,不过那几个应用能够平时运维,就算未有互联网连接,你也能收获完全的机能,除了出示的源委大概有一些旧。如果你品尝在网址上也那样干,缺憾它完全没有办法加载:

图片 2

安卓版 Chrome 的离线页面

Chrome 中的那个彩蛋,非常多人都不知底》

Chrome 在离线页面上有个藏匿的25日游(桌面版上按空格键,手提式有线电电话机版上点击那只恐龙),那有一点能缓慢化解一点您的烦乱。可是我们能够做得更加好。

Service workers 允许网址俺拦截本人站点的具有网络央求,那也就意味着大家得以提供周全的离线体验,就像原生应用同样。在 Guardian 网址,我们近日上线了三个自定义的离线体验效果。当客户离线的时候,他们会看出四个富含Guardian 标记的页面,上面带有二个简易的离线提醒,还会有二个填字游戏,他们能够在等待互连网连接的时候玩玩那几个找点乐子。那篇博客解释了大家是哪些创设它的,可是在开班在此以前,你可以先自身尝试看。

生命周期

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

图片 3
上海教室是service worker生命周期,出处

图中能够见到,一个service worker要经历以下进程:

  1.  安装

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

图片 4

  1. 监听fetch和message事件,上面三种事件会展开简要描述

  2. 销毁,是还是不是销毁由浏览器决定,假若贰个service worker长期不采用照旧机器内部存款和储蓄器有数,则也许会销毁那么些worker

试试看

你必要一个支撑 Service Worker 和 fetch API 的浏览器。停止到本文编写时唯有Chrome(手提式有线电话机版和桌面版)同期帮助这两种 API(译者注:Opera 近期也支撑这两侧),可是 Firefox 相当的慢将要扶持了(在天天更新的版本中早就支撑了),除此而外 Safari 之外的具备浏览器也都在实施。其他,service worker 只可以登记在应用了 HTTPS 的网址上,theguardian.com 已经起来渐渐搬迁到 HTTPS,所以大家不得不在网站的 HTTPS 部分提供离线体验。就现阶段的话,大家挑选了 开荒者博客 作为我们用来测验的地点。所以如若你是在咱们网址的 开拓者博客 部分阅读那篇文章的话,很幸运。

当您使用辅助的浏览器访谈大家的 开荒者博客 中的页面包车型客车时候,一切就希图稳妥了。断开你的网络连接,然后刷新一下页面。假设你和谐没标准尝试的话,能够看一下这段 演示录像(译者注:需梯子)。

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扶持。

工作原理

经过一段简单的 JavaScript,大家得以提醒浏览器在客商访谈页面包车型地铁时候立即登记我们团结的 service worker。近年来支撑 service worker 的浏览器少之又少,所感觉了制止不当,大家要求采用天性检查实验。

JavaScript

if (navigator.serviceWorker) { navigator.serviceWorker.register('/service-worker.js'); }

1
2
3
if (navigator.serviceWorker) {
    navigator.serviceWorker.register('/service-worker.js');
}

Service worker 安装事件的一有的,咱们能够动用 新的缓存 API 来缓存大家网址中的种种内容,比方 HTML、CSS 和 JavaScript:

JavaScript

var staticCacheName = 'static'; var version = 1; function updateCache() { return caches.open(staticCacheName + version) .then(function (cache) { return cache.addAll([ '/offline-page.html', '/assets/css/main.css', '/assets/js/main.js' ]); }); }; self.addEventListener('install', function (event) { event.waitUntil(updateCache()); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var staticCacheName = 'static';
var version = 1;
 
function updateCache() {
    return caches.open(staticCacheName + version)
        .then(function (cache) {
            return cache.addAll([
                '/offline-page.html',
                '/assets/css/main.css',
                '/assets/js/main.js'
            ]);
        });
};
 
self.addEventListener('install', function (event) {
    event.waitUntil(updateCache());
});

当安装完毕后,service worker 能够监听和决定 fetch 事件,让大家得以完全调节之后网址中发生的有所互联网央浼。

JavaScript

self.addEventListener('fetch', function (event) { event.respondWith(fetch(event.request)); });

1
2
3
self.addEventListener('fetch', function (event) {
    event.respondWith(fetch(event.request));
});

在这里边大家有很灵巧的上空能够表明,比方上面这个节骨眼,能够经过代码来生成大家温馨的伸手响应:

JavaScript

self.addEventListener('fetch', function (event) { var response = new Response('<h1>Hello, World!</h1>', { headers: { 'Content-Type': 'text/html' } }); event.respondWith(response); });

1
2
3
4
5
self.addEventListener('fetch', function (event) {
    var response = new Response('&lt;h1&gt;Hello, World!&lt;/h1&gt;',
        { headers: { 'Content-Type': 'text/html' } });
    event.respondWith(response);
});

还会有这一个,如若在缓存中找到了诉求相应的缓存,大家得以直接从缓存中回到它,假若没找到的话,再经过网络获取响应内容:

JavaScript

self.addEventListener('fetch', function (event) { event.respondWith( caches.match(event.request) .then(function (response) { return response || fetch(event.request); }) ); });

1
2
3
4
5
6
7
8
self.addEventListener('fetch', function (event) {
    event.respondWith(
        caches.match(event.request)
            .then(function (response) {
                return response || fetch(event.request);
            })
    );
});

那么大家怎么样选拔那个功效来提供离线体验吧?

首先,在 service worker 安装进度中,大家须求把离线页面要求的 HTML 和财富文件通过 service worker 缓存下来。在缓存中,大家加载了和谐成本的 填字游戏 的 React应用 页面。之后,我们会阻拦全数访谈theguardian.com 互连网伏乞,满含网页、乃至页面中的财富文件。管理那几个必要的逻辑大约如下:

  1. 当我们检验到传播诉求是指向我们的 HTML 页面时,大家连年会想要提供新型的内容,所以大家会尝试把这一个央求通过互连网发送给服务器。
    1. 当大家从服务器拿到了响应,就能够直接重返那么些响应。
    2. 即便网络诉求抛出了那么些(比方因为客户掉线了),大家捕获那一个特别,然后利用缓存的离线 HTML 页面作为响应内容。
  2. 再不,当大家检查测量检验到需要的不是 HTML 的话,大家会从缓存中寻觅响应的乞请内容。
    1. 假如找到了缓存内容,大家能够一贯回到缓存的原委。
    2. 要不,大家会尝试把这些乞求通过网络发送给服务器。

在代码中,大家选择了 新的缓存 API(它是 Service Worker API 的一部分)以至 fetch 作用(用于转移互连网央求),如下所示:

JavaScript

var doesRequestAcceptHtml = function (request) { return request.headers.get('Accept') .split(',') .some(function (type) { return type === 'text/html'; }); }; self.addEventListener('fetch', function (event) { var request = event.request; if (doesRequestAcceptHtml(request)) { // HTML pages fallback to offline page event.respondWith( fetch(request) .catch(function () { return caches.match('/offline-page.html'); }) ); } else { // Default fetch behaviour // Cache first for all other requests event.respondWith( caches.match(request) .then(function (response) { return response || fetch(request); }) ); } });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var doesRequestAcceptHtml = function (request) {
    return request.headers.get('Accept')
        .split(',')
        .some(function (type) { return type === 'text/html'; });
};
 
self.addEventListener('fetch', function (event) {
    var request = event.request;
    if (doesRequestAcceptHtml(request)) {
        // HTML pages fallback to offline page
        event.respondWith(
            fetch(request)
                .catch(function () {
                    return caches.match('/offline-page.html');
                })
        );
    } else {
        // Default fetch behaviour
        // Cache first for all other requests
        event.respondWith(
            caches.match(request)
                .then(function (response) {
                    return response || fetch(request);
                })
        );
    }
});

就只须要那样多!theguardian.com 上的 怀有代码都以在 GitHub 上开源 的,所以你能够去那儿查看大家的 service worker 的完好版本,只怕直接从生产条件上访问 。

大家有雄厚的说辞为那一个新的浏览器本领欢呼喝彩,因为它可以用来令你的网址像后天的原生应用相同,具备完美的离线体验。现在当 theguardian.com 完全迁移到 HTTPS 之后,离线页面的关键性会显著扩张,大家得以提供进一步完美的离线体验。设想一下你在上下班途中网络比较差的时候访问theguardian.com,你寻访到专门为你订制的性子化内容,它们是在您后边访问网址时由浏览器缓存下来的。它在设置进度中也不会爆发别的困难,你所急需的只是访谈那些网址而已,不像原生应用,还亟需客户有三个运用公司的账号技艺安装。Serviceworker 同样能够扶助大家升高网站的加载速度,因为网址的框架能够被保障地缓存下来,就疑似原生应用一样。

万一您对 service worker 很感兴趣,想要了然越多内容的话,开拓者 马特Gaunt(Chrome的忠诚协理者)写了一篇特别详细地 介绍 Service Worker的文章。

打赏协理小编翻译越多好文章,多谢!

打赏译者

message事件

页面和serviceWorker之间能够因而posetMessage()方法发送音信,发送的新闻能够通过message事件接收到。

那是二个双向的进程,页面能够发音讯给service worker,service worker也能够发送音讯给页面,由于那个特点,能够将service worker作为中间纽带,使得一个域名仍旧子域名下的七个页面能够狂妄通讯。

此地是一个小的页面之间通讯demo

打赏扶植自个儿翻译更加多好小说,多谢!

图片 5

1 赞 收藏 评论

应用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是三个Install伊夫nt对象,承袭自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的经过中,也遭逢了一部分题目,上边是在那之中三个

有关作者:Erucy

图片 6

一度的SharePoint喵星技术员(权且还挂着微软MVP的名头),未来的Azure/.Net/MongoDB/Cordova/前端技术员,不常写小说 个人主页 · 作者的小说 · 46 ·   

图片 7

难题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 收藏 评论

图片 8

本文由澳门新葡8455手机版发布于澳门新葡8455最新网站,转载请注明出处:service worker是一段脚本

关键词: