采取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这个周边的服务器和网络加速之外,通过客户端完成了更好的拜会体验。

选择 Service worker 成立三个十分不难的离线页面

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

本文由 伯乐在线 –
刘健超-J.c
翻译,艾凌风
校稿。未经许可,禁止转发!
英文出处:Dean
Hume。欢迎参预翻译组。

让大家想像以下场景:我们那儿在一辆通往农村的高铁上,用移动设备望着一篇很棒的文章。与此同时,当您点击“查看越多”的链接时,高铁忽然进入了隧道,导致运动装备失去了网络,而
web 页面会突显出类似以下的内容:

图片 1

那是一对一令人消沉的体会!幸运的是,web
开发者们能透过一些新特色来改正这类的用户体验。小编多年来一直在折腾 ServiceWorkers,它给 web 带来的无尽或者性总能给自个儿惊喜。Service Workers
的能够特质之一是允许你检查和测试互联网请求的地方,并让您作出相应的响应。

在那篇文章里,笔者打算用此个性检查用户的最近网络连接情形,假如没连接则赶回二个最佳简单的离线页面。固然那是3个那一个基础的案例,但它能给你带来启迪,让您知道运行并运营该特性是何等的大约!假诺您没通晓过
Service Worker,小编提出您看看此 Github
repo,驾驭更加多相关的音讯。

在此案例早先前,让大家先不难地看望它的工作流程:

  1. 在用户第二遍访问大家的页面时,大家会安装 ServiceWorker,并向浏览器的缓存添加大家的离线 HTML 页面
  2. 然后,固然用户打算导航到另四个 web
    页面(同二个网站下),但此时已断网,那么大家将回来已被缓存的离线
    HTML 页面
  3. 不过,假诺用户打算导航到别的叁个 web
    页面,而这时候网络已接连,则能照常浏览页面

Varnish 的部分特征:

这是一篇关于 <u>怎样加速网站访问速度</u> 的译文,原来的书文出自
雅虎开发者网站,原标题为
Best Practices for Speeding Up Your Web
Site。

加快/离线访问只需三步

  • 首页添加注册代码

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\4的网站静态加速,worker实现加速。//,
/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都引用了什么第一方能源,每一个加到忽略列表里。

图片 2

在根目录下添加offline.html,在并未互连网且缓存中也不曾时选取,效果如下:

图片 3

在根目录下添加offline.svg,在无网络时图片能源请求重返该公文。

让我们初叶吧

若果你有以下 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(‘瑟维斯Worker 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
时,向缓存添加了离线页面。如若我们将代码分为几小块,可知到前几行代码中,笔者为离线页面钦命了缓存版本和USportageL。若是您的缓存有两样版本,那么你只需立异版本号即可不难地排除缓存。在大体在第贰2
行代码,作者向那些离线页面及其财富(如:图片)发出请求。在得到成功的响应后,大家将离线页面和连锁能源充分到缓存。

现行反革命,离线页面已存进缓存了,大家可在必要的时等候检查索它。在同1个 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
内置的开发者工具。首先,导航到你的页面,然后假诺设置上了 瑟维斯Worker,就打开 Network 标签并将节流(throttling)改为
Offline。(译者注:若将节流设置为 Offline
没效果,则可透过关闭互联网或许经过360康宁警卫禁止 Chrome 访问网络)

图片 4

比方您刷新页面,你应有能见到相应的离线页面!

图片 5

若果您只想大约地质度量试该功用而不想写任何代码,那么你能够访问作者已开立好的
demo。此外,上述总体代码能够在
Github repo 找到。

本身明白用在此案例中的页面非常的粗略,但你的离线页面则取决于你自个儿!固然您想深远该案例的剧情,你能够为离线页面添加缓存破坏(
cache busting),如:
此案例。

(1)、是基于内部存款和储蓄器缓存,重启后数据将消失;

以下为译文:

加紧效果

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

图片 6

基于webpagetest

查看测试结果

举办阅读

其余,还有多少个很棒的离线成效案例。如:Guardian 营造了三个颇具 crossword
puzzle(填字游戏)的离线
web 页面 –
因而,就算等待互联网重连时(即已在离线状态下),也能找到一点乐趣。作者也引进看看
Google Chrome Github
repo,它含有了重重两样的
瑟维斯 Worker 案例 – 个中有的运用案例也在那!

然则,固然你想跳过上述代码,只是想大概地经过二个库来处理有关操作,那么自身推荐你看看
UpUp。那是1个轻量的剧本,能让你更轻松地使用离线作用。

打赏帮助我翻译越多好小说,多谢!

打赏译者

(2)、利用虚拟内部存款和储蓄器方式,I/O 品质好;


增加速度/离线原理探索

打赏支持笔者翻译愈多好文章,感激!

任选一种支付办法

图片 7
图片 8

1 赞 3 收藏 1
评论

(3)、扶助设置 0~60 秒内的纯粹缓存时间;

加快网站访问的特级实践

典型的绩效共青团和少先队曾经分明了部分使网页快速的超级做法。该清单包蕴分为七个类其余三二十个最佳做法。


什么是 Service worker

图片 9

如上图,Service
worker

是一种由Javascript编写的浏览器端代理脚本,位于你的浏览器和服务器之间。当二个页面注册了多少个
Service
worker
,它就足以登记一多重事件处理器来响应如网络请求和新闻推送这么些事件。Service
worker

可以被用来管理缓存,当响应二个互联网请求时方可配备为回到缓存还是从互连网获取。由于Service
worker

是根据事件的,所以它只在处理那个事件的时候被调入内部存储器,不用顾虑常驻内部存款和储蓄器占用财富导致系统变慢。

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

图片 10

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

图片 11

(4)、VCL 配置管理比较灵敏;

Content

  1. 最小化 HTTP 请求
    最后用户响应时间的80%用来前端。超越二分之一小时都是下载页面中的全体组件:图像,样式表,脚本,Flash等。收缩组件数量又回落了表现页面所需的HTTP请求数量。那是更快页面包车型地铁重要。

削减页面中组件数量的一种方法是简化页面包车型大巴陈设性。不过,有没有艺术营造更增进内容的页面,同时也能落到实处高效的响应时间?以下是减掉HTTP请求数量的片段技术,同时依旧支撑添加的页面设计。

整合文件
是通过将富有脚本组合到单个脚本中以及将具备CSS组合到单个样式表中的法门来收缩HTTP请求的多少。当脚本和样式表从页到页不一致时,组合文件更具挑战性,但使那有的版本进度可以改正响应时间。

CSS
Sprites
是减掉图像请求数量的首要接纳办法。将您的背景图像合并为二个图像,并运用CSS
background-imagebackground-position 属性来呈现所需的图像段。

图像影象将七个图像组合成单个图像。总体大小大概相同,但压缩HTTP请求数量会加速页面速度。假诺图像在页面中是连接的,则图像投射只可以工作,例如导航栏。定义图像投射的坐标可能很麻烦,简单失误。

采取导航空图像投射也不足访问,因而不推荐使用。
内联图像
使用data:URL方案将图像数据嵌入到实在页面中。那可以扩展HTML文书档案的深浅。将内联图像组合到(缓存)样式表中是减掉HTTP请求并制止扩张页面大小的一种方法。全数主流浏览器都不援救内联图片。

减掉页面中HTTP请求的数据是开头的地点。那是增强第一遍访问者效率的最重庆大学的引导方针。如Tenni
Theurer的博客小说中所述浏览器缓存使用 –
暴光!,您网站的每一日访问者中有40-60%的空域缓存。

使您的页面一点也不慢为这几个率先次访问者是更好的用户体验的重要。

  1. 减少DNS查询
    域名种类(DNS)将主机名映射到IP地址,仿佛电话簿将人口姓名映射到他们的电话号码一样。当你在浏览器中输入www.yahoo.com时,浏览器联系的DNS解析器会回到该服务器的IP地址。DNS有3个财力。DNS平常供给20-120阿秒来探寻给定主机名的IP地址。在做到DNS查找在此之前,浏览器不能够从此主机名下载任何内容。
    缓存DNS查找以拿到更好的性子。那种缓存能够在由用户的ISP或局域网维护的超过常规规缓存服务器上产生,不过也设有在个人用户的总括机上发生的缓存。DNS音信保存在操作系统的DNS缓存(Microsoft
    Windows中的“DNS客户端服务”)中。大部分浏览器都有协调的缓存,与操作系统的缓存分开。只要浏览器将DNS记录保留在投机的缓存中,就不会对操作系统造成记录请求的劳动。
    私下认可景况下,Internet Explorer会缓存DNS查找二14分钟,由
    DnsCacheTimeout注册表设置内定。Firefox缓存DNS查找1分钟,由network.dnsCacheExpiration配置安装控制。(法斯特erfox将其改变为1钟头。)
    当客户端的DNS缓存为空(对于浏览器和操作系统)时,DNS查找的数码相当网页中绝无仅有主机名的数额。那包含在页面包车型大巴UCRUISERL,图像,脚本文件,样式表,Flash对象等中应用的主机名。收缩唯一主机名的多寡缩减了DNS查找的数据。
    削减唯一主机名的多少有只怕回落页面中产生的竞相下载量。制止DNS查找减少响应时间,但减弱并行下载可能会扩张响应时间。作者的规则是将那个组件分成至少五个但不抢先三个主机名。那导致收缩DNS查找并允许高度并行下载之间的优质折中。

  2. 幸免重定向
    应用301和302状态代码完结重定向。以下是301响应中HTTP头的演示:

HTTP/1.1 301 Moved Permanently
Location: http://example.com/newuri
Content-Type: text/html

浏览器自动将用户带到该Location字段中钦定的UHavalL。重定向所需的保有音信都在头文件中。响应的躯体一般是空的。就算她们的名字,在实践中也不会缓存301和302的响应,除非额外的题目,例如
Expires或者Cache-Control注明它应该是。元刷新标签和JavaScript是将用户引导到此外U卡宴L的别的格局,但借使非得实施重定向,首要选拔技术是运用正规的3xx
HTTP状态代码,首即便为着保险后退按钮不荒谬办事。

要切记的是重定向会减慢用户体验。在用户和HTML文书档案之间插入重定向会延迟页面中的全数情节,因为页面中的任何内容都无法被渲染,并且在HTML文书档案到达在此以前不会起首下载任何组件。

最浪费的重定向之一是一再发生的,Web开发人士常常不会意识到这或多或少。当UXC90L中不够尾部斜线(/)时,会时有产生那种景色,不然应当有三个。
例如,去
http://astrology.yahoo.com/astrology
得到四个暗含重定向到
http://astrology.yahoo.com/astrology/
(注意添加的尾部斜杠)的301响应。假诺您使用Apache处理程序,则选择Aliasormod_rewriteor
DirectorySlash指令在Apache中开始展览修补。

将旧网站接连到新的网站是重定向的另一个广阔用途。其余包涵连日来网站的两样部分,并遵照一些标准(浏览器类型,用户帐户类型等)教导用户。使用重定向连接多个网站非常粗大略,只需求很少的增大编码。就算在那些情形下选取重定向会下落开发人士的扑朔迷离,但会下降用户体验。那种利用重定向的替代方案包涵动用Aliasmod_rewrite即便多个代码路径托管在相同台服务器上。如若域名变化是行使重定向的因由,一种替代格局是开创三个CNAME与整合(即建立了一个从域名指向另一个小名DNS记录)Aliasmod_rewrite

  1. 使用 Ajax Cacheable
    Ajax的二个引人注意的益处是它为用户提供及时汇报,因为它从后端Web服务器异步请求音讯。可是,使用Ajax无法有限协助用户不会等待她们等待异步JavaScript和XML响应重回的大拇指。在无数利用中,用户是不是维持等待取决于Ajax的选拔方法。例如,在遵照Web的电子邮件客户端中,用户将不止等待Ajax请求的结果来寻觅与其寻找条件协作的具备电子邮件。主要的是要铭记,“异步”并不意味着“弹指时”。

为了增强品质,主要的是优化这个Ajax响应。进步Ajax品质的最根本的艺术是使响应可缓存,如加上到期或缓存控制头。
一些别样规则也适用于Ajax:

  • Gzip组件
  • 减少DNS查找
  • 缩小JavaScript
  • 制止重定向
  • 配置ETag

我们来看1个例子。
Web 2.0电子邮件客户端恐怕会利用Ajax下载用户的机动完毕地址簿。
设若用户上次采纳电子邮件网络应用程序后用户并未改动她的地址簿,假若Ajax响应得以利用今后的Expires或Cache-Control标头举办缓存,则足以从缓存读取从前的地址簿响应。必须通报浏览器什么时候使用以前缓存的地址簿响应,而不是呼吁新的地址簿响应。那足以透过向地址簿Ajax
U昂科威L添加八个时日戳来表示,例如,用户最终3遍修改她的地方簿&t=1一九〇一41612。假若地址簿自上次下载以来没有被涂改,则时间戳将是一致的,并且地址簿将从浏览器的缓存中读取,从而解除额外的HTTP往返。

便是你的Ajax响应是动态成立的,并且只怕仅适用于单个用户,但仍可缓存它们。那样做会使你的Web
2.0应用程序更快。

  1. 后负载组件
    您能够仔细看看您的页面,问问自个儿:“为了最初渲染页面相对必要哪些?”
    别的的内容和零部件能够等待。

JavaScript是在onload事件以前和之后拆分的精良候选者。
诸如,假诺你有JavaScript代码和库举行拖放和动画片,那么能够等待,因为在发轫展现之后拖动页面上的因素。
别的寻找候选人实行早先时期加载的地点包涵隐藏的始末(用户操作前边世的始末)以及下方的图像。

帮助你化解难点的工具:YUI Image
Loader允许你将图像延迟到折叠地点,YUI
Get实用程序是1个归纳的形式,可以即时包涵JS和CSS。举个例子,在野外看看
Yahoo!主页与Firebug的网络面板打开了。

当质量指标与别的Web开发最佳实践相平等时,那是很好的。
在这种状态下,渐进增强的想法告诉我们,当JavaScript被扶助时,可以革新用户体验,不过你必须确定保证页面包车型地铁劳作正是没有JavaScript。
故而在规定页面工作符合规律化从此,您能够选用一些后加载脚本来增强它,从而为你提供越来越多铃声和口哨,如拖放和动画片。

  1. 预加载组件
    预加载大概看起来与中期加载相反,但实际具有不一样的对象。通过预加载组件,您可以行使浏览器空闲的时光,并央求以往亟需的组件(如图像,样式和本子)。那样当用户访问下一页时,您能够将多数组件放在缓存中,并且您的页面将为用户加载更快。

实际上有几种类型的预加载:

  • 无偿预 加载 – 一旦加载运行,您就足以一而再领取部分万分的机件。
    自小编批评google.com,精晓哪些请求3个敏感图像的加载。
    以此天使图片不供给在google.com主页上,但在延续的摸索结果页面上是内需的。
  • 有规范的预加载 –
    基于用户操作,您做出有依照的推测,用户在何地下一步,并相应地预加载。在search.yahoo.com上,你能够看看在输入框中输入后,怎么着请求一些附加的零件。
  • 前瞻预加载 – 在起步重新规划在此之前提前预加载。
    不时重复设计后,您会发觉:“新网站很酷,但比原先更慢”。
    题指标一有的大概是用户正在采纳完全缓存访问您的旧站点,但新的站点始终是空缓存体验。您能够在运行重新规划从前先行加载有个别零部件来减轻那种副功能。您的旧网站能够动用浏览器空闲的小时,并恳请新网站将使用的图像和本子
  1. 压缩DOM成分的数额
    复杂的页面意味着越来越多的字节下载,也代表JavaScript中的DOM访问速度较慢。要是你想要添加事件处理程序,例如,就算循环访问500或四千个页面上的DOM成分,这将大有可为。

恢宏的DOM成分也许是一对症状,应该接纳页面包车型客车记号进行核查,而毋庸删除内容。您是还是不是使用嵌套表实行布局?你是还是不是<div>只投入越多的事物来缓解布局难题?或者有更好的和更语义上正确的办法来做你的记号。

对于布局来说,不小的增援是YUI
CSS实用程序:grids.css能够扶持你全部布局,fonts.css和reset.css能够协理你剥离浏览器的暗许格式。那是三个机遇,伊始尤其和考虑你的标记,例如,<div>只有当它有意义的语义,而不是因为它显现2个新的行。

DOM成分的数额很不难测试,只需输入Firebug的控制台:

 document.getElementsByTagName('*').length

DOM元素有稍许?检查别的具有卓绝标记的好像页面。例如,Yahoo!主页是三个13分繁忙的页面,还是低于700个要素(HTML标签)。

  1. 分割跨域的组件
    细分组件允许你最大程度地互相下载。由于DNS查询损失,请确定保证您使用的不当先2-四个域。例如,您能够承接你的HTML和动态内容www.example.org里面分化静电元件static1.example.org和static2.example.org

至于越来越多音信,请参阅Tenni Theurer和Patty
Chi的“最大化拼车车道中的并行下载
”。

  1. 最小化iframe的数量
    iframe允许在父文书档案中插入多个HTML文书档案。精通iframe的工作规律,以便有效的选拔特别关键。
  • <iframe> 优点:
    扶持缓慢的第叁方内容,如徽章和广告
    安全沙箱
    相互下载脚本

  • <iframe> 缺点:
    费用高,固然空白
    截留页面加载
    非语义

  1. 没有404s
    HTTP请求是昂贵的,所以发生HTTP请求并赢得无用的响应(即404 Not
    Found)是截然不须求的,并且会减速用户体验,没有其余功利。

一部分网站有帮带404s“你的意思是X?”,那对用户体验十三分好,但也会浪费服务器能源(如数据库等)。越发不佳的是当链接到外部JavaScript是一无可取的,结果是404.首先,这几个下载将阻止并行下载。接下来,浏览器恐怕会尝试解析404响应体,就像是它是JavaScript代码,试图找到可用的东西。


Service worker生命周期

图片 12

Service
worker

为网页添加三个近乎于APP的生命周期,它只会响应系统事件,固然浏览器关闭时操作系统也得以唤起Service
worker
,那一点12分重要,让web
app与native app的能力变得好像了。

Service
worker
在Register时会触发Install事件,在Install时方可用来预先获取和缓存应用所需的财富并安装每个文件的缓存策略。

一旦Service
worker
远在activated状态,就足以完全控制应用的财富,对互联网请求实行检讨,修改互连网请求,从互联网上获得并赶回内容大概重返由已安装的Service
worker
预示获取并缓存好的财富,甚至还足以生成内容并重返给网络语法。

享有的这个都用户都是透明的,事实上,四个计划精良的Service
worker
就像1个智能缓存系统,抓好了互联网和缓存功效,选取最优办法来响应互联网请求,让动用越来越平静的运营,尽管没有互联网也没涉及,因为您能够完全控制互联网响应。

(5)、33个人机器上缓存文件大小为最大2G;

Server

Service worker的操纵从第②遍页面访问伊始

在第3遍加载页面时,全数能源都以从互连网载的,Service
worker

在第一次加载时不会获得控制互联网响应,它只会在继承访问页面时起效果。

图片 13

页面第一遍加载时成功install,并进入idle状态。

图片 14

页面首回加载时,进入activated状态,准备处理全体的风云,同时
浏览器会向服务器发送1个异步 请求来检查Service
worker
自家是或不是有新的本子,构成了Service
worker
的翻新机制。

图片 15

Service
worker
处理完全部的事件后,进入idle状态,最后进入terminated状态能源被假释,当有新的风浪时有爆发时再也被调用。

(6)、具有强有力的治本效果,例如 top、stat、admin、list 等;

特点

  • 浏览器

谷歌(Google) Chrome,Firefox,Opera以及境内的各样双核浏览器都援救,可是 safari
不帮忙,那么在不帮忙的浏览器里Service
worker
不工作。

  • https

网站必须启用https来保险使用Service
worker
页面包车型地铁安全性,开发时localhost私下认可认为是平安的。

  • non-block

Service
worker

中的 Javascript 代码必须是非阻塞的,因为 localStorage
是阻塞性,所以不应有在 Service Worker 代码中使用 localStorage。

  • 独立的推行环境

Service
worker
运转在祥和的大局环境中,日常也运营在和谐独立的线程中。

  • 尚无绑定到特定页面

service work能操纵它所加载的满贯范围内的能源。

  • 无法操作DOM

跟DOM所处的条件是并行隔绝的。

图片 16

  • 尚未浏览页面时也得以运作

接受系统事件,后台运转

  • 事件驱动,必要时运维,不供给时就终止

按需进行,只在急需时加载到内部存款和储蓄器

  • 可升级

施行时会异步获取最新的本子

(7)、状态机设计巧妙,结构清晰;

完成加快/离线

(8)、利用二叉堆管理缓存文件,达到积极删除指标。

Cache

网页缓存有不少,如HTTP缓存,localStorage,sessionStorage和cacheStorage都足以灵活搭配举办缓存,但操作太繁琐,直接使用更尖端Service
worker

–本文的主人公。

Varnish 的 Storage 格局可分为二种:

添加Service worker入口

在web app的首页添加以下代码

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>

一经浏览器帮助serviceWorker就注册它,不扶助照旧健康浏览,没有Service
worker
所提供的增高功效。

Service worker控制范围:
简单情状下,将sw.js坐落网站的根目录下,那样Service
worker
能够操纵网站有着的页面,,同理,假设把sw.js放在/my-app/sw.js那就是说它不得不控制my-app目录下的页面。
sw.js放在/js/目录呢?更好的目录结构和界定控制呢?
在登记时钦点js地方并安装限制。

JavaScript

navigator.serviceWorker.register(‘/js/sw.js’, {scope:
‘/sw-test/’}).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
navigator.serviceWorker.register(‘/js/sw.js’, {scope: ‘/sw-test/’}).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)、Malloc 通过 malloc 获取内部存款和储蓄器;

Service worker实现

监听多少个事件:

JavaScript

self.addEventListener(‘install’, onInstall);
self.addEventListener(‘fetch’, onFetch);
self.addEventListener(“activate”, onActivate);

1
2
3
self.addEventListener(‘install’, onInstall);
self.addEventListener(‘fetch’, onFetch);
self.addEventListener("activate", onActivate);

2)、Mmap file 创建大文件,通过二分法分段映射成 1G 以内的大块。

install

JavaScript

////////// // Install ////////// function onInstall(event) {
log(‘install event in progress.’); event.waitUntil(updateStaticCache());
} function updateStaticCache() { return caches
.open(cacheKey(‘offline’)) .then((cache) => { return
cache.addAll(offlineResources); }) .then(() => { log(‘installation
complete!’); }); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//////////
// Install
//////////
function onInstall(event) {
  log(‘install event in progress.’);
  event.waitUntil(updateStaticCache());
}
function updateStaticCache() {
  return caches
    .open(cacheKey(‘offline’))
    .then((cache) => {
      return cache.addAll(offlineResources);
    })
    .then(() => {
      log(‘installation complete!’);
    });
}

install时将享有符合缓存策略的财富拓展缓存。

以 Mmap file 的缓存方式运行 I/O 也会形成瓶颈,原因根本是 Varnish
缓存的数码先会刷到磁盘上,然后在2遍性读到内存中,那在造访量大的时候还要也会对
I/O 造成十分大的压力。Malloc 缓存格局就算对 I/O
没有压力,因持有缓存数据都写到内部存款和储蓄器中。

fetch

JavaScript

//////// // Fetch //////// function onFetch(event) { const request =
event.request; if (shouldAlwaysFetch(request)) {
event.respondWith(networkedOrOffline(request)); return; } if
(shouldFetchAndCache(request)) {
event.respondWith(networkedOrCached(request)); return; }
event.respondWith(cachedOrNetworked(request)); }
onFetch做为浏览器互连网请求的代理,依据要求回到网络或缓存内容,假使得到了网络内容,再次回到网络请求时还要拓展缓存操作。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
////////
// Fetch
////////
function onFetch(event) {
  const request = event.request;
  if (shouldAlwaysFetch(request)) {
    event.respondWith(networkedOrOffline(request));
    return;
  }
  if (shouldFetchAndCache(request)) {
    event.respondWith(networkedOrCached(request));
    return;
  }
  event.respondWith(cachedOrNetworked(request));
}
onFetch做为浏览器网络请求的代理,根据需要返回网络或缓存内容,如果获取了网络内容,返回网络请求时同时进行缓存操作。

Malloc 方式运营:

activate

JavaScript

/////////// // Activate /////////// function onActivate(event) {
log(‘activate event in progress.’); event.waitUntil(removeOldCache()); }
function removeOldCache() { return caches .keys() .then((keys) => {
return Promise.all( // We return a promise that settles when all
outdated caches are deleted. keys .filter((key) => { return
!key.startsWith(version); // Filter by keys that don’t start with the
latest version prefix. }) .map((key) => { return caches.delete(key);
// Return a promise that’s fulfilled when each outdated cache is
deleted. }) ); }) .then(() => { log(‘removeOldCache completed.’); });
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
///////////
// Activate
///////////
function onActivate(event) {
  log(‘activate event in progress.’);
  event.waitUntil(removeOldCache());
}
function removeOldCache() {
  return caches
    .keys()
    .then((keys) => {
      return Promise.all( // We return a promise that settles when all outdated caches are deleted.
        keys
         .filter((key) => {
           return !key.startsWith(version); // Filter by keys that don’t start with the latest version prefix.
         })
         .map((key) => {
           return caches.delete(key); // Return a promise that’s fulfilled when each outdated cache is deleted.
         })
      );
    })
    .then(() => {
      log(‘removeOldCache completed.’);
    });
}

在activate时依据version值来删除过期的缓存。

/usr/local/varnish/sbin/varnishd -u nobody -g nogroup -f
/usr/local/varnish/etc/varnish.vcl -s malloc,4G -w 50,51200,120 -a
192.168.10:80 -T 127.0.0.1:8080

管理 Service worker

 

一定网站

  1. Google Chrome

Developer Tools->Application->Service Workers

图片 17

在此地还有八个拾贰分实惠的复选框:

  • Offline

宪章断网状态

  • Update on reload
    加载时更新
  • Bypass for network
    连接利用网络内容
  1. Firefox

唯有在Settings里有三个得以在HTTP环境中应用Service
worker
的选项,适应于调节和测试,没有单独网站下的Service
worker
管理。

图片 18

  1. Opera及别的双核浏览器同谷歌 Chrome
    借使见到七个一样范围内的多个Service
    worker
    ,说明Service
    woker
    更新后,而原有Service
    worker
    还不曾被terminated。

Mmap file 形式运维:

浏览器全局

探望你的浏览器里都有怎么样Service worker已经存在了

  1. Google Chrome

在地址栏里输入:

JavaScript

chrome://serviceworker-internals/

1
chrome://serviceworker-internals/

能够观察曾经有2柒个Serviceworker了,在那边能够手动Start让它工作,也可以Unregister卸载掉。

图片 19

  1. Firefox

有二种办法进入Service
worker
管住界面来手动Start或unregister。

  • 菜单栏,Tool->Web Developer->Service workers
  • 地方栏中输入

JavaScript

about:debugging#workers

1
about:debugging#workers

图片 20

  1. Opera及任何双核浏览器同谷歌 Chrome

/usr/local/varnish/sbin/varnishd -u nobody -g nogroup -f
/usr/local/varnish/etc/varnish.vcl -s
file,/data/varnish/varnish_storage.bin,4G -w 50,51200,120 -a
192.168.10:80 -T 127.0.0.1:8080

更多

TODO:

  • Service
    workers
    的更新须求手动编辑version,每一遍发布新文章时索要编写制定。
  • 使用AMP让页面渲染速度直达最高。

Ref links

Service Worker Cookbook

Is service worker
ready?

Chrome service worker status
page

Firefox service worker status
page

MS Edge service worker status
page

WebKit service worker status
page

1 赞 2 收藏
评论

图片 21

Varnish 进度的劳作形式:

Varnish 运转或有1个进程 master(management) 进度和 child(worker)
进程。master 读入存款和储蓄配置命令,举行开始化,然后 fork,监察和控制 child。child
则分配线程进行 cache 工作,child 还会做管理线程和生成很多 worker 线程。

 

网站地图xml地图