澳门新萄京8522选拔Service worker达成加快/离线访问静态blog网址

澳门新萄京8522选拔Service worker达成加快/离线访问静态blog网址

迈向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里面包车型客车财富。为号令过的页面和图片,展现三个默许值。当有互连网的时候,再重复从服务器更新。
澳门新萄京8522 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 页面会彰显出相符以下的剧情:

澳门新萄京8522 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技艺。

选拔Service 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这个周边的服务器和网络加速之外,通过顾客端达成了越来越好的拜候体验。

离线有缓存景况

澳门新萄京8522 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’卡塔尔(英语:State of Qatar).then(function(registration){ // Registration was successful // 注册成功 console.log(‘ServiceWorker
registration successful with scope: ‘, registration.scope卡塔尔;
}卡塔尔.catch(function(err卡塔尔(英语:State of Qatar) { // 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
      ]);
    })
  );
});

在上头的代码中,大家在设置 瑟维斯 Worker
时,向缓存增多了离线页面。假如我们将代码分为几小块,可见到前几行代码中,我为离线页面钦赐了缓存版本和UKugaL。假设您的缓存有不一致版本,那么你只需修正版本号就能够轻便地消灭缓存。在轮廓在第
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卡塔尔(英语:State of Qatar).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卡塔尔(英语:State of Qatar) { return response || fetch(event.request卡塔尔(英语:State of Qatar); }卡塔尔(قطر‎卡塔尔; } }卡塔尔(قطر‎;

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 访问互连网)

澳门新萄京8522 4

设若你刷新页面,你应该能收占卜应的离线页面!

澳门新萄京8522 5

假设你只想大约地质度量试该意义而不想写任何代码,那么您能够访问作者已成立好的
demo。其它,上述全部代码能够在
Github repo 找到。

自个儿驾驭用在这里案例中的页面相当粗略,但你的离线页面则在于你本人!即便您想浓烈该案例的剧情,你可感觉离线页面增多缓存破坏(
cache busting),如:
此案例。

Service Worker

ServiceWorker是PWA的主题技巧,它亦可为web应用提供离线缓存功效,当然不仅仅如此,上面列举了有个别ServiceWorker的风味:

根据HTTPS
景况,那是创设PWA的硬性前提。(LAMP情状网址进级HTTPS建设方案)

是二个独门的 worker 线程,独立于当下网页进程,有谈得来单独的 worker
context

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

能向顾客端推送音信

不能一向操作 DOM

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

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

  • 首页增加注册代码

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都援引了哪些第三方财富,每个加到忽视列表里。

澳门新萄京8522 6

在根目录下增多offline.html,在未曾互联网且缓存中也远非时选用,效果如下:

澳门新萄京8522 7

在根目录下增多offline.svg,在无网络时图片财富伏乞重临该公文。

离线无缓存意况

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

澳门新萄京8522 8

-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;

}

}));

})

);

});

增长速度效果

首页加快后,网络恳求从16降为1,加载时间从2.296s降为0.654s,获得了一下加载的结果。

澳门新萄京8522 9

基于webpagetest

查看测验结果

打赏扶助本人写出越来越多好随笔,多谢!

任选风华正茂种支付形式

澳门新萄京8522 10
澳门新萄京8522 11

1 赞 1 收藏
评论

打赏扶植笔者翻译更多好随笔,感激!

任选生龙活虎种支付办法

澳门新萄京8522 12
澳门新萄京8522 13

1 赞 3 收藏 1
评论

serviceworker的缓存成效

安装时,serviceworker将大家钦点的静态财富进行缓存,你大概会问,若是是实时的动态内容怎么做,大家不恐怕预先将享有的文本财富提前线指挥部定好,让serviceworker缓存。那将在涉及serviceworker的掣肘HTTP乞求响应的表征了。

serviceworker拦截http伏乞,首先去检查哀告的财富在缓存中是不是留存,借使存在,则间接从缓存中调用,并且即便是无互连网状态下,serviceworker也能调用缓存中的能源。假若缓存中从不须要的财富,则经过互连网去服务器上搜求,并且在找到并响应时,serviceworker会将其存入缓存中,以备后一次再央浼时一向从缓存中调用。

澳门新萄京8522 14serviceworker缓存流程

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;

}

);

})

);

});

在网址前台通过浏览器开垦者工具,我们可以看下从缓存中调用能源的效应:

澳门新萄京8522 15serviceworker缓存调用澳门新萄京8522 16缓存文件

小编那边操作演示用的是Google浏览器,下边是各大浏览器对于serviceworker的支撑意况:

澳门新萄京8522 17serviceworker浏览器帮忙景况

增长速度/离线原理索求

关于作者:pangjian

澳门新萄京8522 18

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

澳门新萄京8522 19

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

澳门新萄京8522 20

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

澳门新萄京8522 19

充裕到主屏

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浏览器能够支撑该意义,上面是本身在安卓手提式无线电话机上的操作演示:

澳门新萄京8522 22增进到主屏

什么是 Service worker

澳门新萄京8522 23

如上图,Service
worker

是后生可畏种由Javascript编写的浏览器端代理脚本,坐落于你的浏览器和服务器之间。当叁个页面注册了二个
Service
worker
,它就足以挂号黄金年代连串事件微型机来响应如互联网央浼和音信推送这么些事件。Service
worker

能够被用来管理缓存,当响应三个网络需要时方可计划为回到缓存依旧从互联网获得。由于Service
worker

是依据事件的,所以它只在拍卖那些事件的时候被调入内部存款和储蓄器,不用忧郁常驻内存占用资源招致系统变慢。

发表评论

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

网站地图xml地图