译文出处巴黎人澳门官网:,针对不同的语
分类:巴黎人-前端

利用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入门

2015/03/26 · JavaScript · Service Worker

原来的作品出处: Matt Gaunt   译文出处:[w3ctech

  • 十年踪迹]()   

原生App拥有Web应用一般所不持有的富离线体验,按期的沉默更新,信息布告推送等功用。而新的Serviceworkers规范让在Web App上存有这个功效成为或者。

接纳 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 页面,而此时互联网已连接,则能照常浏览页面

连不上网?英国卫报的个性离线页面是如此做的

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 做两个 PWA 离线网页应用

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

初稿出处: 人人网FED博客   

在上一篇《自身是哪些让网址用上HTML5 Manifest》介绍了怎么用Manifest做贰个离线网页应用,结果被遍布网络好朋友嘲讽说那几个事物已经被deprecated,移出web标准了,未来被ServiceWorker替代了,不管如何,Manifest的一对妄想还能够借用的。小编又将网址晋级到了ServiceWorker,如若是用Chrome等浏览器就用ServiceWorker做离线缓存,若是是Safari浏览器如同故用Manifest,读者能够展开这些网址感受一下,断网也是能健康张开。

增速/离线访问只需三步

  • 首页增多注册代码

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,在无互联网时图片财富央求再次来到该文件。

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,这您供给先读书这篇文章。

让我们最先吧

假诺你有以下 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('瑟维斯Worker 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‘。大家筹算用那个 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 时,向缓存增添了离线页面。如果大家将代码分为几小块,可看出前几行代码中,笔者为离线页面钦赐了缓存版本和URL。假诺你的缓存有区别版本,那么您只需创新版本号就能够轻松地解除缓存。在大概在第 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)改为 Offline。(译者注:若将节流设置为 Offline 没意义,则可由此关闭互连网也许通过360安然依然警卫禁止 Chrome 访谈互连网)

巴黎人澳门官网 6

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

巴黎人澳门官网 7

假若你只想大约地质度量试该作用而不想写任何代码,那么您能够访谈作者已创建好的 demo。另外,上述任何代码能够在 Github repo 找到。

自身驾驭用在此案例中的页面很轻松,但你的离线页面则在于你协和!假如您想深切该案例的开始和结果,你可感到离线页面加多缓存破坏( cache busting),如: 此案例。

试试看

您供给三个支撑 Service Worker 和 fetch API 的浏览器。截止到本文编写时独有Chrome(手提式有线电话机版和桌面版)同期援救那三种 API(译者注:Opera 方今也支撑这两侧),不过 Firefox 一点也不慢将在支持了(在每一天更新的本子中一度支撑了),除了 Safari 之外的具备浏览器也都在尝试。其余,service worker 只可以登记在利用了 HTTPS 的网址上,theguardian.com 已经起来逐年搬迁到 HTTPS,所以我们只可以在网址的 HTTPS 部分提供离线体验。就现阶段以来,大家挑选了 开垦者博客 作为大家用来测验的地点。所以假如您是在大家网址的 开拓者博客 部分阅读那篇文章的话,很幸运。

当您使用帮衬的浏览器采访大家的 开荒者博客 中的页面包车型大巴时候,一切就计划妥善了。断开你的网络连接,然后刷新一下页面。要是您本身没条件尝试的话,能够看一下这段 亲自过问录制(译者注:需梯子)。

1. 什么是Service Worker

Service Worker是Google发起的兑现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、能唤醒顾客把网址增多一个Logo到桌面上等。

加速效果

首页加速后,网络央浼从16降为1,加载时间从2.296s降为0.654s,获得了弹指间加载的结果。

巴黎人澳门官网 10

基于webpagetest

查看测验结果

瑟维斯 Worker的生命周期

瑟维斯 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

开展阅读

别的,还应该有多少个很棒的离线作用案例。如:Guardian 营造了一个具备 crossword puzzle(填字游戏)的离线 web 页面 – 由此,尽管等待互连网重连时(即已在离线状态下),也能找到一点野趣。我也援引看看 Google Chrome Github repo,它蕴涵了多数不等的 瑟维斯 Worker 案例 – 个中部分利用案例也在这!

只是,要是您想跳过上述代码,只是想大致地通过二个库来管理有关操作,那么作者推荐你看看 UpUp。这是二个轻量的台本,能让您更自在地利用离线效能。

打赏支持自身翻译更加的多好小说,多谢!

打赏译者

做事规律

因此一段简单的 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的文章。

打赏支持自身翻译越多好小说,谢谢!

打赏译者

2. Service Worker的支撑情状

Service Worker如今唯有Chrome/Firfox/Opera匡助:

巴黎人澳门官网 12

Safari和Edge也在预备援助瑟维斯 Worker,由于ServiceWorker是谷歌(Google)主导的一项专门的职业,对于生态相比较密闭的Safari来讲也是迫于时势初步企图援助了,在Safari TP版本,能够观察:

巴黎人澳门官网 13

在尝试效能(Experimental Features)里早就有ServiceWorker的菜单项了,只是尽管张开也是无法用,会提示您还没有兑现:

巴黎人澳门官网 14

但不管什么,至少评释Safari已经策动协理ServiceWorker了。别的还足以看来在当年前年3月揭橥的Safari 11.0.1版本已经支持WebRTC了,所以Safari依然二个腾飞的男女。

艾德ge也图谋支持,所以Service Worker的前景拾贰分美好。

加紧/离线原理探寻

在大家起先写码从前

从这个项目地址拿到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领会最好实践。

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

任选一种支付格局

巴黎人澳门官网 15 巴黎人澳门官网 16

1 赞 3 收藏 1 评论

打赏帮忙自身翻译越来越多好小说,感谢!

巴黎人澳门官网 17

1 赞 收藏 评论

3. 使用Service Worker

ServiceWorker的施用套路是先注册三个Worker,然后后台就能够运行一条线程,能够在那条线程运维的时候去加载一些能源缓存起来,然后监听fetch事件,在这么些事件里拦截页面的呼吁,先看下缓存里有未有,要是有一贯回到,不然常常加载。也许是一同先不缓存,每一种财富央求后再拷贝一份缓存起来,然后下贰遍呼吁的时候缓存里就有了。

本文由巴黎人手机版发布于巴黎人-前端,转载请注明出处:   译文出处巴黎人澳门官网:,针对不同的语

上一篇:没有了 下一篇:没有了
猜你喜欢
热门排行
精彩图文