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

2017/02/08 · JavaScript
· PWA

本文作者: 伯乐在线 –
pangjian
。未经小编许可,禁止转发!
应接插手伯乐在线 专栏审核人。

Wechat小程序来了,能够采用WEB技巧在Wechat创设二个独具Native应用经验的应用,产业界特别看好这种情势。可是你们也许不知道,谷歌(Google卡塔尔国早就有相符的兼顾,以致等级次序越来越高。那正是PWA(渐进式加强WEB应用卡塔 尔(阿拉伯语:قطر‎。
PWA有以下二种性格:

  • Installablity(可安装性卡塔 尔(英语:State of Qatar)
  • App Shell
  • Offline(离线技术卡塔尔
  • Re-engageable(推送布告才能卡塔尔

负有那几个特点都以“高雅降级、渐进巩固的”,给协助的装置更加好的体验,不援救的配备也不会更差。那就和Wechat小程序这种倒霉设计的根本分化之处。

本博客也在向着PWA的动向迈进,第一步作者选拔了Offline,也正是离线本领。能够让客商在未有网络连接的时候仍能行使一些服务。这一个技能运用了ServiceWorker工夫。

落实思路正是,利用service
worker,另起三个线程,用来监听全数互连网需求,讲曾经呼吁过的数额放入cache,在断网的动静下,间接取用cache里面包车型大巴财富。为号令过的页面和图纸,展现三个私下认可值。当有互连网的时候,再另行从服务器更新。
乐百家loo777 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。

行使 瑟维斯 worker 创设四个非常轻巧的离线页面

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

本文由 伯乐在线 –
刘健超-J.c
翻译,艾凌风
校稿。未经许可,制止转发!
塞尔维亚共和国语出处:Dean
Hume。应接出席翻译组。

让我们想像以下场景:大家那儿在大器晚成辆通往村庄的火车上,用移动设备望着生龙活虎篇很棒的稿子。与此同时,当您点击“查看越多”的链接时,轻轨猛然步向了隧道,招致运动器材失去了网络,而
web 页面会展现出近似以下的源委:

乐百家loo777 2

那是意气风发对大器晚成令人心酸的体验!幸运的是,web
开辟者们能由此一些新特征来改正那类的客商体验。小编近年从来在折腾 ServiceWorkers,它给 web 带给的成千上万大概性总能给自个儿欣喜。Service Workers
的绝妙特质之一是同意你检验互联网要求的情景,并让你作出相应的响应。

在这里篇小说里,作者策画用此天性检查顾客的脚下网络连接情况,要是没连接则赶回多个至上简单的离线页面。即使那是叁个要命根底的案例,但它能给您带给启发,让您掌握运营并运转该天性是何其的简便!假如您没通晓过
Service Worker,作者建议您看看此 Github
repo,理解越来越多相关的消息。

在那案例开头前,让我们先简单地拜候它的专门的学业流程:

  1. 在顾客第叁回访问大家的页面时,我们会安装 ServiceWorker,并向浏览器的缓存加多大家的离线 HTML 页面
  2. 下一场,假如客户打算导航到另一个 web
    页面(同三个网址下卡塔 尔(阿拉伯语:قطر‎,但此刻已断网,那么大家将回来已被缓存的离线
    HTML 页面
  3. 不过,要是顾客策画导航到别的三个 web
    页面,而此刻网络已一而再再而三,则能照常浏览页面

关于PWA

PWA(Progressive Web App卡塔 尔(英语:State of Qatar),
即渐进式web应用。PWA本质上是web应用,目标是经过多项新手艺,在安全、品质、体验等方面给客户原生应用的体会。并且无需像原生应用那样烦琐的下载、安装、晋级等操作。

此间解释下概念中的“渐进式”,意思是以此web应用还在相连地开拓进取中。因为前段时间来讲,PWA还尚无成熟到一挥而就的水准,想在平安、质量、体验上达到规定的标准原生应用的效劳照旧有数不尽的升迁空间的。一方面是创设PWA的资金难题,另一面是眼下各大浏览器、安卓和IOS系统对此PWA的支撑和包容性还或然有待抓好。

本文笔者将从网站缓存、http央浼拦截、推送到主屏等成效,结合实例操作,一步步引领大家非常的慢玩转PWA手艺。

离线有缓存情状

乐百家loo777 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([未经作者许可,Worker是PWA的核心技术乐百家loo777。 ‘./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
时,向缓存增加了离线页面。假如大家将代码分为几小块,可见到前几行代码中,我为离线页面钦点了缓存版本和UCR-VL。倘使您的缓存有两样版本,那么你只需立异版本号就可以轻松地消除缓存。在大概在第
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 访谈网络卡塔 尔(英语:State of Qatar)

乐百家loo777 4

借让你刷新页面,你应该能来占卜应的离线页面!

乐百家loo777 5

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

自己领悟用在这里案例中的页面一点也不细略,但您的离线页面则决计于你谐和!即便你想浓重该案例的剧情,你可感觉离线页面增多缓存破坏(
cache busting卡塔 尔(阿拉伯语:قطر‎,如:
此案例。

Service Worker

ServiceWorker是PWA的宗旨技能,它能够为web应用提供离线缓存作用,当然不唯有如此,上边罗列了大器晚成部分ServiceWorker的表征:

据悉HTTPS
意况,那是构建PWA的硬性前提。(LAMP境况网址晋级HTTPS施工方案)

是三个独立的 worker 线程,独立于近来网页进程,有和睦单独的 worker
context

可阻拦HTTP央浼和响应,可缓存文件,缓存的文书可以在网络离线状态时取到

能向客商端推送新闻

无法直接操作 DOM

异步完结,内部大都是经过 Promise 达成

离线无缓存情状

会显得叁个暗中同意的页面

乐百家loo777 6

-EOF-

打赏支持作者写出更加多好文章,多谢!

打赏小编

实行阅读

别的,还也是有几个很棒的离线效用案例。如:Guardian 营造了多个兼有 crossword
puzzle(填字游戏卡塔尔国的离线
web 页面 –
因此,即便等待网络重连时(即已在离线状态下卡塔尔,也能找到一点野趣。笔者也引进看看
Google Chrome Github
repo,它蕴涵了多数两样的
瑟维斯 Worker 案例 – 此中部分使用案例也在此!

唯独,假若你想跳过上述代码,只是想差不离地由此多个库来处理有关操作,那么自身推荐你看看
UpUp。那是二个轻量的剧本,能令你更自在地行使离线功用。

打赏支持自个儿翻译越来越多好小说,感谢!

打赏译者

Service Worker生命周期

serviceworker的行使流程能够省略总括为注册–安装–激活。

挂号其实正是告诉浏览器serviceworkerJS文件贮存在怎么职位,然后浏览器下载、剖判、施行该文件,进而运行安装。这里小编创造贰个app.js文件,注册代码如下,将该文件在网址的head标签里引进。

if (‘serviceWorker’ in navigator) {

window.addEventListener(‘load’, function () {

navigator.serviceWorker.register

.then(function (registration) {

// 注册成功

console.log(‘ServiceWorker registration successful with scope: ‘,
registration.scope);

})

.catch(function {

// 注册失利:(

console.log(‘ServiceWorker registration failed: ‘, err);

});

});

}

当实施serviceworkerJS文件时,首先接触的是install事件,进行安装。安装的进程正是将内定的局地静态能源实行离线缓存。下边是自个儿的sw.js文件中的安装代码:

var CACHE_VERSION = ‘sw_v8’;

var CACHE_FILES = [

‘/js/jquery/min.js’,

‘/js/zui/min.js’,

‘/js/chanzhi.js’,

];

self.addEventListener(‘install’, function {

event.waitUntil(

caches.open(CACHE_VERSION)

.then(cache => cache.addAll(CACHE_FILES)

));

});

当安装成功后,serviceworker就能够激活,这时就能够管理 activate 事件回调
(提供了履新缓存战略的火候)。并能够拍卖作用性的平地风波 fetch 、sync 、push

self.addEventListener(‘activate’, function {

event.waitUntil(

caches.keys().then(function{

return Promise.all(keys.map(function{

if(key !== CACHE_VERSION){

return caches.delete;

}

}));

})

);

});

打赏援助本身写出越来越多好散文,多谢!

任选后生可畏种支付方式

乐百家loo777 7
乐百家loo777 8

1 赞 1 收藏
评论

打赏扶植自身翻译越来越多好文章,多谢!

任选意气风发种支付方式

乐百家loo777 9
乐百家loo777 10

1 赞 3 收藏 1
评论

serviceworker的缓存成效

设置时,serviceworker将大家钦定的静态能源开展缓存,你也许会问,假使是实时的动态内容如何是好,大家不容许预先将有着的文本能源提前线指挥部定好,让serviceworker缓存。那将在涉及serviceworker的遏止HTTP央求响应的性状了。

serviceworker拦截http供给,首先去反省央求的能源在缓存中是还是不是存在,假诺存在,则平昔从缓存中调用,并且即正是无网络状态下,serviceworker也能调用缓存中的能源。若是缓存中并未有乞请的能源,则经过互联网去服务器上寻觅,而且在找到并响适时,serviceworker会将其存入缓存中,以备后一次再央浼时直接从缓存中调用。

乐百家loo777 11serviceworker缓存流程

serviceworker文件中fetch事件代码如下:

self.addEventListener(‘fetch’, function {

event.respondWith(

caches.match(event.request).then(function{

if{

return response;

}

var requestToCache = event.request.clone();

return fetch(requestToCache).then(

function{

if(!response || response.status !== 200){

return response;

}

var responseToCache = response.clone();

caches.open(CACHE_VERSION)

.then(function{

cache.put(requestToCache, responseToCache);

});

return response;

}

);

})

);

});

在网站前台通过浏览器开垦者工具,大家能够看下从缓存中调用财富的意义:

乐百家loo777 12serviceworker缓存调用乐百家loo777 13缓存文件

自己那边操作演示用的是Google浏览器,上面是各大浏览器对于serviceworker的援救情形:

乐百家loo777 14serviceworker浏览器扶植景况

关于笔者:pangjian

乐百家loo777 15

庞健,金融IT男。
个人主页 ·
我的文章 ·
5 ·
  

乐百家loo777 16

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

乐百家loo777 17

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

乐百家loo777 16

丰富到主屏

PWA帮忙将web应用在主屏桌面上增多三个火速形式,以造福顾客快捷访谈,同期晋级web应用重复访谈的可能率。你也许会说,未来活动端上的浏览器作用列表里日常都提供了“加多到桌面”的效果与利益呀,不过PWA与浏览器自带的足够到桌面包车型大巴兑现格局各异。

PWA不要求客商特意去成效列表中运用这么些成效按键,而是在客户访问web应用时,间接在分界面中提示八个增进到主屏桌面的横幅,从web应用角度来说,那实际正是主动与被动的区分。

PWA完成该意义特别轻便,只须要叁个manifest.json文件,文件中客户能够自定义应用的启航页面、模板颜色、Logo等内容。上边是本人的manifest.json文件设置,大家可作参谋:

{

“short_name”: “蝉知财富站”,

“name”: “蝉知财富站”,

“icons”: [

{

“src”: “chanzhiicon.png”,

“type”: “image/png”,

“sizes”: “48×48”

},

{

“src”: “192.png”,

“type”: “image/png”,

“sizes”: “192×192”

},

{

“src”: “512.png”,

“type”: “image/png”,

“sizes”: “512×512”

},

{

“src”: “144.png”,

“type”: “image/png”,

“sizes”: “144×144”

}

],

“start_url”: “/index.html”,

“display”: “standalone”,

“background_color”: “#2196F3”,

“orientation”: “landscape”,

“theme_color”: “#2196F3”

}

亟需提示的是,近日活动端IOS系统的扶助并糟糕,安卓手提式有线电话机上须接纳57本子以上的谷歌(Google)浏览器能够支撑该成效,下边是本身在安卓手提式有线电话机上的操作演示:

乐百家loo777 19累计到主屏

小结

PWA才干正被广泛公司及开荒者们关切,就算眼下各器材的支撑协作有待增长,但那个都正在持续的精雕细刻发展。作者也相信在不久的未来,PWA技能会日渐广泛布满,为大范围公司和顾客带给福利。本文和我们齐声享受了PWA的相关手艺与实例操作,后边还有大概会就音信推送、数据同步等成效做进一层研讨沟通。若是我们在上学PWA的历程中遇见别的标题,迎接一同探究交换。

相关文章