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

利用 Service worker 创建一个非常简单的离线页面

选用 瑟维斯 worker 制造多个特简单的离线页面

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

本文由 伯乐在线 - 刘健超-J.c 翻译,艾凌风 校稿。未经许可,禁绝转发!
日文出处:Dean Hume。招待参与翻译组。

让大家想像以下场景:大家那儿在一辆通往农村的高铁上,用移动设备看着一篇很棒的小说。与此同有时间,当您点击“查看更加多”的链接时,高铁忽然步入了隧道,导致运动器械失去了互联网,而 web 页面会展现出类似以下的内容:

图片 1

那是卓越令人消沉的体会!幸运的是,web 开垦者们能透过有个别新本性来立异那类的顾客体验。笔者近年来直接在折腾 ServiceWorkers,它给 web 带来的数不尽只怕性总能给自个儿欢乐。Service Workers 的能够特质之一是同意你检查实验网络央求的景色,并令你作出相应的响应。

在此篇小说里,笔者计划用此性子检查顾客的当前网络连接处境,若是没连接则赶回三个最棒轻易的离线页面。固然那是叁个不胜基础的案例,但它能给您带来启迪,令你精通运维并运转该特性是何等的粗略!若是您没领会过 Service 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('瑟维斯Worker 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 时,向缓存增加了离线页面。借使我们将代码分为几小块,可阅览前几行代码中,作者为离线页面内定了缓存版本和UMuranoL。假诺你的缓存有两样版本,那么您只需立异版本号就可以简单地铲除缓存。在大致在第 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 访谈互联网)

图片 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

本文由新浦京娱乐场官网-301net-新浦京娱乐www.301net发布于www.301net,转载请注明出处:利用 Service worker 创建一个非常简单的离线页面

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