针对不同的语言都有一些优秀的静态blog系统出现

利用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这么些周边的服务器和互连网加快之外,通过顾客端达成了越来越好的拜谒体验。

加快/离线访谈只需三步

  • 首页增加注册代码

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都援引了怎么第三方财富,每种加到忽略列表里。

图片 1

在根目录下增加offline.html,在尚未互连网且缓存中也尚无时行使,效果如下:

图片 2

在根目录下增多offline.svg,在无网络时图片财富供给再次来到该公文。

加快效果

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

图片 3

基于webpagetest

查看测试结果

加快/离线原理索求

什么是 Service worker

图片 4

如上图,Service
worker

是一种由Javascript编写的浏览器端代理脚本,位于你的浏览器和服务器之间。当一个页面注册了一个
Service
worker
,它就足以登记一雨后冬笋事件管理器来响应如互连网央求和信息推送这么些事件。Service
worker

能够被用来治本缓存,当响应三个互连网须要时能够陈设为回到缓存还是从互连网得到。由于Service
worker

是依赖事件的,所以它只在拍卖那几个事件的时候被调入内部存款和储蓄器,不用忧虑常驻内部存款和储蓄器占用能源导致系统变慢。

Service worker生命周期

图片 5

Service
worker

为网页增添多个看似于APP的生命周期,它只会响应系统事件,纵然浏览器关闭时操作系统也足以唤起Service
worker
,那一点特别重要,让web
app与native app的力量变得就好像了。

Service
worker
在Register时会触发Install事件,在Install时得以用来预先获取和缓存应用所需的能源并安装各样文件的缓存计策。

一旦Service
worker
远在activated状态,就可以完全调节应用的财富,对互连网央求实行自己争论,修改网络乞请,从互联网上获得并重回内容可能再次来到由已设置的Service
worker
预示获取并缓存好的财富,以至还足以生成内容并回到给互联网语法。

全数的那几个都客商都以透明的,事实上,一个企划能够的Service
worker
就如叁个智能缓存系统,加强了互联网和缓存功用,采用最优办法来响应互联网乞请,让动用更加的安定的周转,即便未有互联网也没涉及,因为你能够完全调节网络响应。

瑟维斯 worker的支配从第二回页面访谈开首

在第三回加载页面时,全体财富都以从互联网载的,Service
worker

在第一次加载时不会博得调节互连网响应,它只会在继续访谈页面时起成效。

图片 6

页面第一回加载时产生install,并步向idle状态。

图片 7

页面第一次加载时,踏入activated状态,策动管理所有事件,同时
浏览器会向服务器发送三个异步 诉求来检查Service
worker
自家是还是不是有新的本子,构成了Service
worker
的翻新机制。

图片 8

Service
worker
拍卖完所有的风浪后,踏入idle状态,最后步入terminated状态能源被保释,当有新的事件发生时再次被调用。

特点

  • 浏览器

谷歌(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所处的蒙受是互为隔绝的。

图片 9

  • 从不浏览页面时也得以运作

收受系统事件,后台运营

  • 事件驱动,必要时运维,不须求时就终止

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

  • 可升级

推行时会异步获取最新的版本

贯彻加快/离线

Cache

网页缓存有无数,如HTTP缓存,localStorage,sessionStorage和cacheStorage都足以灵活搭配实行缓存,但操作太繁琐,直接利用更加尖端Service
worker

–本文的主人公。

添加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);
    });

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

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时将兼具相符缓存计谋的财富拓宽缓存。

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做为浏览器网络请求的代理,根据需要返回网络或缓存内容,如果获取了网络内容,返回网络请求时同时进行缓存操作。

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值来删除过期的缓存。

管理 Service worker

一定网站

  1. Google Chrome

Developer Tools->Application->Service Workers

图片 10

在此地还会有多个十一分平价的复选框:

  • Offline

宪章断网状态

  • Update on reload
    加载时更新
  • Bypass for network
    三回九转选拔网络内容
  1. Firefox

除非在Settings里有八个得以在HTTP意况中动用Service
worker
的选项,适应于调节和测验,未有单独网址下的Service
worker
管理。

图片 11

  1. Opera及其它双核浏览器同谷歌 Chrome
    假如见到八个一律范围内的多少个Service
    worker
    ,说明Service
    woker
    更新后,而原有Service
    worker
    还未有被terminated。

浏览器全局

看看您的浏览器里都有如何Service worker已经存在了

  1. Google Chrome

在地址栏里输入:

JavaScript

chrome://serviceworker-internals/

1
chrome://serviceworker-internals/

能够看见曾经有22个Serviceworker了,在那边能够手动Start让它专门的学问,也能够Unregister卸载掉。

图片 12

  1. Firefox

有三种办法踏向Service
worker
治本分界面来手动Start或unregister。

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

JavaScript

about:debugging#workers

1
about:debugging#workers

图片 13

  1. Opera及别的双核浏览器同谷歌 Chrome

更多

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 收藏
评论

图片 14

相关文章