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

采纳 Service worker 创立一个特别轻松的离线页面

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

本文由 伯乐在线 - 刘健超-J.c 翻译,艾凌风 校稿。未经许可,禁止转发!
阿拉伯语出处:Dean Hume。应接到场翻译组。

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

图片 1

那是一对一令人寒心的心得!幸运的是,web 开拓者们能通过有个别新特征来革新那类的客户体验。作者多年来一贯在折腾 ServiceWorkers,它给 web 带来的不知凡七恐怕性总能给自家惊奇。Service Workers 的精良特质之一是同意你检查评定网络乞求的场景,并让你作出相应的响应。

在这篇文章里,我筹算用此性子检查客商的脚下网络连接情状,假如没连接则赶回贰个至上轻易的离线页面。纵然那是二个非常基础的案例,但它能给您带来启迪,让您领会运营并运营该性子是何其的简约!假若您没掌握过 瑟维斯 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这么些常见的服务器和网络加快之外,通过顾客端完成了更加好的寻访体验。

连不上网?United Kingdom卫报的秉性离线页面是如此做的

2015/11/20 · HTML5 · Service Worker, 离线页面

本文由 伯乐在线 - Erucy 翻译,weavewillg 校稿。未经许可,禁止转发!
立陶宛语出处:Oliver Ash。款待参与翻译组。

我们是怎么样利用 service worker 来为 theguardian.com 创设三个自定义的离线页面。

图片 2

theguardian.com 的离线页面。插图:奥利弗 Ash

您正在朝着集团途中的地铁里,在手提式有线电话机上开采了 Guardian 应用。大巴被隧道包围着,可是那个动用能够正常运维,即便未有网络连接,你也能获取完全的意义,除了展示的剧情也是有一点点旧。借使您尝试在网址上也如此干,可惜它完全没办法加载:

图片 3

安卓版 Chrome 的离线页面

Chrome 中的那几个彩蛋,很三人都不明了》

Chrome 在离线页面上有个暗藏的玩乐(桌面版上按空格键,手提式有线电话机版上点击这只恐龙),那多少能减轻一点你的烦心。不过我们得以做得更加好。

Service workers 允许网址作者拦截自个儿站点的有着互联网必要,那也就象征大家能够提供周全的离线体验,就疑似原生应用一样。在 Guardian 网址,大家近年来上线了一个自定义的离线体验效果。当用户离线的时候,他们会看到贰个分包 Guardian 标记的页面,上面带有三个简易的离线提示,还应该有二个填字游戏,他们能够在等候互连网连接的时候玩玩那么些找点乐子。那篇博客解释了我们是怎么创设它的,可是在开首以前,你可以先本身尝试看。

Service Worker入门

2015/03/26 · JavaScript · Service Worker

原稿出处: Matt Gaunt   译文出处:[w3ctech

  • 十年踪迹]()   

原生App具有Web应用普通所不辜负有的富离线体验,定期的守口如瓶更新,音讯通告推送等效能。而新的Serviceworkers标准让在Web App上存有那么些意义成为大概。

利用 Service Worker 做二个 PWA 离线网页应用

2017/10/09 · JavaScript · PWA, Service Worker

原稿出处: 人人网FED博客   

在上一篇《小编是什么样让网址用上HTML5 Manifest》介绍了怎么用Manifest做二个离线网页应用,结果被周边网上好朋友吐槽说这么些事物已经被deprecated,移出web规范了,以往被ServiceWorker取代了,不管怎么样,Manifest的有个别构思还是可以够借用的。我又将网址进级到了ServiceWorker,假使是用Chrome等浏览器就用ServiceWorker做离线缓存,纵然是Safari浏览器就好像故用Manifest,读者能够展开那个网址感受一下,断网也是能健康张开。

让大家开头吧

若果你有以下 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>

接下来,我们供给创立 瑟维斯 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 时,向缓存增加了离线页面。即便我们将代码分为几小块,可观察前几行代码中,笔者为离线页面钦赐了缓存版本和URubiconL。假设您的缓存有例外版本,那么你只需创新版本号就能够轻松地清除缓存。在大概在第 12 行代码,小编向那个离线页面及其财富(如:图片)发出伏乞。在猎取成功的响应后,大家将离线页面和有关财富丰盛到缓存。

今日,离线页面已存进缓存了,我们可在急需的时等候检查索它。在同叁个 ServiceWorker 中,我们要求对无网络时回来的离线页面增多相应的逻辑代码。

JavaScript

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

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 访谈网络)

图片 4

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

图片 5

设若你只想大约地测验该意义而不想写任何代码,那么您能够访谈作者已创设好的 demo。其他,上述任何代码能够在 Github repo 找到。

自家通晓用在此案例中的页面很简短,但你的离线页面则在于你本人!假设您想深切该案例的内容,你可认为离线页面加多缓存破坏( cache busting),如: 此案例。

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

  • 首页增加注册代码

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都援用了什么样第三方能源,每一个加到忽略列表里。

图片 6

在根目录下增加offline.html,在未曾互联网且缓存中也尚龙时利用,效果如下:

图片 7

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

试试看

您供给三个支撑 Service Worker 和 fetch API 的浏览器。停止到本文编写时独有Chrome(手提式有线电电话机版和桌面版)同不经常间协理那二种 API(译者注:Opera 近年来也支撑这两侧),然则 Firefox 相当的慢将要扶助了(在每一天更新的本子中曾经支撑了),除了 Safari 之外的具有浏览器也都在尝试。其它,service worker 只可以登记在动用了 HTTPS 的网址上,theguardian.com 已经最早逐步搬迁到 HTTPS,所以大家不得不在网址的 HTTPS 部分提供离线体验。就近些日子的话,大家挑选了 开辟者博客 作为我们用来测量检验的地点。所以假如你是在我们网址的 开采者博客 部分阅读那篇小说的话,很幸运。

当你利用辅助的浏览器访谈大家的 开荒者博客 中的页面包车型地铁时候,一切就筹算稳当了。断开你的互连网连接,然后刷新一下页面。假设你和谐没标准尝试的话,能够看一下这段 示范录像(译者注:需梯子)。

Service Worker 是什么?

贰个 service worker 是一段运转在浏览器后台进程里的台本,它独立于近期页面,提供了那个无需与web页面交互的功效在网页背后悄悄实行的本领。在先天,基于它能够兑现新闻推送,静默更新以及地理围栏等服务,不过最近它首先要有所的功力是挡住和管理网络必要,包含可编程的响应缓存处理。

怎么说那个API是多少个十分屌的API呢?因为它使得开荒者能够辅助非常好的离线体验,它赋予开辟者完全调整离线数据的技艺。

在service worker建议从前,别的二个提供开辟者离线体验的API叫做App Cache。不过App Cache有个别局限性,比如它能够很轻便地消除单页应用的难题,可是在多页应用上会很麻烦,而Serviceworkers的出现正是为了消除App Cache的痛点。

上边详细说一下service worker有何必要专心的地方:

  • 它是JavaScript Worker,所以它无法直接操作DOM。不过service worker能够透过postMessage与页面之间通信,把音讯公告给页面,假设需求的话,让页面自身去操作DOM。
  • Serviceworker是三个可编制程序的网络代理,允许开采者调控页面上拍卖的互联网诉求。
  • 在不被接纳的时候,它会自个儿终止,而当它再一次被用到的时候,会被再次激活,所以您不可能注重于service worker的onfecth和onmessage的管理函数中的全局状态。纵然你想要保存一些悠久化的音讯,你可以在service worker里使用IndexedDB API。
  • Serviceworker大批量使用promise,所以只要您不打听怎么是promise,那你供给先读书这篇文章。

1. 什么是Service Worker

瑟维斯 Worker是谷歌倡导的完结PWA(Progressive Web App)的一个重要角色,PWA是为了化解古板Web 应用程式的症结:

(1)未有桌面入口

(2)不能离线使用

(3)没有Push推送

那Service Worker的具体表现是哪些的呢?如下图所示:

图片 8

ServiceWorker是在后台运行的一条服务Worker线程,上海体育场面作者开了多少个标签页,所以体现了三个Client,可是不管开多少个页面都独有三个Worker在担负管理。那么些Worker的干活是把一些财富缓存起来,然后拦截页面包车型地铁央浼,先看下缓存Curry有未有,要是有个别话就从缓存里取,响应200,反之没有的话就走符合规律的诉求。具体来讲,ServiceWorker结合Web App Manifest能一挥而就以下工作(那也是PWA的检查实验标准):

图片 9

蕴涵能够离线使用、断网时再次来到200、能唤起顾客把网站加多二个图标到桌面上等。

进行阅读

另外,还应该有多少个很棒的离线成效案例。如:Guardian 营造了多个全体 crossword puzzle(填字游戏)的离线 web 页面 – 由此,即便等待网络重连时(即已在离线状态下),也能找到一点野趣。笔者也援用看看 Google Chrome Github repo,它包括了成都百货上千不等的 Service Worker 案例 – 当中一部分用到案例也在那!

只是,假诺你想跳过上述代码,只是想大概地经过叁个库来拍卖相关操作,那么自个儿引入您看看 UpUp。那是叁个轻量的剧本,能令你更自在地行使离线作用。

打赏帮助本身翻译越多好文章,多谢!

打赏译者

加速效果

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

图片 10

基于webpagetest

查看测验结果

干活规律

由此一段简单的 JavaScript,大家可以提示浏览器在客户访谈页面包车型大巴时候立时登记大家和睦的 service worker。前段时间扶助 service worker 的浏览器非常少,所以为了防止不当,大家要求采用性格检测。

JavaScript

if (navigator.serviceWorker) { navigator.serviceWorker.register('/service-worker.js'); }

1
2
3
if (navigator.serviceWorker) {
    navigator.serviceWorker.register('/service-worker.js');
}

Service worker 安装事件的一部分,大家得以选取 新的缓存 API 来缓存大家网址中的各类内容,譬如 HTML、CSS 和 JavaScript:

JavaScript

var staticCacheName = 'static'; var version = 1; function updateCache() { return caches.open(staticCacheName + version) .then(function (cache) { return cache.addAll([ '/offline-page.html', '/assets/css/main.css', '/assets/js/main.js' ]); }); }; self.addEventListener('install', function (event) { event.waitUntil(updateCache()); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var staticCacheName = 'static';
var version = 1;
 
function updateCache() {
    return caches.open(staticCacheName + version)
        .then(function (cache) {
            return cache.addAll([
                '/offline-page.html',
                '/assets/css/main.css',
                '/assets/js/main.js'
            ]);
        });
};
 
self.addEventListener('install', function (event) {
    event.waitUntil(updateCache());
});

当安装到位后,service worker 能够监听和决定 fetch 事件,让大家能够完全调节之后网址中发生的全体互联网央求。

JavaScript

self.addEventListener('fetch', function (event) { event.respondWith(fetch(event.request)); });

1
2
3
self.addEventListener('fetch', function (event) {
    event.respondWith(fetch(event.request));
});

在此处大家有很灵敏的空中可以表明,例如下边这么些节骨眼,能够由此代码来生成大家和好的乞求响应:

JavaScript

self.addEventListener('fetch', function (event) { var response = new Response('<h1>Hello, World!</h1>', { headers: { 'Content-Type': 'text/html' } }); event.respondWith(response); });

1
2
3
4
5
self.addEventListener('fetch', function (event) {
    var response = new Response('&lt;h1&gt;Hello, World!&lt;/h1&gt;',
        { headers: { 'Content-Type': 'text/html' } });
    event.respondWith(response);
});

还会有那些,假诺在缓存中找到了哀告相应的缓存,大家能够直接从缓存中回到它,若是没找到的话,再经过网络获取响应内容:

JavaScript

self.addEventListener('fetch', function (event) { event.respondWith( caches.match(event.request) .then(function (response) { return response || fetch(event.request); }) ); });

1
2
3
4
5
6
7
8
self.addEventListener('fetch', function (event) {
    event.respondWith(
        caches.match(event.request)
            .then(function (response) {
                return response || fetch(event.request);
            })
    );
});

那么大家怎么行使这个作用来提供离线体验呢?

第一,在 service worker 安装进程中,我们须要把离线页面必要的 HTML 和能源文件通过 service worker 缓存下来。在缓存中,大家加载了上下一心开垦的 填字游戏 的 React应用 页面。之后,大家会堵住全体访问theguardian.com 网络央求,蕴涵网页、以及页面中的财富文件。管理那个须求的逻辑大概如下:

  1. 当大家检查实验到传播央浼是指向我们的 HTML 页面时,大家总是会想要提供最新的内容,所以我们会尝试把这些央浼通过互联网发送给服务器。
    1. 当我们从服务器获得了响应,就可以直接回到那个响应。
    2. 要是互联网必要抛出了特别(例如因为顾客掉线了),大家捕获这些可怜,然后采纳缓存的离线 HTML 页面作为响应内容。
  2. 不然,当大家检查实验到央求的不是 HTML 的话,大家会从缓存中搜索响应的要求内容。
    1. 一旦找到了缓存内容,我们得以平昔再次回到缓存的内容。
    2. 不然,大家会尝试把这么些恳求通过网络发送给服务器。

在代码中,大家使用了 新的缓存 API(它是 Service Worker API 的一片段)以及 fetch 功用(用于转移网络乞请),如下所示:

JavaScript

var doesRequestAcceptHtml = function (request) { return request.headers.get('Accept') .split(',') .some(function (type) { return type === 'text/html'; }); }; self.addEventListener('fetch', function (event) { var request = event.request; if (doesRequestAcceptHtml(request)) { // HTML pages fallback to offline page event.respondWith( fetch(request) .catch(function () { return caches.match('/offline-page.html'); }) ); } else { // Default fetch behaviour // Cache first for all other requests event.respondWith( caches.match(request) .then(function (response) { return response || fetch(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
25
26
27
var doesRequestAcceptHtml = function (request) {
    return request.headers.get('Accept')
        .split(',')
        .some(function (type) { return type === 'text/html'; });
};
 
self.addEventListener('fetch', function (event) {
    var request = event.request;
    if (doesRequestAcceptHtml(request)) {
        // HTML pages fallback to offline page
        event.respondWith(
            fetch(request)
                .catch(function () {
                    return caches.match('/offline-page.html');
                })
        );
    } else {
        // Default fetch behaviour
        // Cache first for all other requests
        event.respondWith(
            caches.match(request)
                .then(function (response) {
                    return response || fetch(request);
                })
        );
    }
});

就只须要这么多!theguardian.com 上的 具备代码都以在 GitHub 上开源 的,所以您能够去那儿查看大家的 service worker 的完全版本,或然直接从生育条件上访谈 。

咱俩有丰硕的说辞为那个新的浏览器手艺欢呼喝彩,因为它能够用来让您的网站像前几天的原生应用同样,具有完善的离线体验。以往当 theguardian.com 完全迁移到 HTTPS 之后,离线页面包车型地铁显要性会显然增加,我们得以提供越来越圆满的离线体验。设想一下你在上下班路上网络相当不好的时候访谈theguardian.com,你会看出特意为你订制的特性化内容,它们是在你前面访谈网址时由浏览器缓存下来的。它在装置进度中也不会发生任何不便,你所急需的只是访问那一个网址而已,不像原生应用,还索要客商有二个利用市肆的账号工夫安装。Serviceworker 同样能够协助我们提高网址的加载速度,因为网址的框架可以被保障地缓存下来,就好像原生应用一样。

假诺您对 service worker 很感兴趣,想要了解越来越多内容的话,开辟者 MattGaunt(Chrome的忠诚援助者)写了一篇越发详细地 介绍 Service Worker的文章。

打赏扶助作者翻译越来越多好文章,感谢!

打赏译者

Service Worker的生命周期

Service worker具有八个全然独立于Web页面包车型大巴生命周期。

要让三个service worker在你的网址上生效,你须求先在您的网页中注册它。注册二个service worker之后,浏览器会在后台默默运营二个service worker的装置进度。

在安装进程中,浏览器会加载并缓存一些静态能源。若是全数的文本被缓存成功,service worker就安装成功了。借使有任何公文加载或缓存退步,那么安装进程就能够战败,service worker就不可能被激活(也即未能安装成功)。假使产生那样的主题材料,别忧郁,它会在下一次再尝试安装。

当安装完毕后,service worker的下一步是激活,在这一品级,你还足以升官三个service worker的版本,具体内容大家会在背后讲到。

在激活之后,service worker将接管全体在大团结管辖域范围内的页面,不过一旦三个页面是刚刚注册了service worker,那么它那二回不会被接管,到下壹遍加载页面包车型大巴时候,service worker才会生效。

当service worker接管了页面之后,它恐怕有二种情状:要么被停止以节约内部存款和储蓄器,要么会处理fetch和message事件,那三个事件分别暴发于三个互连网恳求出现依然页面上发送了贰个音讯。

下图是贰个简化了的service worker初次安装的生命周期:

图片 11

2. Service Worker的支撑处境

Service Worker方今独有Chrome/Firfox/Opera支持:

图片 12

Safari和Edge也在预备扶助Service Worker,由于ServiceWorker是Google大旨的一项职业,对于生态相比密闭的Safari来讲也是迫于时势起始筹算援助了,在Safari TP版本,能够看出:

图片 13

在尝试功用(Experimental Features)里早已有瑟维斯Worker的菜单项了,只是就算展开也是不能够用,会唤醒您还尚未兑现:

图片 14

但不管什么,至少表达Safari已经绸缪扶助ServiceWorker了。别的还能观望在二零一六年二零一七年六月颁发的Safari 11.0.1本子现已支撑WebRTC了,所以Safari依旧多个前进的子女。

Edge也筹算协助,所以Service Worker的前景十二分美好。

打赏帮衬笔者翻译越来越多好作品,多谢!

任选一种支付办法

图片 15 图片 16

1 赞 3 收藏 1 评论

加速/离线原理研究

打赏帮衬作者翻译越来越多好小说,谢谢!

图片 17

1 赞 收藏 评论

在大家初叶写码以前

从这个类型地址拿到chaches polyfill。

这个polyfill支持CacheStorate.match,Cache.add和Cache.addAll,而现在Chrome M40实现的Cache API还未曾协理这么些主意。

将dist/serviceworker-cache-polyfill.js放到你的网站中,在service worker中经过importScripts加载进来。被service worker加载的脚本文件会被活动缓存。

JavaScript

importScripts('serviceworker-cache-polyfill.js');

1
importScripts('serviceworker-cache-polyfill.js');

需要HTTPS

在开采阶段,你能够由此localhost使用service worker,可是倘使上线,就要求你的server补助HTTPS。

你能够透过service worker吓唬连接,伪造和过滤响应,非常逆天。尽管你能够约束自个儿不干坏事,也可以有人想干坏事。所认为了以免万一旁人使坏,你只可以在HTTPS的网页上登记service workers,那样大家才方可防守加载service worker的时候不被渣男篡改。(因为service worker权限非常大,所以要防范它自个儿被歹徒篡改利用——译者注)

Github Pages正假若HTTPS的,所以它是一个爱不释手的天生实验田。

假定你想要令你的server协理HTTPS,你供给为您的server获得二个TLS证书。分化的server安装方法区别,阅读扶助文档并经过Mozilla’s SSL config generator问询最好实施。

3. 使用Service Worker

ServiceWorker的施用套路是先挂号叁个Worker,然后后台就能够启动一条线程,能够在那条线程运行的时候去加载一些能源缓存起来,然后监听fetch事件,在那一个事件里拦截页面包车型大巴央求,先看下缓存里有未有,要是有直接重返,不然经常加载。大概是一最初不缓存,每种能源诉求后再拷贝一份缓存起来,然后下贰次呼吁的时候缓存里就有了。

本文由必威发布于必威-前端,转载请注明出处:针对不同的语言都有一些优秀的静态blog系统出现

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。