Service Worker初体验

2019-11-29 23:31栏目:龙电竞官网
TAG:

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

本文以财富缓存为例,说惠氏(WYETH卡塔尔(Dumex卡塔尔(قطر‎下service worker是怎么着行事的。

连不上网?United Kingdom卫报的秉性离线页面是如此做的

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

本文由 伯乐在线 - Erucy 翻译,weavewillg 校稿。未经许可,禁绝转发!
罗马尼亚语出处:Oliver Ash。迎接参与翻译组。

我们是哪些利用 service worker 来为 theguardian.com 营造二个自定义的离线页面。

图片 1

theguardian.com 的离线页面。插图:奥利弗 Ash

您正在朝着集团途中的客车里,在大哥伦比亚大学上展开了 Guardian 应用。地铁被隧道包围着,可是这么些应用能够正常运行,纵然未有互连网连接,你也能获得完全的功用,除了突显的源委恐怕有一点点旧。假设您品尝在网址上也那样干,可惜它完全没有办法加载:

图片 2

安卓版 Chrome 的离线页面

Chrome 中的这几个彩蛋,很四个人都不知晓》

Chrome 在离线页面上有个藏匿的嬉戏(桌面版上按空格键,手提式有线电话机版上点击那只恐龙),那有个别能减轻一点您的沉闷。不过大家能够做得更加好。

Service workers 允许网址笔者拦截本人站点的全数互连网供给,这也就代表大家得以提供周详的离线体验,就像是原生应用雷同。在 Guardian 网址,大家方今上线了二个自定义的离线体验效果。当客商离线的时候,他们寻访到叁个蕴涵Guardian 标志的页面,上边带有多少个大约的离线提醒,还或者有一个填字游戏,他们能够在伺机互连网连接的时候玩玩这么些找点乐子。这篇博客解释了大家是哪些创设它的,可是在起来从前,你能够先本人尝试看。

Service Worker入门

2015/03/26 · JavaScript · Service Worker

原稿出处: Matt Gaunt   译文出处:[w3ctech

  • 十年踪迹]()   

原生App具有Web应用普通所不具有的富离线体验,定期的守口如瓶更新,音信通知推送等成效。而新的Serviceworkers标准让在Web App上全数那个职能成为大概。

生命周期

先来看一下三个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 部分提供离线体验。就现阶段的话,大家选用了 开采者博客 作为大家用来测量检验的地点。所以即便您是在我们网址的 开辟者博客 部分阅读那篇随笔的话,很幸运。

当你利用援救的浏览器访谈大家的 开拓者博客 中的页面包车型地铁时候,一切就计划安妥了。断开你的网络连接,然后刷新一下页面。假诺您协和没标准尝试的话,能够看一下这段 示范摄像(译者注:需梯子)。

Service Worker 是什么?

一个 service worker 是风流浪漫段运营在浏览器后台进度里的台本,它独立于近期页面,提供了那几个无需与web页面人机联作的作用在网页背后悄悄实行的力量。在未来,基于它能够实现音讯推送,静默更新以致地理围栏等服务,但是近来它首先要持有的成效是掣肘和管理互连网伏乞,包罗可编程的响应缓存管理。

何以说那么些API是一个要命棒的API呢?因为它使得开垦者能够协理特别好的离线体验,它付与开采者完全调节离线数据的技术。

在service worker建议从前,其它多少个提供开拓者离线体验的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。
  • Serviceworker大量使用promise,所以假若你不了然什么是promise,那您需求先读书这篇文章。

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(卡塔尔(英语:State of Qatar) { // fetch(url, option卡塔尔国支持四个参数,option中能够安装header、body、method消息fetch(U中华VL卡塔尔.then(function(response卡塔尔 { // 通过promise 对象得到相应内容,并且将响应内容遵照json格式转成对象,json(卡塔尔方法调用之后回来的仍然是promise对象 // 也足以把内容转产生arraybuffer、blob对象 return response.json(卡塔尔(قطر‎; }卡塔尔.then(function(json卡塔尔(قطر‎ { // 渲染页面 insertPhotos(json卡塔尔国; }卡塔尔(英语:State of Qatar); } 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 能够监听和垄断(monopoly卡塔尔(英语:State of Qatar) 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 很感兴趣,想要领悟更加多内容的话,开辟者 MattGaunt(Chrome的忠厚帮忙者)写了生龙活虎篇特别详实地 介绍 Service Worker的文章。

打赏匡助笔者翻译更多好小说,多谢!

打赏译者

Service Worker的生命周期

Service worker具有四个截然独立于Web页面包车型大巴生命周期。

要让二个service worker在你的网址上生效,你须求先在您的网页中登记它。注册多个service worker之后,浏览器会在后台默默运营叁个service worker的安装进度。

在安装进度中,浏览器会加载并缓存一些静态财富。假如持有的公文被缓存成功,service worker就安装成功了。假设有别的文件加载或缓存败北,那么安装进程就能倒闭,service worker就不能被激活(也即未能安装成功)。假使发生那样的主题素材,别顾虑,它会在下一次再品尝安装。

当安装到位后,service worker的下一步是激活,在此生机勃勃等第,你还足以荣升一个service worker的本子,具体内容大家会在前边讲到。

在激活之后,service worker将接管全部在本人管辖域范围内的页面,然则借使一个页面是刚刚注册了service worker,那么它那一次不会被接管,到下一遍加载页面包车型地铁时候,service worker才会生效。

当service worker接管了页面之后,它大概有三种情状:要么被终止以节约内部存款和储蓄器,要么会管理fetch和message事件,这五个事件分别发出于二个网络伏乞现身依旧页面上发送了多少个信息。

下图是一个简化了的service worker初次安装的生命周期:

图片 5

message事件

页面和serviceWorker之间能够经过posetMessage(卡塔尔(قطر‎方法发送信息,发送的音讯能够因而message事件选拔到。

那是一个双向的进度,页面能够发新闻给service worker,service worker也足以发送新闻给页面,由于那些天性,能够将service worker作为中间纽带,使得二个域名照旧子域名下的三个页面能够随便通讯。

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

打赏扶植本人翻译越多好小说,多谢!

图片 6

1 赞 收藏 评论

在我们最早写码在此以前

从这个品种地址拿到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获得一个TLS证书。不一致的server安装方法差异,阅读帮助文书档案并通过Mozilla’s SSL config generator询问最好实行。

运用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 注册成功'卡塔尔(英语:State of Qatar); }卡塔尔(英语:State of Qatar).catch(function (err卡塔尔(قطر‎ { console.log('servcie worker 注册失利'卡塔尔国 }卡塔尔(英语:State of Qatar); }

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(卡塔尔(英语:State of Qatar)方法打开三个缓存,缓存通过名称举行区分。
赢得cache实例之后,调用addAll(卡塔尔(قطر‎方法缓存文件。

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

JavaScript

// 缓存图片 self.addEventListener('fetch', function (evt卡塔尔 { evt.respondWith( caches.match(evt.request卡塔尔(قطر‎.then(function(response卡塔尔 { if (response卡塔尔(英语:State of Qatar) { return response; } var request = evt.request.clone(卡塔尔国; return fetch(request卡塔尔(英语:State of Qatar).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

图片 7

已经的SharePoint喵星程序员(一时还挂着微软MVP的名头),现在的Azure/.Net/MongoDB/Cordova/前端程序员,不经常写小说 个人主页 · 小编的篇章 · 46 ·   

图片 8

使用Service Worker

这几天咱们有了polyfill,何况解决了HTTPS,让大家看看究竟怎么用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,在调节和测量试验进程中平时等上意气风发两秒钟才会接受新的,比较抓狂。

何以注册和设置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是否对你的网站启用了。

图片 9

当service worker第大器晚成版被完成的时候,你也足以在chrome://serviceworker-internals中查看,它很有用,通过它可以最直观地熟悉service worker的生命周期,不过这个功能很快就会被移到chrome://inspect/#service-workers中。

你会开掘这么些成效能够很有益于地在一个效仿窗口中测验你的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 收藏 评论

图片 10

Service Worker的安装步骤

在页面上到位注册手续之后,让大家把集中力转到service worker的本子里来,当中,大家要做到它的安装步骤。

在最中央的事例中,你要求为install事件定义二个callback,并垄断哪些文件你想要缓存。

JavaScript

// The files we want to cache var urlsToCache = [ '/', '/styles/main.css', '/script/main.js' ]; // Set the callback for the install step self.addEventListener('install', function(event) { // Perform install steps });

1
2
3
4
5
6
7
8
9
10
11
// The files we want to cache
var urlsToCache = [
  '/',
  '/styles/main.css',
  '/script/main.js'
];
 
// Set the callback for the install step
self.addEventListener('install', function(event) {
    // Perform install steps
});

在大家的install callback中,大家供给实践以下步骤:

  1. 展开一个缓存
  2. 缓存大家的文书
  3. 操纵是不是具备的能源是不是要被缓存

JavaScript

var CACHE_NAME = 'my-site-cache-v1'; var urlsToCache = [ '/', '/styles/main.css', '/script/main.js' ]; self.addEventListener('install', function(event) { // Perform install steps event.waitUntil( caches.open(CACHE_NAME) .then(function(cache) { console.log('Opened cache'); return cache.addAll(urlsToCache); }) ); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var CACHE_NAME = 'my-site-cache-v1';
var urlsToCache = [
  '/',
  '/styles/main.css',
  '/script/main.js'
];
 
self.addEventListener('install', function(event) {
  // Perform install steps
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

地方的代码中,大家经过caches.open张开我们钦命的cache文件名,然后我们调用cache.addAll并传播大家的公文数组。那是因此多元promise(caches.open 和 cache.addAll)完毕的。event.waitUntil获得三个promise并应用它来得到安装开销的时刻以致是不是安装成功。

假定全部的文本都被缓存成功了,那么service worker就设置成功了。假使其余一个文本下载战败,那么安装步骤就能够战败。那些措施允许你依附于您本身钦定的全体能源,然而那象征你必要十二分交事务缓则圆地决定哪些文件须要在装置步骤中被缓存。钦定了太多的文书的话,就能够增添设置战败率。

地点只是贰个简约的事例,你能够在install事件中实施其余操作照旧以致忽略install事件。

版权声明:本文由龙竞技官网发布于龙电竞官网,转载请注明出处:Service Worker初体验