永利皇宫402创造八个非常简单的离线页面,利用serviceworker的离线访问形式

永利皇宫402

迈向PWA!利用serviceworker的离线访谈情势

2017/02/08 · JavaScript
· PWA

本文我: 伯乐在线 –
pangjian
。未经笔者许可,防止转发!
应接到场伯乐在线 永利皇宫402 ,专辑审核人。

微信小程序来了,能够运用WEB技巧在微信创设三个具有Native应用经验的利用,产业界非常看好这种样式。不过你们恐怕不知道,谷歌早就有周边的陈设性,甚至档次更加高。那就是PWA(渐进式加强WEB应用)。
PWA有以下两种天性:

  • Installablity(可安装性)
  • App Shell
  • Offline(离线才具)
  • Re-engageable(推送通告技术)

怀有那些特点都以“高雅降级、渐进巩固的”,给协理的配备更加好的心得,不帮忙的设备也不会更差。那就和微信小程序这种蹩脚设计的常常有区别之处。

本博客也在向着PWA的趋向迈进,第一步作者选取了Offline,也正是离线技巧。能够让客商在并未网络连接的时候还是能接收部分服务。这几个力量运用了ServiceWorker技能。

兑现思路正是,利用service
worker,另起二个线程,用来监听所有互联网必要,讲曾经倡议过的数据归入cache,在断网的情形下,直接取用cache里面包车型大巴财富。为倡议过的页面和图表,体现二个暗中认可值。当有互联网的时候,再重新从服务器更新。
永利皇宫402 1
代码这里就不贴了,未来或然会专程写一篇来详细介绍ServiceWorker,风野趣的能够一贯参照他事他说加以调查源码。
登记起来也至极常有补助

JavaScript

// ServiceWorker_js (function() { ‘use strict’;
navigator.serviceWorker.register(‘/sw.js’, {scope:
‘/’}).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); }); })();

1
2
3
4
5
6
7
8
9
10
11
12
// ServiceWorker_js
(function() {
    ‘use strict’;
    navigator.serviceWorker.register(‘/sw.js’, {scope: ‘/’}).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);
    });
 
})();

此处要求在乎的是,sw.js所在的目录要超过它的主宰范围,也等于scope。我把sw.js身处了根目录来调控总体目录。

接下去看看大家的终极效果呢,你也能够在大团结的浏览器下断网尝试一下。当然有局地浏览器前段时间还不扶持,譬喻盛名的Safari。

行使 Service worker 成立多个特别轻易的离线页面

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

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

让我们想像以下情状:大家那儿在生龙活虎辆通往村落的列车的里面,用运动器材望着风流罗曼蒂克篇很棒的稿子。与此同有时间,当你点击“查看更加多”的链接时,高铁突然步向了隧道,导致移动器材失去了互连网,而
web 页面会展现出相符以下的内容:

永利皇宫402 2

那是分外令人寒心的经验!幸运的是,web
开拓者们能经过一些新特点来纠正那类的顾客体验。作者多年来直接在折腾 ServiceWorkers,它给 web 带来的数不清可能性总能给自家欣喜。瑟维斯 Workers
的绝妙特质之一是同意你检查实验网络诉求的光景,并让您作出相应的响应。

在这里篇著作里,笔者准备用此天性检查顾客的脚下互连网连接情形,借使没连接则赶回二个拔尖简单的离线页面。就算那是三个可怜基础的案例,但它能给您带来启发,让您领会运维并运营该脾气是多么的精简!假诺您没精晓过
Service Worker,作者建议你看看此 Github
repo,精晓越来越多相关的音信。

在该案例先导前,让我们先轻巧地拜谒它的做事流程:

  1. 在客商第叁次访谈大家的页面时,大家会安装 ServiceWorker,并向浏览器的缓存增多大家的离线 HTML 页面
  2. 接下来,要是客户准备导航到另一个 web
    页面(同叁个网址下),但此刻已断网,那么大家将回到已被缓存的离线
    HTML 页面
  3. 不过,假若顾客筹划导航到其余叁个 web
    页面,而此刻网络已三翻五次,则能照常浏览页面

离线有缓存情形

永利皇宫402 3

让大家早先吧

假设你有以下 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
时,向缓存增加了离线页面。借使我们将代码分为几小块,可寓方今几行代码中,我为离线页面钦定了缓存版本和URAV4L。假设您的缓存有两样版本,那么您只需改革版本号就能够轻松地排除缓存。在大约在第
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 访谈网络)

永利皇宫402 4

要是你刷新页面,你应当能看到相应的离线页面!

永利皇宫402 5

风姿罗曼蒂克旦你只想差不离地质衡量试该意义而不想写任何代码,那么您能够访谈笔者已成立好的
demo。此外,上述任何代码能够在
Github repo 找到。

自个儿精晓用在这里案例中的页面很粗大略,但你的离线页面则决定于你和煦!要是您想深切该案例的内容,你可认为离线页面增添缓存破坏(
cache busting),如:
此案例。

离线无缓存情状

会显得贰个暗中认可的页面

永利皇宫402 6

-EOF-

打赏扶助自己写出更加多好小说,谢谢!

打赏作者

开展阅读

此外,还或者有多少个很棒的离线功效案例。如:Guardian 构建了一个富有 crossword
puzzle(填字游戏)的离线
web 页面 –
由此,就算等待网络重连时(即已在离线状态下),也能找到一点野趣。作者也引入看看
Google Chrome Github
repo,它包涵了众多两样的
Service Worker 案例 – 此中风流罗曼蒂克部分行使案例也在这里!

不过,假让你想跳过上述代码,只是想差不离地通过叁个库来管理有关操作,那么本人推荐您看看
UpUp。那是一个轻量的本子,能令你更轻易地行使离线功能。

打赏扶植自个儿翻译更多好随笔,谢谢!

打赏译者

打赏帮忙笔者写出更加多好文章,感激!

任选大器晚成种支付办法

永利皇宫402 7
永利皇宫402 8

1 赞 1 收藏
评论

打赏帮助自身翻译更加多好文章,感谢!

任选生龙活虎种支付办法

永利皇宫402 9
永利皇宫402 10

1 赞 3 收藏 1
评论

有关小编:pangjian

永利皇宫402 11

庞健,金融IT男。
个人主页 ·
小编的篇章 ·
5 ·
  

永利皇宫402 12

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

永利皇宫402 13

前端,在路上…
个人主页 ·
笔者的稿子 ·
19 ·
    

永利皇宫402 12

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图