云顶集团官网手机版-云顶集团网站

热门关键词: 云顶集团官网手机版,云顶集团网站
连不上网?英国卫报的个性离线页面是这样做的
分类:web前端

连不上网?United Kingdom卫报的秉性离线页面是如此做的

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

本文由 伯乐在线 - Erucy 翻译,weavewillg 校稿。未经许可,幸免转发!
匈牙利(Hungary)语出处: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 翻译,艾凌风 校稿。未经许可,禁止转发!
爱尔兰语出处:Dean Hume。应接参与翻译组。

让我们想像以下场景:大家这时在生龙活虎辆通往村庄的列车的里面,用运动器械看着风流罗曼蒂克篇很棒的篇章。与此同期,当你点击“查看越多”的链接时,轻轨卒然踏入了隧道,导致移动设备失去了互联网,而 web 页面会显示出相符以下的剧情:

云顶集团网站 3

那是一定令人寒心的感受!幸运的是,web 开垦者们能通过有个别新特征来纠正那类的顾客体验。作者近年径直在折腾 ServiceWorkers,它给 web 带来的数不胜数恐怕性总能给本身欣喜。Service Workers 的可观特质之一是同意你检验网络诉求的地方,并让你作出相应的响应。

在这里篇小说里,作者希图用此性格检查客户的这段日子互联网连接境况,借使没连接则赶回贰个一流简单的离线页面。即使这是三个可怜基础的案例,但它能给您带来启发,令你领会运转并运营该天性是何其的归纳!要是您没精通过 瑟维斯 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>

下一场,大家须要创立 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
      ]);
    })
  );
});

在上边的代码中,大家在装置 瑟维斯 Worker 时,向缓存增多了离线页面。借使大家将代码分为几小块,可见到前几行代码中,我为离线页面钦命了缓存版本和UPRADOL。纵然你的缓存有例外版本,那么您只需矫正版本号就可以轻便地解除缓存。在大概在第 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 内置的开荒者工具。首先,导航到你的页面,然后如若设置上了 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 可以监听和垄断(monopoly) 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的文章。

打赏帮衬作者翻译越来越多好随笔,多谢!

打赏译者

进展阅读

除此以外,还会有多少个很棒的离线功效案例。如: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

本文由云顶集团官网手机版发布于web前端,转载请注明出处:连不上网?英国卫报的个性离线页面是这样做的

上一篇:不支持接口承袭,Extends的结果与寄生组合承继基 下一篇:没有了
猜你喜欢
热门排行
精彩图文