>

连不上网,创制几个非常轻松的离线页面

- 编辑:至尊游戏网站 -

连不上网,创制几个非常轻松的离线页面

连不上网?英帝国卫报的特性离线页面是那样做的

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 成立三个很简单的离线页面

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

本文由 伯乐在线 - 刘健超-J.c 翻译,艾凌风 校稿。未经许可,禁止转载!
土耳其(Turkey)语出处:Dean Hume。应接加入翻译组。

让大家想像以下境况:大家那时候在一辆通往农村的列车里,用运动设备望着一篇很棒的篇章。与此相同的时候,当您点击“查看更加多”的链接时,火车忽地步向了隧道,导致移动设备失去了互连网,而 web 页面会呈现出类似以下的剧情:

图片 3

那是一定令人颓唐的心得!幸运的是,web 开采者们能透过一些新特色来革新那类的顾客体验。笔者近年径直在折腾 ServiceWorkers,它给 web 带来的不计其数大概性总能给自家欣喜。Service Workers 的优异特质之一是允许你检查测验网络要求的情景,并让您作出相应的响应。

在这里篇小说里,小编企图用此特性检查客户的当下互联网连接处境,若是没连接则赶回一个特级轻松的离线页面。固然那是二个不胜基础的案例,但它能给您带来启发,令你领悟运行并运维该性格是何等的粗略!倘若您没理解过 Service Worker,笔者提出你看看此 Github repo,领悟更加多相关的信息。

在那案例开首前,让大家先轻便地走访它的劳作流程:

  1. 在客户第一遍访谈大家的页面时,大家会安装 ServiceWorker,并向浏览器的缓存增多大家的离线 HTML 页面
  2. 下一场,假若客商准备导航到另四个 web 页面(同五个网址下),但那时已断网,那么我们将重回已被缓存的离线 HTML 页面
  3. 但是,尽管客商盘算导航到另外二个 web 页面,而那时候网络已接连,则能照常浏览页面

试试看

您要求一个援救 Service Worker 和 fetch API 的浏览器。结束到本文编写时只有Chrome(手提式有线电话机版和桌面版)同期援救这几种 API(译者注:Opera 近来也援救这二者),但是 Firefox 非常的慢就要帮助了(在每一日更新的版本中早就支持了),除开 Safari 之外的具有浏览器也都在尝试。别的,service worker 只可以登记在采取了 HTTPS 的网站上,theguardian.com 已经早先逐步搬迁到 HTTPS,所以大家只好在网站的 HTTPS 部分提供离线体验。就近些日子以来,我们挑选了 开荒者博客 作为我们用来测量试验的地点。所以一旦你是在我们网站的 开拓者博客 部分阅读那篇小说的话,很幸运。

当您使用帮助的浏览器访谈我们的 开垦者博客 中的页面包车型客车时候,一切就筹算伏贴了。断开你的网络连接,然后刷新一下页面。若是你和睦没标准尝试的话,能够看一下这段 以身作则录像(译者注:需梯子)。

让我们起先吧

假如你有以下 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('ServiceWorker 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>

下一场,大家须要创立 瑟维斯 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 时,向缓存加多了离线页面。倘使大家将代码分为几小块,可以知道到前几行代码中,小编为离线页面钦定了缓存版本和U凯雷德L。如果你的缓存有两样版本,那么您只需创新版本号即可轻巧地铲除缓存。在大约在第 12 行代码,笔者向那个离线页面及其能源(如:图片)发出央浼。在获取成功的响应后,我们将离线页面和有关财富丰裕到缓存。

明天,离线页面已存进缓存了,我们可在需求的时等候检查索它。在同贰个 ServiceWorker 中,大家要求对无互联网时回来的离线页面增多相应的逻辑代码。

JavaScript

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); }) ); } });

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 内置的开辟者工具。首先,导航到您的页面,然后假若设置上了 ServiceWorker,就开垦 Network 标签并将节流(throttling)改为 Offline。(译者注:若将节流设置为 Offline 没效果,则可通过关闭网络可能经过360康宁警卫禁绝 Chrome 访谈互联网)

图片 4

借让你刷新页面,你应当能收占卜应的离线页面!

图片 5

一经你只想大致地质度量试该意义而不想写任何代码,那么你能够访问作者已创建好的 demo。别的,上述全数代码能够在 Github repo 找到。

本身领会用在那案例中的页面比非常的粗略,但你的离线页面则决议于你自个儿!借使您想浓重该案例的剧情,你可感到离线页面加多缓存破坏( cache busting),如: 此案例。

职业规律

因而一段轻易的 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 很感兴趣,想要明白更加的多内容的话,开荒者 MattGaunt(Chrome的尽忠报国扶植者)写了一篇越发详实地 介绍 Service Worker的文章。

打赏援救自个儿翻译越来越多好文章,多谢!

打赏译者

进展阅读

除此以外,还应该有多少个很棒的离线功用案例。如:Guardian 构建了八个存有 crossword puzzle(填字游戏)的离线 web 页面 – 因而,就算等待互连网重连时(即已在离线状态下),也能找到一点野趣。我也推荐看看 Google Chrome Github repo,它富含了许多见仁见智的 Service Worker 案例 – 在那之中一些应用案例也在此!

可是,倘若您想跳过上述代码,只是想大概地因而三个库来管理有关操作,那么小编引入你看看 UpUp。这是二个轻量的台本,能让您更轻巧地利用离线作用。

打赏匡助本人翻译更加多好作品,谢谢!

打赏译者

打赏扶持我翻译更加的多好作品,多谢!

图片 6

1 赞 收藏 评论

打赏支持本身翻译越来越多好文章,谢谢!

任选一种支付情势

图片 7 图片 8

1 赞 3 收藏 1 评论

至于小编:Erucy

图片 9

一度的SharePoint喵星程序员(临时还挂着微软MVP的名头),今后的Azure/.Net/MongoDB/Cordova/前端技士,一时写小说 个人主页 · 小编的篇章 · 46 ·   

图片 10

关于作者:刘健超-J.c

图片 11

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

图片 12

本文由设计建站发布,转载请注明来源:连不上网,创制几个非常轻松的离线页面