迈向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,也便是离线技巧。能够让顾客在未曾网络连接的时候还是能够动用一些服务。那几个力量使用了ServiceWorker技巧。

落实思路便是,利用service worker,另起贰个线程,用来监听全部网络央求,讲曾经号令过的多少放入cache,在断网的景观下,直接取用cache里面的财富。为号召过的页面和图纸,显示三个暗许值。当有网络的时候,再另行从服务器更新。
图片 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 页面会展现出相通以下的从头到尾的经过:

图片 2

那是后生可畏对意气风发令人黯然的心得!幸运的是,web 开垦者们能经过某个新本性来改进那类的客商体验。作者多年来一贯在折腾 ServiceWorkers,它给 web 带给的数不完恐怕性总能给自家惊奇。Service Workers 的可观特质之一是同意你检验网络央浼的气象,并令你作出相应的响应。

在这里篇随笔里,作者希图用此性格检查客商的脚下互连网连接情况,如果没连接则赶回二个超级级轻松的离线页面。就算那是二个特别基本功的案例,但它能给您带给启迪,令你领悟运营并运营该性子是多么的简约!如若你没驾驭过 Service Worker,我建议您看看此 Github repo,驾驭更加的多相关的新闻。

在这里案例开始前,让大家先轻松地探访它的做事流程:

  1. 在客商第一回访问我们的页面时,大家会设置 ServiceWorker,并向浏览器的缓存增多我们的离线 HTML 页面
  2. 接下来,要是客商希图导航到另一个 web 页面(同七个网址下),但那时已断网,那么我们将回来已被缓存的离线 HTML 页面
  3. 不过,假设客商筹算导航到其余一个 web 页面,而那个时候网络已连接,则能照常浏览页面

关于PWA

PWA(Progressive Web App), 即渐进式web应用。PWA本质上是web应用,指标是经过多项新才能,在广元、品质、体验等地点给客户原生应用的心得。并且没有供给像原生应用那样繁琐的下载、安装、晋级等操作。

那边解释下概念中的“渐进式”,意思是其生机勃勃web应用还在不停地前行中。因为脚下来说,PWA还从未成熟到一举成功的品位,想在平安、质量、体验上达到原生应用的效用仍有那多少个的升官空间的。一方面是创设PWA的老本难点,另一面是现阶段各大浏览器、安卓和IOS系统对于PWA的辅助和包容性还应该有待抓牢。

本文笔者将从网址缓存、http央浼拦截、推送到主屏等效率,结合实例操作,一步步引领大家一点也不慢玩转PWA技巧。

离线有缓存意况

图片 3

让咱们开始吧

假若你有以下 HTML 页面。那固然拾贰分功底,但能给你完整思路。

XHTML

<!DOCTYPE html>

1
<!DOCTYPE html>

继之,让大家在页面里登记 Service Worker,这里仅创制了该目的。向正要的 HTML 里增添以下代码。

JavaScript

<script> // Register the service worker // 注册 service worker if ('serviceWorker' in navigator卡塔尔(英语:State of Qatar) { 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卡塔尔(英语: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>

下一场,大家需求创建 瑟维斯 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 时,向缓存增添了离线页面。假若大家将代码分为几小块,可看出前几行代码中,我为离线页面钦命了缓存版本和UEvoqueL。倘令你的缓存有两样版本,那么您只需修正版本号就能够轻易地撤消缓存。在大概在第 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'卡塔尔卡塔尔(英语:State of Qatar)卡塔尔(قطر‎ { 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卡塔尔(英语:State of Qatar).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 访谈网络)

图片 4

倘使你刷新页面,你应该能来占星应的离线页面!

图片 5

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

自己理解用在那案例中的页面相当粗略,但您的离线页面则在于你和睦!借让你想深远该案例的剧情,你可感到离线页面增添缓存破坏( cache busting),如: 此案例。

Service Worker

ServiceWorker是PWA的主题本事,它能够为web应用提供离线缓存成效,当然不仅仅如此,上边列举了某些ServiceWorker的性状:

依照HTTPS 景况,那是营造PWA的硬性前提。(LAMP碰到网址晋级HTTPS应用方案)

是多个独自的 worker 线程,独立于当下网页进度,有投机独立的 worker context

可阻止HTTP央求和响应,可缓存文件,缓存的文本可以在互联网离线状态时取到

能向顾客端推送音讯

无法一贯操作 DOM

异步完毕,内部大都是透过 Promise 完毕