连不上网

message事件

页面和serviceWorker之间能够由此posetMessage()方法发送消息,发送的音讯能够通过message事件接收到。

那是叁个双向的历程,页面能够发消息给service worker,service
worker也得以发送新闻给页面,由于那性情格,能够将service
worker作为中间纽带,使得三个域名照旧子域名下的三个页面能够随意通讯。

这里是三个小的页面之间通讯demo

连不上网?United Kingdom卫报的性子离线页面是那样做的

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

本文由 伯乐在线 –
Erucy
翻译,weavewillg
校稿。未经许可,禁止转发!
乌Crane语出处:Oliver
Ash。接待参预翻译组。

小编们是何等使用 service worker 来为 theguardian.com
营造一个自定义的离线页面。

图片 1

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

您正在朝着公司途中的客车里,在手提式有线电话机上开垦了
Guardian
应用。大巴被隧道包围着,可是那个动用能够平常运转,纵然未有网络连接,你也能收获完全的机能,除了出示的剧情或然有一点旧。假让你尝试在网址上也这样干,缺憾它完全没办法加载:

图片 2

安卓版 Chrome 的离线页面

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

Chrome
在离线页面上有个暗藏的游艺(桌面版上按空格键,手提式有线电话机版上点击那只恐龙),那有一点能缓慢解决一点你的沉闷。可是大家得以做得更好。

Service
workers
允许网站作者拦截本身站点的持有互联网供给,那也就意味着大家能够提供完善的离线体验,就如原生应用同样。在
Guardian
网址,大家近年来上线了三个自定义的离线体验效果。当客商离线的时候,他们会见到二个涵盖Guardian
标记的页面,上边带有二个回顾的离线提醒,还应该有三个填字游戏,他们得以在等候互连网连接的时候玩玩那么些找点乐子。那篇博客解释了作者们是怎么着创设它的,可是在始发在此之前,你能够先自个儿探寻看。

难点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

干活原理

由此一段轻巧的
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的文章。

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

打赏译者

生命周期

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

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

图中可以看来,一个service worker要经历以下进度:

  1.  安装

2.
 激活,激活成功现在,张开chrome://inspect/#service-workers能够查阅到当下运作的service
worker

图片 5

  1. 监听fetch和message事件,下边二种事件会开展简易描述

  2. 销毁,是还是不是销毁由浏览器决定,假使三个service
    worker长时间不利用或然机器内部存款和储蓄器有数,则恐怕会销毁这几个worker

试试看

你供给三个体协会助 Service
Worker 和 fetch
API 的浏览器。结束到本文编写时唯有Chrome(手提式有线电电话机版和桌面版)同时援助这两种 API(译者注:Opera
近些日子也支撑这两侧),不过 Firefox
异常快将要帮忙了(在每一天更新的版本中早就支撑了),而外 Safari
之外的拥有浏览器也都在实施。此外,service worker 只好登记在应用了
HTTPS 的网址上,theguardian.com
已经起来慢慢搬迁到 HTTPS,所以大家不得不在网址的 HTTPS
部分提供离线体验。就现阶段的话,大家选用了 开荒者博客 作为我们用来测量检验的地点。所以假诺您是在咱们网址的 开采者博客 部分阅读那篇文章的话,很幸运。

当你利用帮衬的浏览器访谈大家的 开辟者博客 中的页面包车型大巴时候,一切就希图伏贴了。断开你的互联网连接,然后刷新一下页面。假如你协和没条件尝试的话,能够看一下这段 躬行实践录制(译者注:需梯子)。

主题材料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,在调节和测量试验进度中时常等上一两分钟才会利用新的,比较抓狂。

有关小编:Erucy

图片 6

曾经的SharePoint喵星技士(一时还挂着微软MVP的名头),以往的Azure/.Net/MongoDB/科尔多瓦/前端技师,不常写小说
个人主页 ·
小编的文章 ·
46 ·
  

图片 3

发表评论

电子邮件地址不会被公开。 必填项已用*标注