新浦京娱乐场官网-301net-新浦京娱乐www.301net
做最好的网站

连不上网?英国卫报的个性离线页面是这样做的

连不上网?英国卫报的脾气离线页面是如此做的

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 和 fetch API 的浏览器。停止到本文编写时只有Chrome(手机版和桌面版)同期帮衬这两种 API(译者注:Opera 如今也支撑那四头),然而 Firefox 比较快就要扶持了(在天天更新的本子中已经支撑了),除了那么些之外 Safari 之外的持有浏览器也都在查究。其余,service worker 只可以登记在动用了 HTTPS 的网址上,theguardian.com 已经初阶慢慢搬迁到 HTTPS,所以我们只可以在网址的 HTTPS 部分提供离线体验。就当前以来,我们挑选了 开荒者博客 作为大家用来测验的地点。所以只要您是在大家网址的 开拓者博客 部分阅读那篇散文的话,很幸运。

当您利用支持的浏览器访问大家的 开辟者博客 中的页面包车型的士时候,一切就希图妥当了。断开你的网络连接,然后刷新一下页面。如若您自身没条件尝试的话,能够看一下这段 示范录制(译者注:需梯子)。

做事规律

因而意气风发段简单的 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,你会见到专门为你订制的天性化内容,它们是在您前面访谈网址时由浏览器缓存下来的。它在安装进度中也不会发生任何不便,你所必要的只是拜见那一个网站而已,不像原生应用,还要求客商有多少个施用商铺的账号技巧设置。瑟维斯worker 相似能够协理大家提高网址的加载速度,因为网址的框架能够被保险地缓存下来,就好像原生应用相通。

即便你对 service worker 很感兴趣,想要精晓更加多内容的话,开拓者 马特Gaunt(Chrome的赤子之心帮助者)写了生机勃勃篇特别详细地 介绍 Service Worker的文章。

打赏协理小编翻译越多好小说,感谢!

打赏译者

打赏协理本人翻译越多好作品,感激!

图片 3

1 赞 收藏 评论

至于小编:Erucy

图片 4

业已的SharePoint喵星程序员(临时还挂着微软MVP的名头),未来的Azure/.Net/MongoDB/Cordova/前端工程师,偶然写随笔 个人主页 · 我的稿子 · 46 ·   

图片 5

本文由新浦京娱乐场官网-301net-新浦京娱乐www.301net发布于301net网站建设,转载请注明出处:连不上网?英国卫报的个性离线页面是这样做的

您可能还会对下面的文章感兴趣: