菜单

动用Service worker完成加速/离线访问静态blog网站

2019年2月18日 - 金沙前端

离线无缓存情状

会呈现二个默许的页面

金沙国际备用网址 1

-EOF-

打赏扶助我写出更加多好作品,谢谢!

打赏我

让大家起先吧

万一你有以下 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>

接下来,我们须要创立 瑟维斯 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
时,向缓存添加了离线页面。若是我们将代码分为几小块,可看出前几行代码中,小编为离线页面内定了缓存版本和ULX570L。若是您的缓存有不一样版本,那么你只需立异版本号即可不难地扫除缓存。在差不离在第壹2
行代码,笔者向这么些离线页面及其财富(如:图片)发出请求。在获取成功的响应后,我们将离线页面和血脉相通能源丰硕到缓存。

最近,离线页面已存进缓存了,大家可在急需的时候检索它。在同一个 瑟维斯Worker 中,大家须要对无网络时回来的离线页面添加相应的逻辑代码。

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

金沙国际备用网址 2

若果您刷新页面,你应当能见到相应的离线页面!

金沙国际备用网址 3

若是您只想大约地测试该意义而不想写任何代码,那么您能够访问笔者已开立好的
demo。别的,上述总体代码可以在
Github repo 找到。

自身领悟用在此案例中的页面很粗略,但您的离线页面则取决于你协调!若是你想深远该案例的始末,你可以为离线页面添加缓存破坏(
cache busting),如:
此案例。

加紧/离线原理探索

Service Worker 是什么?

三个 service worker
是一段运维在浏览器后台进度里的剧本,它独自于近来页面,提供了那三个不需求与web页面交互的法力在网页背后悄悄执行的力量。在明日,基于它可以达成新闻推送,静默更新以及地理围栏等服务,但是当前它首先要具有的成效是阻止和拍卖互联网请求,包涵可编程的响应缓存管理。

干什么说那几个API是二个尤其棒的API呢?因为它使得开发者可以支撑特别好的离线体验,它赋予开发者完全控制离线数据的力量。

在service worker提出之前,其它两个提供开发者离线体验的API叫做App
Cache。可是App
Cache有个别局限性,例如它可以很不难地解决单页应用的题目,然而在多页应用上会很麻烦,而Serviceworkers的出现正是为了消除App Cache的痛点。

上面详细说一下service worker有何样必要留意的地方:

离线有缓存景况

金沙国际备用网址 4

至于小编:刘健超-J.c

金沙国际备用网址 5

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

金沙国际备用网址 6

管理 Service worker

怎么翻新多个Service Worker

你的service
worker总有亟待革新的那一天。当那一天来到的时候,你须要依据如下步骤来更新:

  1. 履新您的service worker的JavaScript文件
    1. 当用户浏览你的网站,浏览器尝试在后台下载service
      worker的脚本文件。只要服务器上的公文和本守田件有多少个字节不相同,它们就被判定为须要更新。
  2. 更新后的service worker将启幕运维,install event被再一次触发。
  3. 在这些时辰节点上,当前页素不相识效的如故是老版本的service
    worker,新的servicer worker将跻身”waiting”状态。
  4. 目前页面被关闭之后,老的service worker进度被杀掉,新的servicer
    worker正式生效。
  5. 万一新的service worker生效,它的activate事件被触发。

代码更新后,经常必要在activate的callback中执行二个管理cache的操作。因为你会须求免去掉在此之前旧的数据。大家在activate而不是install的时候实施那么些操作是因为即使大家在install的时候立刻执行它,那么依旧在运行的旧版本的数码就坏了。

事先大家只使用了多少个缓存,叫做my-site-cache-v1,其实我们也可以使用多个缓存的,例如一个给页面使用,一个给blog的内容提交使用。这意味着,在install步骤里,我们可以创建两个缓存,pages-cache-v1和blog-posts-cache-v1,在activite步骤里,我们可以删除旧的my-site-cache-v1。

上边的代码可以循环全部的缓存,删除掉全数不在白名单中的缓存。

JavaScript

self.addEventListener(‘activate’, function(event) { var cacheWhitelist =
[‘pages-cache-v1’, ‘blog-posts-cache-v1’]; event.waitUntil(
caches.keys().then(function(cacheNames) { return Promise.all(
cacheNames.map(function(cacheName) { if
(cacheWhitelist.indexOf(cacheName) === -1) { return
caches.delete(cacheName); } }) ); }) ); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
self.addEventListener(‘activate’, function(event) {
 
  var cacheWhitelist = [‘pages-cache-v1’, ‘blog-posts-cache-v1’];
 
  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

关于笔者:pangjian

金沙国际备用网址 7

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

金沙国际备用网址 8

打赏支持作者翻译更加多好文章,多谢!

任选一种支付办法

金沙国际备用网址 9
金沙国际备用网址 10

1 赞 3 收藏 1
评论

加快/离线访问只需三步

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都引用了哪些第2方能源,各种加到忽略列表里。

金沙国际备用网址 11

在根目录下添加offline.html,在并未互联网且缓存中也未尝时拔取,效果如下:

金沙国际备用网址 12

在根目录下添加offline.svg,在无互连网时图片能源请求再次回到该公文。

fetch()的暗中认同参数

当您拔取fetch,缺省地,请求不会带上cookies等证据,要想带上的话,须求:

JavaScript

fetch(url, { credentials: ‘include’ })

1
2
3
fetch(url, {
  credentials: ‘include’
})

诸如此类设计是有理由的,它比XHENVISION的在同源下暗中认同发送凭据,但跨域时抛弃凭据的规则要来得好。fetch的作为更像其它的COTiggoS请求,例如<img crossorigin>,它默认不发送cookies,除非你指定了<img crossorigin="use-credentials">.。

迈向PWA!利用serviceworker的离线访问格局

2017/02/08 · JavaScript
· PWA

本文小编: 伯乐在线 –
pangjian
。未经我许可,禁止转发!
欢迎出席伯乐在线 专栏撰稿人。

微信小程序来了,可以采用WEB技术在微信营造一个独具Native应用经验的应用,业界相当看好那种格局。可是你们可能不驾驭,谷歌(Google)早已有近似的设计,甚至层次更高。那就是PWA(渐进式增强WEB应用)。
PWA有以下两种个性:

不无那一个特点都以“优雅降级、渐进增强的”,给援救的设施更好的经验,不扶助的装置也不会更差。那就和微信小程序这种蹩脚设计的一向不一致之处。

本博客也在向着PWA的大势迈进,第②步笔者拔取了Offline,也等于离线能力。可以让客户在一直不互连网连接的时候还可以接纳一些服务。这些能力运用了ServiceWorker技术。

达成思路就是,利用service
worker,另起一个线程,用来监听全体网络请求,讲曾经呼吁过的数码放入cache,在断网的情形下,直接取用cache里面的能源。为呼吁过的页面和图表,呈现3个暗中认同值。当有网络的时候,再重新从服务器更新。
金沙国际备用网址 13
代码那里就不贴了,未来可能会特地写一篇来详细介绍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 页面会突显出类似以下的情节:

金沙国际备用网址 14

那是分外令人寒心的经验!幸运的是,web
开发者们能经过一些新特点来改正那类的用户体验。作者近来直接在折腾 ServiceWorkers,它给 web 带来的无尽大概性总能给本身惊喜。Service Workers
的精美特质之一是同意你检测互连网请求的景观,并让你作出相应的响应。

在那篇作品里,我打算用此性情检查用户的此时此刻互连网连接景况,假使没连接则赶回3个一流简单的离线页面。尽管那是七个老大基础的案例,但它能给你带来启迪,让您知道运转并运维该特性是何等的差不多!若是您没精通过
瑟维斯 Worker,作者提出你看看此 Github
repo,精晓越来越多相关的音讯。

在本案例发轫前,让我们先简单地探访它的做事流程:

  1. 在用户第一回访问我们的页面时,我们会设置 瑟维斯Worker,并向浏览器的缓存添加我们的离线 HTML 页面
  2. 下一场,假如用户打算导航到另2个 web
    页面(同一个网站下),但此刻已断网,那么我们将赶回已被缓存的离线
    HTML 页面
  3. 可是,借使用户打算导航到别的一个 web
    页面,而此时互联网已三番五次,则能照常浏览页面

一定网站

  1. Google Chrome

Developer Tools->Application->Service Workers

金沙国际备用网址 15

在那边还有两个拾贰分有效的复选框:

里丑捧心断网状态

  1. Firefox

唯有在Settings里有2个足以在HTTP环境中拔取Service
worker
的选项,适应于调试,没有单独网站下的Service
worker
管理。

金沙国际备用网址 16

  1. Opera及任何双核浏览器同谷歌(Google) Chrome
    假使看到两个一律范围内的三个Service
    worker
    ,说明Service
    woker
    更新后,而原有Service
    worker
    还一直不被terminated。

处理边界和填坑

这一节内容相比较新,有不少待定细节。希望这一节很快就不要求讲了(因为标准会处理这个题材——译者注),不过将来,那一个故事情节照旧应当被提一下。

打赏帮忙自个儿写出越来越多好作品,多谢!

任选一种支付方式

金沙国际备用网址 17
金沙国际备用网址 18

1 赞 1 收藏
评论

举行阅读

除此以外,还有多少个很棒的离线作用案例。如:Guardian 创设了一个富有 crossword
puzzle(填字游戏)的离线
web 页面 –
由此,即使等待网络重连时(即已在离线状态下),也能找到一点乐趣。作者也推荐看看
Google Chrome Github
repo,它包含了比比皆是例外的
Service Worker 案例 – 其中一部分选用案例也在那!

但是,倘诺你想跳过上述代码,只是想大致地由此2个库来拍卖相关操作,那么小编引进您看看
UpUp金沙国际网上娱乐,。这是二个轻量的脚本,能让你更自在地选取离线功用。

打赏帮助本身翻译更加多好小说,多谢!

打赏译者

浏览器全局

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

  1. Google Chrome

在地址栏里输入:

JavaScript

chrome://serviceworker-internals/

1
chrome://serviceworker-internals/

能够看出已经有22个Serviceworker了,在此地可以手动Start让它工作,也足以Unregister卸载掉。

金沙国际备用网址 19

  1. 金沙国际备用网址,Firefox

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

JavaScript

about:debugging#workers

1
about:debugging#workers

金沙国际备用网址 20

  1. Opera及其它双核浏览器同谷歌 Chrome

如何注册和装置service worker

要设置service
worker,你须要在你的页面上登记它。那些手续告诉浏览器你的service
worker脚本在哪个地方。

JavaScript

if (‘serviceWorker’ in navigator) {
navigator.serviceWorker.register(‘/sw.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); }); }

1
2
3
4
5
6
7
8
9
if (‘serviceWorker’ in navigator) {
  navigator.serviceWorker.register(‘/sw.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);
  });
}

上面的代码检查service worker API是还是不是可用,假诺可用,service
worker /sw.js 被注册。

一经那一个service worker已经被登记过,浏览器会自动忽略上边的代码。

有一个内需专门表达的是service
worker文件的门径,你一定留神到了在那些例子中,service
worker文件被放在这一个域的根目录下,那意味着service
worker和网站同源。换句话说,这一个service
work将会收下那么些域下的装有fetch事件。尽管小编将service
worker文件注册为/example/sw.js,那么,service worker只能收到/example/路径下的fetch事件(例如: /example/page1/, /example/page2/)。

明天你可以到 chrome://inspect/#service-workers 检查service worker是否对你的网站启用了。

金沙国际备用网址 21

当service
worker第1版被完毕的时候,你也足以在chrome://serviceworker-internals中查看,它很有用,通过它可以最直观地熟悉service worker的生命周期,不过这个功能很快就会被移到chrome://inspect/#service-workers中。

您会发觉这几个意义可以很便宜地在三个仿照窗口中测试你的service
worker,那样你可以关闭和再度打开它,而不会潜移默化到您的新窗口。任何创造在模仿窗口中的注册服务和缓存在窗口被关门时都将消灭。

相关文章

发表评论

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

网站地图xml地图