worker实现加速,连不上网

使用 Service worker 创设三个超级轻易的离线页面

2016/06/07 · JavaScript
· 1 评论 · Service
Worker

本文由 伯乐在线 –
刘健超-J.c
翻译,艾凌风
校稿。未经许可,幸免转载!
斯拉维尼亚语出处:Dean
Hume。款待插手翻译组。

让大家想像以下场景:我们那儿在生龙活虎辆通往村庄的高铁上,用移动设备看着生机勃勃篇很棒的稿子。与此同期,当您点击“查看越来越多”的链接时,高铁蓦然步向了隧道,以致运动器械失去了互连网,而
web 页面会展现出相似以下的从头到尾的经过:

图片 1

那是大器晚成对豆蔻梢头令人寒心的资历!幸运的是,web
开垦者们能由此有个别新特征来修正这类的客户体验。小编多年来一向在折腾 ServiceWorkers,它给 web 带给的成千上万或者性总能给自身欣喜。Service Workers
的完美国特务工作职员人士质之一是同意你检验互连网央浼的光景,并令你作出相应的响应。

在这里篇文章里,作者思谋用此天性检查顾客的一时一刻网络连接意况,假如没连接则赶回三个至上轻便的离线页面。固然那是二个非常功底的案例,但它能给你端来启示,让您明白运转并运营该性子是多么的简便!假诺你没掌握过
Service Worker,作者提出您看看此 Github
repo,精晓越多相关的音讯。

在本案例起头前,让大家先轻便地探问它的做事流程:

  1. 在客户首次访谈我们的页面时,咱们会安装 ServiceWorker,并向浏览器的缓存加多大家的离线 HTML 页面
  2. 接下来,如若客户希图导航到另叁个 web
    页面(同二个网址下卡塔尔,但这时候已断网,那么大家将回到已被缓存的离线
    HTML 页面
  3. 但是,如若客户希图导航到别的多个 web
    页面,而此刻网络已三番三次,则能照常浏览页面

接纳Service worker达成加速/离线访谈静态blog网址

2017/02/19 · JavaScript
· Service Worker

最早的小说出处: Yang
Bo   

现在很盛行基于Github
page和markdown的静态blog,特别符合本事的思辨和习于旧贯,针对分裂的言语都有局地优良的静态blog系统现身,如Jekyll/Ruby,Pelican/Python,Hexo/NodeJs,由于静态内容的表征特别相符做缓存来增加速度页面包车型地铁探访,就利用Service
worker
来贯彻加快,结果是除了PageSpeed,CDN那么些周围的服务器和网络加速之外,通过顾客端达成了越来越好的拜会体验。

连不上网?大不列颠及英格兰联合王国卫报的脾性离线页面是这么做的

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

本文由 伯乐在线 –
Erucy
翻译,weavewillg
校稿。未经许可,制止转发!
罗马尼亚(România卡塔 尔(英语:State of Qatar)语出处:Oliver
Ash。招待参与翻译组。

大家是怎么运用 service worker 来为 theguardian.com
营造多个自定义的离线页面。

图片 2

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

您正在朝着集团途中的客车里,在手提式有线电电话机上开垦了
Guardian
应用。客车被隧道包围着,不过这几个动用能够平常运维,即便未有网络连接,你也能拿到完全的功能,除了出示的剧情也有一点旧。倘令你尝试在网址上也那样干,遗憾它完全没有办法加载:

图片 3

安卓版 Chrome 的离线页面

Chrome 中的那些彩蛋,超级多人都不知情》

Chrome
在离线页面上有个暗藏的三十一日游(桌面版上按空格键,手提式有线电电话机版上点击那只恐龙卡塔尔,那某些能减轻一点你的烦乱。但是大家得以做得更加好。

Service
workers
允许网址我拦截自身站点的保有互联网伏乞,那也就代表大家能够提供康健的离线体验,就像原生应用相近。在
Guardian
网址,大家近些日子上线了三个自定义的离线体验效果。当顾客离线的时候,他们会看到一个分包
Guardian
标记的页面,上边带有一个简洁明了的离线提醒,还应该有二个填字游戏,他们得以在等待互连网连接的时候玩玩那个找点乐子。那篇博客解释了笔者们是怎样构建它的,然则在开首早前,你能够先自个儿搜求看。

让我们最初吧

倘令你有以下 HTML 页面。那固然十二分底蕴,但能给你完整思路。

XHTML

<!DOCTYPE html>

1
<!DOCTYPE html>

继之,让我们在页面里登记 Service Worker,这里仅创设了该目的。向正要的
HTML 里增多以下代码。

JavaScript

<script> // Register the service worker // 注册 service worker if
(‘serviceWorker’ in navigator) {
navigator.serviceWorker.register(‘/service-worker.js’).then(function(registration)
{ // Registration was successful // 注册成功 console.log(‘ServiceWorker
registration successful with scope: ‘, registration.scope);
}).catch(function(err) { // registration failed 🙁 // 注册战败 🙁
console.log(‘瑟维斯Worker registration failed: ‘, err); }); }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
// Register the service worker
// 注册 service worker
if (‘serviceWorker’ in navigator) {
    navigator.serviceWorker.register(‘/service-worker.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);
   });
}
</script>

接下来,大家需求创建 Service Worker 文件并将其取名字为‘service-worker.js‘。大家筹算用这么些 Service Worker
拦截任何网络要求,以此检查互联网的连接性,并依附检查结果向顾客重回最适合的从头到尾的经过。

JavaScript

‘use strict’; var cacheVersion = 1; var currentCache = { offline:
‘offline-cache’ + cacheVersion }; const offlineUrl =
‘offline-page.html’; this.addEventListener(‘install’, event => {
event.waitUntil( caches.open(currentCache.offline).then(function(cache)
{ return cache.addAll([ ‘./img/offline.svg’, offlineUrl ]); }) ); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
‘use strict’;
 
var cacheVersion = 1;
var currentCache = {
  offline: ‘offline-cache’ + cacheVersion
};
const offlineUrl = ‘offline-page.html’;
 
this.addEventListener(‘install’, event => {
  event.waitUntil(
    caches.open(currentCache.offline).then(function(cache) {
      return cache.addAll([
          ‘./img/offline.svg’,
          offlineUrl
      ]);
    })
  );
});

在上头的代码中,大家在装置 Service Worker
时,向缓存增多了离线页面。借使我们将代码分为几小块,可观望前几行代码中,我为离线页面钦命了缓存版本和UXC90L。假若你的缓存有例外版本,那么您只需改正版本号就能够轻松地消除缓存。在大致在第
12
行代码,我向那些离线页面及其能源(如:图片卡塔 尔(阿拉伯语:قطر‎发出央浼。在获得成功的响应后,我们将离线页面和有关能源足够到缓存。

几天前,离线页面已存进缓存了,我们可在急需的时等候检查索它。在同一个 ServiceWorker 中,大家必要对无网络时回来的离线页面加多相应的逻辑代码。

JavaScript

this.add伊芙ntListener(‘fetch’, event => { // request.mode = navigate
isn’t supported in all browsers // request.mode = naivgate
并未得到全体浏览器的支撑 // so include a check for Accept: text/html
header. // 因此对 header 的 Accept:text/html 进行把关 if
(event.request.mode === ‘navigate’ || (event.request.method === ‘GET’ &&
event.request.headers.get(‘accept’).includes(‘text/html’))) {
event.respondWith( fetch(event.request.url).catch(error => { //
Return the offline page // 再次回到离线页面 return caches.match(offlineUrl);
}) ); } else{ // Respond with everything else if we can //
再次来到任何我们能回到的东西 event.respondWith(caches.match(event.request)
.then(function (response) { return response || fetch(event.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
this.addEventListener(‘fetch’, event => {
  // request.mode = navigate isn’t supported in all browsers
  // request.mode = naivgate 并没有得到所有浏览器的支持
  // so include a check for Accept: text/html header.
  // 因此对 header 的 Accept:text/html 进行核实
  if (event.request.mode === ‘navigate’ || (event.request.method === ‘GET’ && event.request.headers.get(‘accept’).includes(‘text/html’))) {
        event.respondWith(
          fetch(event.request.url).catch(error => {
              // Return the offline page
              // 返回离线页面
              return caches.match(offlineUrl);
          })
    );
  }
  else{
        // Respond with everything else if we can
        // 返回任何我们能返回的东西
        event.respondWith(caches.match(event.request)
                        .then(function (response) {
                        return response || fetch(event.request);
                    })
            );
      }
});

为了测验该意义,你能够使用 Chrome
内置的开垦者工具。首先,导航到您的页面,然后假诺设置上了 瑟维斯Worker,就开拓 Network 标签并将节流(throttling卡塔 尔(英语:State of Qatar)改为
Offline。(译者注:若将节流设置为 Offline
没效果,则可经过关闭网络只怕经过360康宁警卫防止 Chrome 访谈网络卡塔 尔(阿拉伯语:قطر‎

图片 4

比如您刷新页面,你应有能见到相应的离线页面!

图片 5

若果您只想大致地质衡量试该功效而不想写任何代码,那么您能够访谈小编已成立好的
demo。此外,上述任何代码能够在
Github repo 找到。

本身知道用在这案例中的页面很简短,但你的离线页面则在于你本人!如若您想浓郁该案例的内容,你可认为离线页面增加缓存破坏(
cache busting卡塔尔国,如:
此案例。

加紧/离线访问只需三步

  • 首页加多注册代码

JavaScript

<script> if (‘serviceWorker’ in navigator) {
navigator.serviceWorker.register(‘/sw.js’); } </script>

1
2
3
4
5
<script>
if (‘serviceWorker’ in navigator) {
navigator.serviceWorker.register(‘/sw.js’);
}
</script>
  • 复制代码

将保存到你的网址根目录下

  • 更正不缓存域名列表及离线状态页面

在你的sw.js中修改

JavaScript

const ignoreFetch = [ /https?://cdn.bootcss.com//,
/https?://static.duoshuo.com//,
/https?://www.google-analytics.com//,
/https?://dn-lbstatics.qbox.me//, ];

1
2
3
4
5
6
const ignoreFetch = [
  /https?://cdn.bootcss.com//,
  /https?://static.duoshuo.com//,
  /https?://www.google-analytics.com//,
  /https?://dn-lbstatics.qbox.me//,
];

打开Chrome Dev Tools->Source,看看本人的blog都援用了什么第三方财富,每一种加到忽略列表里。

图片 6

在根目录下增加offline.html,在并未有互联网且缓存中也未有的时候接受,效果如下:

图片 7

在根目录下增加offline.svg,在无互连网时图片财富央浼重回该公文。

试试看

您须求多个支持 Service
Worker 和 fetch
API 的浏览器。甘休到本文编写时只有Chrome(手提式有线电话机版和桌面版卡塔 尔(英语:State of Qatar)同期帮衬那二种 API(译者注:Opera
方今也扶植那四头卡塔 尔(英语:State of Qatar),然而 Firefox
相当的慢将在帮助了(在每一天更新的版本中风姿罗曼蒂克度帮助了卡塔尔国,除了这些之外 Safari
之外的装有浏览器也都在查究。别的,service worker 只可以登记在应用了
HTTPS 的网址上,theguardian.com
已经起来逐步搬迁到 HTTPS,所以大家只万幸网址的 HTTPS
部分提供离线体验。就现阶段来讲,大家选用了 开荒者博客 作为大家用来测量检验的地点。所以假如您是在我们网址的 开拓者博客 部分阅读那篇文章的话,很幸运。

当你采纳扶助的浏览器访谈大家的 开荒者博客 中的页面包车型大巴时候,一切就希图伏贴了。断开你的互联网连接,然后刷新一下页面。假设您本人没标准尝试的话,能够看一下这段 亲自过问录制(译者注:需梯子)。

打开阅读

除此以外,还应该有多少个很棒的离线作用案例。如:Guardian 营造了八个富有 crossword
puzzle(填字游戏卡塔尔国的离线
web 页面 –
由此,纵然等待网络重连时(即已在离线状态下卡塔尔国,也能找到一点野趣。小编也援引看看
Google Chrome Github
repo,它含有了广大莫衷一是的
Service Worker 案例 – 当中有的用到案例也在此!

不过,即使您想跳过上述代码,只是想大致地经过三个库来拍卖有关操作,那么笔者引入您看看
UpUp。那是贰个轻量的台本,能让您更轻易地利用离线成效。

打赏支持我翻译更加多好小说,感激!

打赏译者

加速效果

首页加快后,网络诉求从16降为1,加载时间从2.296s降为0.654s,得到了须臾间加载的结果。

图片 8

基于webpagetest

查看测量试验结果

办事原理

经过生机勃勃段轻巧的
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
成效(用于转移互连网央求卡塔 尔(英语:State of Qatar),如下所示:

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的文章。

打赏扶植小编翻译越来越多好小说,多谢!

打赏译者

打赏扶持本身翻译更加的多好小说,多谢!

任选生机勃勃种支付形式

图片 9
图片 10

1 赞 3 收藏 1
评论

增速/离线原理探寻

打赏帮助本身翻译越多好小说,多谢!

图片 11

1 赞 收藏
评论

至于小编:刘健超-J.c

图片 12

前端,在路上…
个人主页 ·
笔者的小说 ·
19 ·
    

图片 13

什么是 Service worker

图片 14

如上图,Service
worker

是生机勃勃种由Javascript编写的浏览器端代理脚本,位于你的浏览器和服务器之间。当三个页面注册了叁个
Service
worker
,它就能够挂号一四种事件微处理机来响应如网络央求和消息推送那几个事件。Service
worker

能够被用来管理缓存,当响应叁个网络要求时方可配备为回去缓存依旧从互连网获取。由于Service
worker

是依照事件的,所以它只在管理那个事件的时候被调入内存,不用顾虑常驻内部存款和储蓄器占用能源招致系统变慢。

至于小编:Erucy

图片 15

已经的SharePoint喵星程序员(暂时还挂着微软MVP的名头卡塔尔国,今后的Azure/.Net/MongoDB/Cordova/前端技术员,临时写小说
个人主页 ·
小编的篇章 ·
46 ·
  

图片 13

Service worker生命周期

图片 17

Service
worker

为网页增添三个相近于APP的生命周期,它只会响应系统事件,尽管浏览器关闭时操作系统也得以提示Service
worker
,那点相当重要,让web
app与native app的力量变得好像了。

Service
worker
在Register时会触发Install事件,在Install时可以用来预先获取和缓存应用所需的财富并安装各类文件的缓存计谋。

一旦Service
worker
处在activated状态,就足以完全调节应用的财富,对互连网诉求进行反省,改正互连网央浼,从互连网上收获并回到内容或者重临由已安装的Service
worker
预报获取并缓存好的能源,以至还是能够转移内容并赶回给网络语法。

享有的那一个都顾客都以晶莹剔透的,事实上,二个设计精美的Service
worker
犹如叁个智能缓存系统,抓好了互连网和缓存功效,选拔最优办法来响应互连网乞请,让使用越来越安定的周转,固然未有互联网也没涉及,因为你能够完全调整网络响应。

Service worker的支配从第二次页面采访最早

在第二回加载页面时,全数财富都以从互联网载的,Service
worker

在第二遍加载时不会拿走调节网络响应,它只会在继续访谈页面时起效果。

图片 18

页面第二次加载时形成install,并步向idle状态。

图片 19

页面第一回加载时,踏入activated状态,筹划管理所有事件,同时
浏览器会向服务器发送一个异步 乞请来检查Service
worker
自个儿是否有新的版本,构成了Service
worker
的更新机制。

图片 20

Service
worker
拍卖完所有的事件后,步入idle状态,最后走入terminated状态能源被假释,当有新的平地风波时有暴发时再也被调用。

特点

  • 浏览器

Google Chrome,Firefox,Opera以致本国的各类双核浏览器都支持,但是 safari
不扶植,那么在不帮忙的浏览器里Service
worker
不工作。

  • https

网址必需启用https来作保使用Service
worker
页面包车型地铁安全性,开辟时localhost默许以为是高枕而卧的。

  • non-block

Service
worker

中的 Javascript 代码必须是非堵塞的,因为 localStorage
是堵塞性,所以不应当在 Service Worker 代码中动用 localStorage。

  • 单独的实施碰着

Service
worker
运行在融洽的全局碰着中,平日也运维在友好单独的线程中。

  • 尚未绑定到特定页面

service work能操纵它所加载的全套范围内的能源。

  • 无法操作DOM

跟DOM所处的条件是互为隔开分离的。

图片 21

  • 从未有过浏览页面时也足以运营

吸收接纳系统事件,后台运营

  • 事件驱动,供给时运维,无需时就终止

按需试行,只在要求时加载到内部存款和储蓄器

  • 可升级

试行时会异步获取最新的本子

贯彻加快/离线

Cache

网页缓存有超多,如HTTP缓存,localStorage,sessionStorage和cacheStorage都得以灵活搭配进行缓存,但操作太繁缛,直接选取越来越高端Service
worker

–本文的主人翁。

添加Service worker入口

在web app的首页增多以下代码

JavaScript

<script> if (‘serviceWorker’ in navigator) {
navigator.serviceWorker.register(‘/sw.js’); } </script>

1
2
3
4
5
<script>
if (‘serviceWorker’ in navigator) {
navigator.serviceWorker.register(‘/sw.js’);
}
</script>

假使浏览器扶植serviceWorker就注册它,不协理依然如常浏览,未有Service
worker
所提供的增加效用。

Service worker调节范围:
轻松情况下,将sw.js放在网址的根目录下,那样Service
worker
能够操纵网址有着的页面,,同理,假若把sw.js放在/my-app/sw.js那正是说它只可以调节my-app目录下的页面。
sw.js放在/js/目录呢?越来越好的目录结商谈限量调节呢?
在注册时内定js地方并安装约束。

JavaScript

navigator.serviceWorker.register(‘/js/sw.js’, {scope:
‘/sw-test/’}).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
navigator.serviceWorker.register(‘/js/sw.js’, {scope: ‘/sw-test/’}).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实现

监听四个事件:

JavaScript

self.addEventListener(‘install’, onInstall);
self.addEventListener(‘fetch’, onFetch);
self.addEventListener(“activate”, onActivate);

1
2
3
self.addEventListener(‘install’, onInstall);
self.addEventListener(‘fetch’, onFetch);
self.addEventListener("activate", onActivate);

install

JavaScript

////////// // Install ////////// function onInstall(event) {
log(‘install event in progress.’); event.waitUntil(updateStaticCache());
} function updateStaticCache() { return caches
.open(cacheKey(‘offline’)) .then((cache) => { return
cache.addAll(offlineResources); }) .then(() => { log(‘installation
complete!’); }); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//////////
// Install
//////////
function onInstall(event) {
  log(‘install event in progress.’);
  event.waitUntil(updateStaticCache());
}
function updateStaticCache() {
  return caches
    .open(cacheKey(‘offline’))
    .then((cache) => {
      return cache.addAll(offlineResources);
    })
    .then(() => {
      log(‘installation complete!’);
    });
}

install时将具备切合缓存攻略的财富进行缓存。

fetch

JavaScript

//////// // Fetch //////// function onFetch(event) { const request =
event.request; if (shouldAlwaysFetch(request)) {
event.respondWith(networkedOrOffline(request)); return; } if
(shouldFetchAndCache(request)) {
event.respondWith(networkedOrCached(request)); return; }
event.respondWith(cachedOrNetworked(request)); }
onFetch做为浏览器网络恳求的代办,根据供给回到互联网或缓存内容,假若得到了互连网内容,重回互联网央求时同不时间开展缓存操作。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
////////
// Fetch
////////
function onFetch(event) {
  const request = event.request;
  if (shouldAlwaysFetch(request)) {
    event.respondWith(networkedOrOffline(request));
    return;
  }
  if (shouldFetchAndCache(request)) {
    event.respondWith(networkedOrCached(request));
    return;
  }
  event.respondWith(cachedOrNetworked(request));
}
onFetch做为浏览器网络请求的代理,根据需要返回网络或缓存内容,如果获取了网络内容,返回网络请求时同时进行缓存操作。

activate

JavaScript

/////////// // Activate /////////// function onActivate(event) {
log(‘activate event in progress.’); event.waitUntil(removeOldCache()); }
function removeOldCache() { return caches .keys() .then((keys) => {
return Promise.all( // We return a promise that settles when all
outdated caches are deleted. keys .filter((key) => { return
!key.startsWith(version); // Filter by keys that don’t start with the
latest version prefix. }) .map((key) => { return caches.delete(key);
// Return a promise that’s fulfilled when each outdated cache is
deleted. }) ); }) .then(() => { log(‘removeOldCache completed.’); });
}

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
///////////
// Activate
///////////
function onActivate(event) {
  log(‘activate event in progress.’);
  event.waitUntil(removeOldCache());
}
function removeOldCache() {
  return caches
    .keys()
    .then((keys) => {
      return Promise.all( // We return a promise that settles when all outdated caches are deleted.
        keys
         .filter((key) => {
           return !key.startsWith(version); // Filter by keys that don’t start with the latest version prefix.
         })
         .map((key) => {
           return caches.delete(key); // Return a promise that’s fulfilled when each outdated cache is deleted.
         })
      );
    })
    .then(() => {
      log(‘removeOldCache completed.’);
    });
}

在activate时依据version值来删除过期的缓存。

管理 Service worker

一定网址

  1. Google Chrome

Developer Tools->Application->Service Workers

图片 22

在此边还应该有多少个十三分平价的复选框:

  • Offline

仿照断网状态

  • Update on reload
    加载时更新
  • Bypass for network
    总是采用网络内容
  1. Firefox

唯有在Settings里有三个足以在HTTP情状中接收Service
worker
的选项,适应于调节和测验,未有单独网址下的Service
worker
管理。

图片 23

  1. Opera及其余双核浏览器同Google Chrome
    借使见到三个生机勃勃律范围内的四个Service
    worker
    ,说明Service
    woker
    更新后,而原有Service
    worker
    尚未曾被terminated。

浏览器全局

拜候您的浏览器里都有怎样Service worker已经存在了

  1. Google Chrome

在地址栏里输入:

JavaScript

chrome://serviceworker-internals/

1
chrome://serviceworker-internals/

能够看出曾经有二十多少个瑟维斯worker了,在这里边能够手动Start让它工作,也可以Unregister卸载掉。

图片 24

  1. Firefox

有三种方式步入Service
worker
扣押分界面来手动Start或unregister。

  • 菜单栏,Tool->Web Developer->Service workers
  • 地址栏中输入

JavaScript

about:debugging#workers

1
about:debugging#workers

图片 25

  1. Opera及其余双核浏览器同Google Chrome

更多

TODO:

  • Service
    workers
    的更新必要手动编辑version,每趟发布新文章时索要编写制定。
  • 使用AMP让页面渲染速度达到最高。

Ref links

Service Worker Cookbook

Is service worker
ready?

Chrome service worker status
page

Firefox service worker status
page

MS Edge service worker status
page

WebKit service worker status
page

1 赞 2 收藏
评论

图片 13

发表评论