来自 Web前端 2019-11-08 19:25 的文章
当前位置: 澳门三合彩票 > Web前端 > 正文

本着差别的言语都有生龙活虎对优良的静态blog系

动用 Service 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 页面,而那时互联网已连接,则能照常浏览页面

应用瑟维斯 worker完毕加速/离线访谈静态blog网址

2017/02/19 · JavaScript · Service Worker

初稿出处: Yang Bo   

方今相当的火基于Github page和markdown的静态blog,特别契合技巧的思考和习于旧贯,针对分化的语言都有局部绝妙的静态blog系统现身,如Jekyll/Ruby,Pelican/Python,Hexo/NodeJs,由于静态内容的性状特别相符做缓存来加速页面包车型地铁走访,就应用Service worker来贯彻加速,结果是除了PageSpeed,CDN这几个科学普及的服务器和网络加速之外,通过客商端实现了更加好的拜望体验。

连不上网?United Kingdom卫报的个性离线页面是那样做的

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

本文由 伯乐在线 - Erucy 翻译,weavewillg 校稿。未经许可,幸免转载!
斯洛伐克语出处:Oliver Ash。应接参加翻译组。

大家是何等运用 service worker 来为 theguardian.com 构建二个自定义的离线页面。

澳门三合彩票 2

theguardian.com 的离线页面。插图:奥利弗 Ash

您正在朝着公司途中的大巴里,在手提式有线电话机上开辟了 Guardian 应用。大巴被隧道包围着,可是那几个动用可以正常运营,就算未有网络连接,你也能获得完全的效果,除了展示的原委也有一点点旧。假如您品尝在网址上也那样干,缺憾它完全无法加载:

澳门三合彩票 3

安卓版 Chrome 的离线页面

Chrome 中的这几个彩蛋,超多人都不知道》

Chrome 在离线页面上有个暗藏的游乐(桌面版上按空格键,手提式有线电话机版上点击那只恐龙卡塔尔国,那有个别能缓解一点您的抑郁。可是大家得以做得更加好。

Service workers 允许网址作者拦截自个儿站点的保有网络需要,那也就代表我们能够提供周详的离线体验,就如原生应用相近。在 Guardian 网址,大家方今上线了二个自定义的离线体验效果。当客户离线的时候,他们探问到四个富含Guardian 标记的页面,下边带有叁个粗略的离线提醒,还应该有三个填字游戏,他们能够在守候互连网连接的时候玩玩那一个找点乐子。那篇博客解释了大家是何许营造它的,可是在起来从前,你能够先本身尝试看。

让大家开端吧

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

然后,大家供给创设 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 时,向缓存增加了离线页面。假若大家将代码分为几小块,可见到前几行代码中,我为离线页面钦赐了缓存版本和UWranglerL。要是您的缓存有两样版本,那么你只需改革版本号就能够不难地消释缓存。在大致在第 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 采访互联网卡塔 尔(英语:State of Qatar)

澳门三合彩票 4

只要你刷新页面,你应该能来六柱预测应的离线页面!

澳门三合彩票 5

要是您只想大约地质度量试该效用而不想写任何代码,那么您能够访谈笔者已开立好的 demo。其余,上述全数代码能够在 Github repo 找到。

自家晓得用在那案例中的页面相当粗略,但您的离线页面则在于你协和!要是你想深切该案例的剧情,你可感到离线页面增加缓存破坏( cache busting卡塔 尔(阿拉伯语:قطر‎,如: 此案例。

增长速度/离线访谈只需三步

  • 首页增添注册代码

JavaScript

<script> if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js'); } </script>

1
2
3
4
5
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js');
}
</script>
  • 复制代码

将保留到您的网址根目录下

  • 改革不缓存域名列表及离线状态页面

在你的sw.js中修改

JavaScript

const ignoreFetch = [ /https?://cdn.bootcss.com//, /https?://static.duoshuo.com//, /https?://www.google-analytics.com//, /https?://dn-lbstatics.qbox.me//, ];

1
2
3
4
5
6
const ignoreFetch = [
  /https?://cdn.bootcss.com//,
  /https?://static.duoshuo.com//,
  /https?://www.google-analytics.com//,
  /https?://dn-lbstatics.qbox.me//,
];

打开Chrome Dev Tools->Source,看看自身的blog都引用了如何第三方能源,每个加到忽视列表里。

澳门三合彩票 6

在根目录下增加offline.html,在未曾互连网且缓存中也从没时接收,效果如下:

澳门三合彩票 7

在根目录下增加offline.svg,在无网络时图片财富乞请再次回到该文件。

试试看

你须求二个支撑 Service Worker 和 fetch API 的浏览器。结束到本文编写时唯有Chrome(手机版和桌面版卡塔 尔(阿拉伯语:قطر‎同有时间援助那三种 API(译者注:Opera 近期也支撑这两个卡塔 尔(阿拉伯语:قطر‎,可是 Firefox 非常快就要帮助了(在每一日更新的本子中早已支撑了卡塔尔,除此而外 Safari 之外的保有浏览器也都在索求。其它,service worker 只可以登记在运用了 HTTPS 的网址上,theguardian.com 已经发轫逐年搬迁到 HTTPS,所以我们只幸亏网址的 HTTPS 部分提供离线体验。就当下来说,大家接受了 开荒者博客 作为大家用来测量试验的地点。所以要是您是在我们网址的 开荒者博客 部分阅读那篇文章的话,很幸运。

当你使用协助的浏览器访问大家的 开荒者博客 中的页面包车型地铁时候,一切就希图安妥了。断开你的互联网连接,然后刷新一下页面。借让你和谐没规范尝试的话,能够看一下这段 示范摄像(译者注:需梯子)。

澳门三合彩票,张开阅读

其它,还恐怕有几个很棒的离线作用案例。如:Guardian 营造了二个全数 crossword puzzle(填字游戏卡塔 尔(阿拉伯语:قطر‎的离线 web 页面 – 因而,纵然等待互连网重连时(即已在离线状态下卡塔尔,也能找到一点野趣。作者也引入看看 Google Chrome Github repo,它含有了大多不等的 瑟维斯 Worker 案例 – 此中有的行使案例也在这里!

可是,假设您想跳过上述代码,只是想差相当的少地因而七个库来管理有关操作,那么本身推荐你看看 UpUp。那是一个轻量的脚本,能让您更自在地接受离线效用。

打赏扶植自个儿翻译更加多好小说,多谢!

打赏译者

加紧效果

首页加快后,互联网哀告从16降为1,加载时间从2.296s降为0.654s,获得了弹指间加载的结果。

澳门三合彩票 8

基于webpagetest

查看测量检验结果

职业原理

透过大器晚成段简单的 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 功效(用于转移网络央浼卡塔 尔(英语:State of Qatar),如下所示:

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 很感兴趣,想要领悟更多内容的话,开拓者 MattGaunt(Chrome的赤胆忠心协理者卡塔 尔(阿拉伯语:قطر‎写了生龙活虎篇尤其详实地 介绍 Service Worker的文章。

打赏扶持自个儿翻译更加多好作品,感谢!

打赏译者

打赏帮衬笔者翻译越多好小说,谢谢!

任选后生可畏种支付办法

澳门三合彩票 9 澳门三合彩票 10

1 赞 3 收藏 1 评论

加紧/离线原理研究

打赏扶持笔者翻译越多好小说,谢谢!

澳门三合彩票 11

1 赞 收藏 评论

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

澳门三合彩票 12

前端,在路上... 个人主页 · 我的稿子 · 19 ·     

澳门三合彩票 13

什么是 Service worker

澳门三合彩票 14

如上图,Service worker 是风度翩翩种由Javascript编写的浏览器端代理脚本,位于你的浏览器和服务器之间。当叁个页面注册了三个 Service worker,它就足以注册生龙活虎多级事件微处理机来响应如互连网哀告和音信推送那些事件。Service worker 能够被用来管理缓存,当响应一个网络伏乞时得以配备为回去缓存依然从互联网拿到。由于Service worker 是依据事件的,所以它只在拍卖那么些事件的时候被调入内存,不用忧虑常驻内部存款和储蓄器占用能源引致系统变慢。

有关小编:Erucy

澳门三合彩票 15

已经的SharePoint喵星程序员(暂时还挂着微软MVP的名头卡塔 尔(阿拉伯语:قطر‎,未来的Azure/.Net/MongoDB/Cordova/前端工程师,有的时候写小说 个人主页 · 作者的稿子 · 46 ·   

澳门三合彩票 16

Service worker生命周期

澳门三合彩票 17

Service worker 为网页增添一个好像于APP的生命周期,它只会响应系统事件,就算浏览器关闭时操作系统也足以唤起Service worker,那点非常重要,让web app与native app的手艺变得近乎了。

Service worker在Register时会触发Install事件,在Install时得以用来预先获取和缓存应用所需的能源并设置每种文件的缓存战术。

一旦Service worker地处activated状态,就可以完全调控应用的能源,对网络诉求举办自己商议,矫正互连网央求,从互连网上得到并重回内容只怕重回由已设置的Service worker预示获取并缓存好的资源,以至还足以生成内容并重返给互联网语法。

不无的那个都客商都以透明的,事实上,一个设计精美的Service worker就像三个智能缓存系统,坚实了网络和缓存功效,采纳最优办法来响应网络央求,让使用越来越地西泮的运行,固然未有网络也没涉及,因为你能够完全调控网络响应。

Service worker的支配从第三遍页面访谈伊始

在第叁遍加载页面时,全部能源都以从互联网载的,Service worker 在第壹遍加载时不会收获调控网络响应,它只会在世袭访谈页面时起成效。

澳门三合彩票 18

页面第二回加载时做到install,并跻身idle状态。

澳门三合彩票 19

页面第4回加载时,进入activated状态,思忖管理全数的风浪,同时 浏览器会向服务器发送叁个异步 哀告来检查Service worker本身是或不是有新的本子,构成了Service worker的翻新机制。

澳门三合彩票 20

Service worker拍卖完全体的平地风波后,步向idle状态,最后进入terminated状态财富被释放,当有新的风云发生时再度被调用。

本文由澳门三合彩票发布于Web前端,转载请注明出处:本着差别的言语都有生龙活虎对优良的静态blog系

关键词: