ag旗舰厅官网_ag旗舰厅下载客户端

热门关键词: ag旗舰厅官网,ag旗舰厅下载客户端

前端技术

当前位置:ag旗舰厅官网 > 前端技术 > 离线访问静态blog网站,创建一个非常简单的离线

离线访问静态blog网站,创建一个非常简单的离线

来源:http://www.pedaLyourcycLe.com 作者:ag旗舰厅官网 时间:2019-11-12 06:02

采纳 Service worker 创立八个特别轻巧的离线页面

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

本文由 伯乐在线 - 刘健超-J.c 翻译,艾凌风 校稿。未经许可,制止转发!
立陶宛共和国(Republic of Lithuania卡塔尔国语出处:Dean Hume。应接参与翻译组。

让大家想像以下景况:我们那时在风度翩翩辆通往村庄的列车的里面,用运动器具看着少年老成篇很棒的稿子。与此同一时候,当您点击“查看越来越多”的链接时,火车忽然步向了隧道,引致移动设备失去了网络,而 web 页面会显示出相符以下的源委:

图片 1

那是生龙活虎对生龙活虎令人心寒的经历!幸运的是,web 开辟者们能由此一些新特色来修改那类的顾客体验。我多年来平素在折腾 ServiceWorkers,它给 web 带来的不胜枚举只怕性总能给自己欣喜。Service Workers 的卓绝特质之一是允许你检查评定网络必要的场景,并让您作出相应的响应。

在这里篇小说里,作者筹划用此本性检查顾客的近期网络连接处境,即使没连接则赶回多个顶级级轻巧的离线页面。就算那是四个极度基本功的案例,但它能给你带给启发,让您知道运维并运维该个性是多么的差不离!若是你没驾驭过 Service Worker,作者建议您看看此 Github repo,通晓更多相关的信息。

在本案例初步前,让我们先轻易地寻访它的劳作流程:

  1. 在客户第二次访谈大家的页面时,大家会安装 ServiceWorker,并向浏览器的缓存增添大家的离线 HTML 页面
  2. 接下来,就算客户打算导航到另贰个 web 页面(同三个网站下卡塔 尔(阿拉伯语:قطر‎,但此时已断网,那么大家将赶回已被缓存的离线 HTML 页面
  3. 然则,假如客户筹算导航到此外一个 web 页面,而这个时候互连网已接连,则能照常浏览页面

使用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那些何奇之有的服务器和互连网加速之外,通过顾客端完结了更加好的拜会体验。

让大家起头吧

假设你有以下 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‘。大家准备用那几个 瑟维斯 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 时,向缓存加多了离线页面。假若我们将代码分为几小块,可观望前几行代码中,我为离线页面钦命了缓存版本和U帕杰罗L。假使您的缓存有两样版本,那么你只需更正版本号就能够轻松地消亡缓存。在大致在第 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卡塔 尔(英语:State of Qatar)改为 Offline。(译者注:若将节流设置为 Offline 没意义,则可经过关闭网络可能通过360安全警卫禁绝 Chrome 访问网络卡塔 尔(阿拉伯语:قطر‎

图片 2

要是你刷新页面,你应当能看出相应的离线页面!

图片 3

黄金年代经你只想大致地质衡量试该意义而不想写任何代码,那么您能够访谈作者已创制好的 demo。其余,上述总体代码可以在 Github repo 找到。

自己知道用在这案例中的页面十分轻巧,但你的离线页面则决意于你本人!假若您想浓重该案例的始末,你可以为离线页面加多缓存破坏( cache busting卡塔 尔(英语:State of Qatar),如: 此案例。

加紧/离线访问只需三步

  • 首页增添注册代码

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都引用了何品级三方能源,每一个加到忽视列表里。

图片 4

在根目录下增加offline.html,在未曾网络且缓存中也绝非时接纳,效果如下:

图片 5

在根目录下增加offline.svg,在无网络时图片能源央求重回该文件。

进行阅读

除此以外,还会有多少个很棒的离线成效案例。如:Guardian 营造了三个有所 crossword puzzle(填字游戏卡塔 尔(英语:State of Qatar)的离线 web 页面 – 因而,即便等待网络重连时(即已在离线状态下卡塔 尔(阿拉伯语:قطر‎,也能找到一点野趣。作者也引入看看 Google Chrome Github repo,它满含了广大不生龙活虎的 Service Worker 案例 – 当中风姿罗曼蒂克部分行使案例也在这里!

但是,如若你想跳过上述代码,只是想大致地通过一个库来拍卖相关操作,那么笔者引入你看看 UpUp。那是三个轻量的剧本,能令你更自在地行使离线效能。

打赏帮衬笔者翻译更加的多好随笔,多谢!

打赏译者

加快效果

首页加快后,互联网诉求从16降为1,加载时间从2.296s降为0.654s,得到了瞬间加载的结果。

图片 6

基于webpagetest

查看测量检验结果

打赏辅助自身翻译越多好小说,感谢!

任选风流浪漫种支付格局

图片 7 图片 8

1 赞 3 收藏 1 评论

增长速度/离线原理搜求

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

图片 9

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

图片 10

什么是 Service worker

图片 11

如上图,Service worker 是意气风发种由Javascript编写的浏览器端代理脚本,位于你的浏览器和服务器之间。当三个页面注册了二个 Service worker,它就能够登记意气风发种类事件微电脑来响应如互连网央求和新闻推送这么些事件。Service worker 能够被用来保管缓存,当响应叁个互连网央浼时能够布置为回到缓存依旧从互联网获取。由于Service worker 是基于事件的,所以它只在管理这几个事件的时候被调入内部存款和储蓄器,不用操心常驻内部存款和储蓄器占用财富导致系统变慢。

Service worker生命周期

图片 12

Service worker 为网页加多贰个看似于APP的生命周期,它只会响应系统事件,即便浏览器关闭时操作系统也得以唤起Service worker,这点十二分重要,让web app与native app的本事变得近乎了。

Service worker在Register时会触发Install事件,在Install时得以用来预先获取和缓存应用所需的能源并设置每一个文件的缓存战略。

一旦Service worker地处activated状态,就能够完全调控应用的财富,对网络诉求进行检查,改良互联网央求,从互联网上获得并重回内容恐怕再次回到由已设置的Service worker预示获取并缓存好的财富,以致还足以生成内容并回到给网络语法。

享有的那几个都顾客都以透明的,事实上,一个企划可以的Service worker就疑似一个智能缓存系统,抓实了互连网和缓存功用,选取最优办法来响应互联网需要,让使用尤其安定的运作,固然未有网络也没提到,因为您能够完全调整互连网响应。

Service worker的支配从第三次页面访谈起头

在第贰遍加载页面时,全部财富都以从网络载的,Service worker 在第二回加载时不会收获调节网络响应,它只会在一而再访谈页面时起效果。

图片 13

页面第三次加载时做到install,并跻身idle状态。

图片 14

页面首次加载时,踏入activated状态,准备管理全数的风云,同时 浏览器会向服务器发送叁个异步 央浼来检查Service worker自家是或不是有新的本子,构成了Service worker的换代机制。

图片 15

Service worker拍卖完所有事件后,步入idle状态,最后走入terminated状态财富被保释,当有新的平地风波时有产生时再也被调用。

特点

  • 浏览器

谷歌 Chrome,Firefox,Opera以至境内的各样双核浏览器都支持,不过 safari 不扶植,那么在不帮助的浏览器里Service worker不工作。

  • https

网址必得启用https来保障使用Service worker页面包车型地铁安全性,开荒时localhost暗许以为是无忧无虑的。

  • non-block

Service worker 中的 Javascript 代码必须是非窒碍的,因为 localStorage 是拥塞性,所以不该在 瑟维斯 Worker 代码中央银行使 localStorage。

  • 单身的实施碰到

Service worker运营在自个儿的大局意况中,平常也运转在大团结单身的线程中。

  • 平素不绑定到特定页面

service work能调节它所加载的万事范围内的能源。

  • 不可能操作DOM

跟DOM所处的情状是互为隔开的。

图片 16

  • 尚无浏览页面时也可以运作

吸收接纳系统事件,后台运转

  • 事件驱动,须要时运维,无需时就终止

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

  • 可升级

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

福寿康宁加速/离线

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

图片 17

在这里地还或然有四个要命平价的复选框:

  • Offline

依傍断网状态

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

独有在Settings里有贰个足以在HTTP遭遇中选拔Service worker的选项,适应于调节和测量试验,未有单独网址下的Service worker管理。

图片 18

  1. Opera及其他双核浏览器同谷歌(Google卡塔 尔(英语:State of Qatar) Chrome
    若果见到四个相符范围内的四个Service worker,说明Service woker更新后,而原有Service worker还没曾被terminated。

浏览器全局

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

  1. Google Chrome

在地址栏里输入:

JavaScript

chrome://serviceworker-internals/

1
chrome://serviceworker-internals/

能够看看曾经有二十多少个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及其余双核浏览器同谷歌(Google卡塔尔国 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 收藏 评论

图片 21

本文由ag旗舰厅官网发布于前端技术,转载请注明出处:离线访问静态blog网站,创建一个非常简单的离线

关键词:

上一篇:高度自适应

下一篇:没有了