当前位置:王中王鉄算盘开奖结果 > 品牌动态 > 创建一个非常简单的离线页面

创建一个非常简单的离线页面

文章作者:品牌动态 上传时间:2019-11-24

运用 Service worker 创建二个极度轻易的离线页面

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

本文由 伯乐在线 - 刘健超-J.c 翻译,艾凌风 校稿。未经许可,防止转载!
罗马尼亚(Romania卡塔 尔(阿拉伯语:قطر‎语出处:Dean Hume。应接参与翻译组。

让大家想像以下场景:大家那儿在后生可畏辆通往村落的火车上,用移动器械望着风流罗曼蒂克篇很棒的小说。与此同临时候,当你点击“查看更加多”的链接时,火车突然步向了隧道,招致运动器械失去了网络,而 web 页面会展现出相仿以下的内容:

图片 1

那是一定令人心酸的心得!幸运的是,web 开采者们能通过有个别新特征来改过这类的客户体验。作者近些日子径直在折腾 ServiceWorkers,它给 web 带给的成千上万或者性总能给自身惊奇。Service Workers 的名特别优Whit质之一是允许你检验互连网诉求的处境,并让您作出相应的响应。

在这里篇文章里,小编准备用此天性检查客户的当下互联网连接景况,要是没连接则赶回二个至上简单的离线页面。即便那是多个百般根底的案例,但它能给您带给启迪,让你精通运营并运转该天性是何等的粗略!如果你没精晓过 瑟维斯 Worker,作者建议您看看此 Github repo,精通越来越多相关的音信。

在该案例初始前,让大家先轻松地看看它的干活流程:

  1. 在客户第贰次访谈大家的页面时,大家会设置 ServiceWorker,并向浏览器的缓存增添大家的离线 HTML 页面
  2. 然后,假设客商筹算导航到另叁个 web 页面(同三个网址下卡塔 尔(阿拉伯语:قطر‎,但那个时候已断网,那么我们将赶回已被缓存的离线 HTML 页面
  3. 然则,若是顾客计划导航到别的一个 web 页面,而此刻网络已一而再三番三次,则能照常浏览页面

让我们起头吧

若果你有以下 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
      ]);
    })
  );
});

在上边的代码中,大家在装置 Service Worker 时,向缓存加多了离线页面。纵然大家将代码分为几小块,可看出前几行代码中,我为离线页面钦点了缓存版本和U奥迪Q3L。即使你的缓存有例外版本,那么您只需立异版本号就能够轻松地消灭缓存。在大概在第 12 行代码,作者向那么些离线页面及其能源(如:图片卡塔 尔(英语:State of Qatar)发出央浼。在得到成功的响应后,大家将离线页面和相关财富丰裕到缓存。

现行反革命,离线页面已存进缓存了,大家可在急需的时等候检查索它。在同三个 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卡塔 尔(英语:State of Qatar)改为 Offline。(译者注:若将节流设置为 Offline 没意义,则可通过关闭互连网恐怕通过360康宁警卫制止 Chrome 访谈网络卡塔尔

图片 2

假如你刷新页面,你应当能收六柱预测应的离线页面!

图片 3

假诺你只想大致地质衡量试该意义而不想写任何代码,那么你能够访问作者已开立好的 demo。其余,上述全部代码能够在 Github repo 找到。

小编清楚用在此案例中的页面比一点也不细略,但您的离线页面则决意于你自身!借令你想浓郁该案例的剧情,你可认为离线页面增多缓存破坏( cache busting卡塔 尔(阿拉伯语:قطر‎,如: 此案例。

拓宽阅读

除此以外,还会有多少个很棒的离线作用案例。如:Guardian 营造了三个独具 crossword puzzle(填字游戏卡塔尔的离线 web 页面 – 由此,尽管等待互联网重连时(即已在离线状态下卡塔尔,也能找到一点乐趣。笔者也推荐看看 Google Chrome Github repo,它蕴涵了许多见仁见智的 Service Worker 案例 – 个中生机勃勃部分选用案例也在此!

但是,若是你想跳过上述代码,只是想差不离地通过叁个库来拍卖相关操作,那么本人推荐您看看 UpUp。那是三个轻量的剧本,能令你更自在地行使离线功用。

打赏帮忙自身翻译越来越多好小说,多谢!

打赏译者

打赏协理自个儿翻译越多好文章,感谢!

任选大器晚成种支付办法

图片 4 图片 5

1 赞 3 收藏 1 评论

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

图片 6

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

图片 7

本文由王中王鉄算盘开奖结果发布于品牌动态,转载请注明出处:创建一个非常简单的离线页面

关键词: