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

至于作者:Erucy

必威 3

已经的SharePoint喵星工程师(暂且还挂着微软MVP的名头),今后的Azure/.Net/MongoDB/科尔多瓦/前端技术员,不经常写随笔 个人主页 · 笔者的篇章 · 46 ·   

必威 4

fetch()近日仅扶助Service Workers

fetch马上支持在页面上运用了,可是近期的Chrome达成,它还只辅助service worker。cache API也快要在页面上被辅助,可是最近截止,cache也还只可以在service worker中用。

4. Http/Manifest/Service Worker三种cache的关系

要缓存能够动用二种手腕,使用Http Cache设置缓存时间,也能够用Manifest的Application Cache,仍是能够用ServiceWorker缓存,假诺三者都用上了会怎么样啊?

会以Service Worker为预先,因为ServiceWorker把央浼拦截了,它最早做拍卖,假如它缓存库里有的话一贯重回,未有的话不奇怪央浼,就一定于尚未ServiceWorker了,那个时候就到了Manifest层,Manifest缓存里假诺有些话就取这些缓存,若无的话就也等于尚未Manifest了,于是就能从Http缓存里取了,即使Http缓存里也尚无就能够发须求去猎取,服务端依据Http的etag或许Modified Time只怕会回来304 Not Modified,不然寻常重回200和数据内容。那便是整一个获得的长河。

之所以若是既用了Manifest又用ServiceWorker的话应该会招致同一个财富存了五回。然而能够让扶助ServiceWorker的浏览器接纳Service Worker,而不援救的采取Manifest.

缓存刷新

躬体力行代码中在倡议呼吁此前会先查询缓存。当客商处于离线状态时,那很好,不过借使客户处于在线状态,那她只会浏览到相比老旧的页面。

各个能源比方图片和录制不会改换,所以一般都把那几个静态财富设置为长时间缓存。那么些能源得以一贯缓存一年(31,536,000秒)。在HTTP Header中,正是:

Cache-Control: max-age=31536000

1
Cache-Control: max-age=31536000

页面,CSS和本子文件也许变动的更频仍一些,所以你能够设置贰个十分小的缓存超时时间(24时辰),并确认保障在客商网络连接复苏时再次从服务器央求:

Cache-Control: must-revalidate, max-age=86400

1
Cache-Control: must-revalidate, max-age=86400

你也可以在历次网址发布时,通过更名的艺术强制浏览珍视新乞请能源。

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

正文以财富缓存为例,表达一(Wissu)下service worker是什么样行事的。

打赏援救自身翻译越来越多好小说,多谢!

必威 5

1 赞 收藏 评论

使用Service Worker

昨天大家有了polyfill,何况化解了HTTPS,让大家看看到底怎么用service worker。

1. 什么是Service Worker

Service Worker是谷歌(Google)发起的落到实处PWA(Progressive Web App)的三个根本角色,PWA是为着减轻守旧Web 应用软件的破绽:

(1)未有桌面入口

(2)不能够离线使用

(3)没有Push推送

那瑟维斯 Worker的具体表现是怎么样的吗?如下图所示:

必威 6

ServiceWorker是在后台运营的一条服务Worker线程,上海教室作者开了多个标签页,所以显得了八个Client,不过不管开几个页面都唯有三个Worker在负担处理。这么些Worker的做事是把一部分财富缓存起来,然后拦截页面包车型客车需要,先看下缓存Curry有未有,如若局地话就从缓存里取,响应200,反之未有的话就走正规的伏乞。具体来讲,ServiceWorker结合Web App Manifest能做到以下专门的职业(那也是PWA的检查评定标准):

必威 7

包罗能够离线使用、断网时重临200、能唤起顾客把网址增多多个Logo到桌面上等。

URL隐藏

当你的行使正是贰个单UENVISIONL的应用程序时(举例游戏),作者提议您隐敝地址栏。除了那么些之外的情况自己并不提议你隐敝地址栏。在Manifest中,display: minimal-ui 或者 display: browser对于好多动静的话足够用了。

难点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,在调节和测量试验进度中时常等上一两分钟才会选取新的,比较抓狂。

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

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

本文由 伯乐在线 - Erucy 翻译,weavewillg 校稿。未经许可,禁止转载!
英语出处:Oliver Ash。招待参与翻译组。

大家是如何行使 service worker 来为 theguardian.com 塑造一个自定义的离线页面。

必威 8

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

你正在朝着公司途中的大巴里,在二哥伦比亚大学上开发了 Guardian 应用。地铁被隧道包围着,但是那个利用能够符合规律运转,固然没有网络连接,你也能获得完整的效能,除了展现的内容大概有一些旧。倘若您品味在网站上也如此干,缺憾它完全没法加载:

必威 9

安卓版 Chrome 的离线页面

Chrome 中的那几个彩蛋,很两个人都不掌握》

Chrome 在离线页面上有个藏匿的游艺(桌面版上按空格键,手提式有线电电话机版上点击那只恐龙),那有一些能减轻一点您的非常慢。可是大家能够做得越来越好。

Service workers 允许网址作者拦截本身站点的具有网络诉求,这也就意味着大家得以提供周密的离线体验,就如原生应用一样。在 Guardian 网址,我们前段时间上线了八个自定义的离线体验效果。当顾客离线的时候,他们会看出三个蕴涵Guardian 标志的页面,上边带有一个轻易易行的离线提醒,还大概有二个填字游戏,他们能够在守候互连网连接的时候玩玩这几个找点乐子。那篇博客解释了我们是如何创设它的,不过在起来从前,你能够先自身尝试看。

拍卖响应式图片

img的srcset属性只怕<picture>标签会根据情况从浏览器或者网络上选择最合适尺寸的图片。

在service worker中,你想要在install步骤缓存四个图片,你有以下二种选用:

  1. 安装具备的<picture>元素或者将被请求的srcset属性。
  2. 安装单一的low-res版本图片
  3. 安装单一的high-res版本图片

正如好的方案是2或3,因为要是把具备的图样都给下载下来存着有一些浪费内部存款和储蓄器。

假定你将low-res版本在install的时候缓存了,然后在页面加载的时候你想要尝试从互联网上下载high-res的版本,不过假设high-res版本下载失利以来,就如故用low-res版本。那么些主张很好也值得去做,不过有二个标题:

若果我们有上边二种图片:

Screen Density Width Height
1x 400 400
2x 800 800

HTML代码如下:

JavaScript

<img src="image-src.png" srcset="image-src.png 1x, image-2x.png 2x" />

1
<img src="image-src.png" srcset="image-src.png 1x, image-2x.png 2x" />

假如大家在贰个2x的显得格局下,浏览器会下载image-2x.png,假设我们离线,你能够读取在此以前缓存并回到image-src.png代替,假使此前它已经被缓存过。就算如此,由于前几天的情势是2x,浏览器会把400X400的图样呈现成200X200,要幸免那些主题素材将要在图纸的体裁上设置宽高。

JavaScript

<img src="image-src.png" srcset="image-src.png 1x, image-2x.png 2x" style="width:400px; height: 400px;" />

1
2
<img src="image-src.png" srcset="image-src.png 1x, image-2x.png 2x"
style="width:400px; height: 400px;" />

必威 10

<picture>标签情况更复杂一些,难度取决于你是如何创建和使用的,但是可以通过与srcset类似的思路去解决。

3. 使用Service Worker

ServiceWorker的选取套路是先挂号一个Worker,然后后台就能够运维一条线程,能够在那条线程运营的时候去加载一些财富缓存起来,然后监听fetch事件,在那么些事件里拦截页面包车型大巴呼吁,先看下缓存里有未有,要是有间接重临,不然符合规律加载。恐怕是一伊始不缓存,每种能源要求后再拷贝一份缓存起来,然后下一遍呼吁的时候缓存里就有了。

Activate 事件

其一事件会在service worker被激活时产生。你只怕不须要那个事件,不过在演示代码中,大家在该事件发生时将老的缓存全体清理掉了:

// clear old caches function clearOldCaches() { return caches.keys() .then(keylist => { return Promise.all( keylist .filter(key => key !== CACHE) .map(key => caches.delete(key)) ); }); } // application activated self.addEventListener('activate', event => { console.log('service worker: activate'); // delete old caches event.waitUntil( clearOldCaches() .then(() => self.clients.claim()) ); });

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
28
// clear old caches
function clearOldCaches() {
  return caches.keys()
    .then(keylist => {
      return Promise.all(
        keylist
          .filter(key => key !== CACHE)
          .map(key => caches.delete(key))
      );
    });
}
// application activated
self.addEventListener('activate', event => {
  console.log('service worker: activate');
    // delete old caches
  event.waitUntil(
    clearOldCaches()
    .then(() => self.clients.claim())
    );
});

注意self.clients.claim()实行时将会把当下service worker作为被激活的worker。

Fetch 事件 该事件将会在网络起始央浼时发起。该事件管理函数中,大家得以行使respondWith()措施来威胁HTTP的GET需要然后赶回:

  1. 从缓存中取到的财富文件
  2. 即使第一步失利,能源文件将会从网络中选择Fetch API来赢得(和service worker中的fetch事件非亲非故)。获取到的能源将会加入到缓存中。
  3. 若是第一步和第二步均战败,将会从缓存中回到正确的能源文件。

// application fetch network data self.addEventListener('fetch', event => { // abandon non-GET requests if (event.request.method !== 'GET') return; let url = event.request.url; event.respondWith( caches.open(CACHE) .then(cache => { return cache.match(event.request) .then(response => { if (response) { // return cached file console.log('cache fetch: ' + url); return response; } // make network request return fetch(event.request) .then(newreq => { console.log('network fetch: ' + url); if (newreq.ok) cache.put(event.request, newreq.clone()); return newreq; }) // app is offline .catch(() => offlineAsset(url)); }); }) ); });

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
// application fetch network data
self.addEventListener('fetch', event => {
  // abandon non-GET requests
  if (event.request.method !== 'GET') return;
  let url = event.request.url;
  event.respondWith(
    caches.open(CACHE)
      .then(cache => {
        return cache.match(event.request)
          .then(response => {
            if (response) {
              // return cached file
              console.log('cache fetch: ' + url);
              return response;
            }
            // make network request
            return fetch(event.request)
              .then(newreq => {
                console.log('network fetch: ' + url);
                if (newreq.ok) cache.put(event.request, newreq.clone());
                return newreq;
              })
              // app is offline
              .catch(() => offlineAsset(url));
          });
      })
  );
});

offlineAsset(url)主意中使用了一些helper方法来回到准确的数据:

// 是还是不是为图片地址? let iExt = ['png', 'jpg', 'jpeg', 'gif', 'webp', 'bmp'].map(f => '.' + f); function isImage(url) { return iExt.reduce((ret, ext) => ret || url.endsWith(ext), false); } // return 再次回到离线能源 function offlineAsset(url) { if (isImage(url)) { // 再次回到图片 return new Response( '<svg role="img" viewBox="0 0 400 300" xmlns=" d="M0 0h400v300H0z" fill="#eee" /><text x="200" y="150" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif" font-size="50" fill="#ccc">offline</text></svg>', { headers: { 'Content-Type': 'image/svg+xml', 'Cache-Control': 'no-store' }} ); } else { // return page return caches.match(offlineURL); } }

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
28
29
30
31
32
// 是否为图片地址?
let iExt = ['png', 'jpg', 'jpeg', 'gif', 'webp', 'bmp'].map(f => '.' + f);
function isImage(url) {
  
  return iExt.reduce((ret, ext) => ret || url.endsWith(ext), false);
  
}
  
  
// return 返回离线资源
function offlineAsset(url) {
  
  if (isImage(url)) {
  
    // 返回图片
    return new Response(
      '<svg role="img" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg"><title>offline</title><path d="M0 0h400v300H0z" fill="#eee" /><text x="200" y="150" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif" font-size="50" fill="#ccc">offline</text></svg>',
      { headers: {
        'Content-Type': 'image/svg+xml',
        'Cache-Control': 'no-store'
      }}
    );
  
  }
  else {
  
    // return page
    return caches.match(offlineURL);
  
  }
  
}

offlineAsset()方法检查央浼是不是为二个图片,然后回来二个包涵“offline”文字的SVG文件。其余央求将会回去 offlineUCRUISERL 页面。

Chrome开拓者工具中的ServiceWorker部分提供了有关当前页面worker的消息。在那之中会呈现worker中发生的失实,还是能强制刷新,也能够让浏览器步入离线形式。

Cache Storage 部分例举了眼下具备曾经缓存的能源。你能够在缓存必要创新的时候点击refresh开关。

应用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.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的进度中,也遇上了有个别难题,上面是内部四个

办事原理

经过一段轻便的 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的文章。

打赏帮衬笔者翻译越来越多好文章,谢谢!

打赏译者

管理边界和填坑

这一节内容比较新,有好些个待定细节。希望这一节非常的慢就无需讲了(因为标准会管理那一个标题——译者注),不过现在,那么些内容依然应当被提一下。

动用 瑟维斯 Worker 做叁个 PWA 离线网页应用

2017/10/09 · JavaScript · PWA, Service Worker

原来的文章出处: 人人网FED博客   

在上一篇《小编是怎么样让网址用上HTML5 Manifest》介绍了怎么用Manifest做二个离线网页应用,结果被广大网上好朋友嘲讽说那么些东西已经被deprecated,移出web规范了,今后被ServiceWorker代替了,不管怎么着,Manifest的一部分心想还能借用的。作者又将网址晋级到了ServiceWorker,借使是用Chrome等浏览器就用ServiceWorker做离线缓存,要是是Safari浏览器就依然用Manifest,读者能够张开这些网址感受一下,断网也是能健康张开。

开拓者工具

Chrome浏览器提供了一名目大多的工具来扶持您来调治ServiceWorker,日志也会平昔展现在调控台上。

您最佳使用匿超级模特式来张开付出专门的学业,那样能够去掉缓存对开垦的掺和。

最后,Chrome的Lighthouse扩充也足以为你的渐进式Web应用提供部分改革音讯。

本文由必威发布于必威-前端,转载请注明出处:service 必威worker是一段脚本,原文出处

相关阅读