迈向PWA!利用serviceworker的离线访问模式

2019-11-28 17:32栏目:WRB前端

迈向PWA!利用serviceworker的离线访谈方式

2017/02/08 · JavaScript · PWA

正文笔者: 伯乐在线 - pangjian 。未经作者许可,防止转发!
招待参与伯乐在线 专辑笔者。

Wechat小程序来了,能够动用WEB本事在Wechat营造一个持有Native应用体验的使用,产业界特别看好这种样式。不过你们只怕不亮堂,Google早就有临近的安插性,以致等级次序更加高。那正是PWA(渐进式巩固WEB应用)。
PWA有以下两种特色:

  • Installablity(可安装性)
  • App Shell
  • Offline(离线手艺)
  • Re-engageable(推送布告才能)

具备那几个特色都以“高贵降级、渐进巩固的”,给援救的设施更加好的心得,不协理的设备也不会更差。那就和Wechat小程序这种不良设计的根本差别之处。

本博客也在向着PWA的矛头迈进,第一步笔者接收了Offline,也正是离线工夫。能够让客商在并未有网络连接的时候仍为能够行使一些服务。这么些工夫使用了瑟维斯Worker手艺。

兑现思路就是,利用service worker,另起叁个线程,用来监听全体互联网央求,讲曾经呼吁过的数量归入cache,在断网的情状下,直接取用cache里面包车型客车能源。为号召过的页面和图纸,体现二个暗中认可值。当有互联网的时候,再另行从服务器更新。
澳门威尼斯人app 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。

澳门威尼斯人app,行使 Service worker 创建一个特别轻便的离线页面

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

本文由 伯乐在线 - 刘健超-J.c 翻译,艾凌风 校稿。未经许可,制止转发!
斯拉维尼亚语出处:Dean Hume。款待加入翻译组。

让大家想像以下情形:大家那儿在一辆通往村庄的列车里,用移动设备看着后生可畏篇很棒的篇章。与此同期,当您点击“查看更加的多”的链接时,火车突然步入了隧道,诱致运动道具失去了互联网,而 web 页面会显示出相仿以下的剧情:

澳门威尼斯人app 2

那是一定令人心酸的体会!幸运的是,web 开垦者们能因而一些新特征来改过那类的客商体验。我近年径直在折腾 ServiceWorkers,它给 web 带给的数不胜数恐怕性总能给本身欢腾。Service Workers 的理想特质之一是同意你检查评定网络需要的景况,并令你作出相应的响应。

在此篇文章里,作者筹划用此特性检查客商的近期网络连接处境,假使没连接则赶回叁个特级轻松的离线页面。固然那是叁个十一分基本功的案例,但它能给您带给启迪,让您领悟运营并运维该脾性是何等的简短!借使您没理解过 Service Worker,小编提议您看看此 Github repo,明白越来越多相关的音信。

在该案例开头前,让大家先简单地看看它的行事流程:

  1. 在客商首次访谈大家的页面时,大家会设置 ServiceWorker,并向浏览器的缓存增多我们的离线 HTML 页面
  2. 然后,假设客户希图导航到另四个 web 页面(同三个网址下),但那个时候已断网,那么大家将赶回已被缓存的离线 HTML 页面
  3. 只是,如若客商希图导航到其它二个 web 页面,而此刻互连网已三番若干次,则能照常浏览页面

离线有缓存意况

澳门威尼斯人app 3

让大家初阶吧

后生可畏经你有以下 HTML 页面。那尽管充足根底,但能给你完整思路。

XHTML

<!DOCTYPE html>

1
<!DOCTYPE html>

随后,让大家在页面里登记 瑟维斯 Worker,这里仅创立了该指标。向正要的 HTML 里增加以下代码。

JavaScript

<script> // Register the service worker // 注册 service worker if ('serviceWorker' in navigator卡塔尔国 { navigator.serviceWorker.register('/service-worker.js'卡塔尔(英语:State of Qatar).then(function(registration卡塔尔国{ // Registration was successful // 注册成功 console.log('ServiceWorker registration successful with scope: ', registration.scope卡塔尔; }卡塔尔(英语:State of Qatar).catch(function(err卡塔尔国 { // registration failed :( // 注册失败 :( console.log('ServiceWorker registration failed: ', err卡塔尔(قطر‎; }卡塔尔(英语:State of Qatar); } </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‘。大家盘算用这几个 瑟维斯 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 时,向缓存加多了离线页面。假如大家将代码分为几小块,可以看见到前几行代码中,我为离线页面内定了缓存版本和UCRUISERL。假设你的缓存有两样版本,那么您只需校勘版本号就能够轻便地废除缓存。在大约在第 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卡塔尔(قطر‎; }卡塔尔 卡塔尔(英语:State of Qatar); } 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 访谈互联网)

澳门威尼斯人app 4

就算你刷新页面,你应当能收占星应的离线页面!

澳门威尼斯人app 5

倘使您只想大致地质测量试该意义而不想写任何代码,那么你能够访谈小编已开立好的 demo。其余,上述总体代码能够在 Github repo 找到。

自身掌握用在这里案例中的页面超轻巧,但您的离线页面则在于你和睦!倘若你想深远该案例的始末,你可以为离线页面加多缓存破坏( cache busting),如: 此案例。

离线无缓存情状

会显得四个私下认可的页面

澳门威尼斯人app 6

-EOF-

打赏援助小编写出越来越多好小说,多谢!

打赏作者

扩充阅读

除此以外,还应该有多少个很棒的离线功效案例。如:Guardian 营造了三个享有 crossword puzzle(填字游戏)的离线 web 页面 – 因而,即便等待网络重连时(即已在离线状态下),也能找到一点趣味。我也推荐看看 Google Chrome Github repo,它含有了大多两样的 Service Worker 案例 – 个中有的应用案例也在这里!

唯独,借使您想跳过上述代码,只是想差不离地通过叁个库来管理有关操作,那么自个儿推荐你看看 UpUp。那是三个轻量的剧本,能令你更轻易地应用离线功用。

打赏扶植小编翻译越来越多好随笔,感谢!

打赏译者

打赏扶植本身写出更加多好作品,多谢!

任选生机勃勃种支付格局

澳门威尼斯人app 7 澳门威尼斯人app 8

1 赞 1 收藏 评论

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

任选风华正茂种支付情势

澳门威尼斯人app 9 澳门威尼斯人app 10

1 赞 3 收藏 1 评论

有关小编:pangjian

澳门威尼斯人app 11

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

澳门威尼斯人app 12

关于小编:刘健超-J.c

澳门威尼斯人app 13

前端,在路上... 个人主页 · 我的小说 · 19 ·     

澳门威尼斯人app 14

版权声明:本文由威尼斯人app发布于WRB前端,转载请注明出处:迈向PWA!利用serviceworker的离线访问模式