worker落成加速

2019-12-08 01:51栏目:网站建设

应用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上全部这几个职能成为可能。

加紧/离线访谈只需三步

  • 首页增加注册代码

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,在无网络时图片能源须求重返该公文。

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,那你要求先读书这篇文章。

加快效果

首页加快后,网络需要从16降为1,加载时间从2.296s降为0.654s,得到了瞬间加载的结果。

图片 3

基于webpagetest

查看测量检验结果

Service 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初次安装的生命周期:

图片 4

加快/离线原理索求

在大家起始写码在此之前

从这个项目地址拿到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摸底最棒实施。

什么是 Service worker

图片 5

如上图,Service worker 是后生可畏种由Javascript编写的浏览器端代理脚本,坐落于你的浏览器和服务器之间。当叁个页面注册了一个 Service worker,它就能够注册豆蔻梢头多种事件微机来响应如互联网恳求和信息推送那个事件。Service worker 能够被用来保管缓存,当响应一个互连网央求时得以配备为回去缓存依然从网络获取。由于Service worker 是基于事件的,所以它只在管理那么些事件的时候被调入内部存款和储蓄器,不用操心常驻内部存款和储蓄器占用财富招致系统变慢。

使用Service Worker

今昔大家有了polyfill,况兼解决了HTTPS,让大家看见到底怎么用service worker。

Service worker生命周期

图片 6

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,你需求在你的页面上注册它。那些手续告诉浏览器你的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是否对你的网站启用了。

图片 7

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

你会发觉那几个功用可以很有益地在几个仿照窗口中测验你的service worker,那样你能够关闭和重新张开它,而不会影响到你的新窗口。任何成立在模拟窗口中的注册服务和缓存在窗口被关闭时都将熄灭。

Service worker的主宰从第三回页面访谈开始

在第三回加载页面时,全部能源都以从网络载的,Service worker 在第贰遍加载时不会拿走调节网络响应,它只会在那起彼伏访谈页面时起效果。

图片 8

页面第一遍加载时成功install,并步入idle状态。

图片 9

页面第贰次加载时,步入activated状态,策画管理全部的平地风波,同时 浏览器会向服务器发送八个异步 央浼来检查Service worker自己是还是不是有新的本子,构成了Service worker的翻新机制。

图片 10

Service worker拍卖完全体的平地风波后,步入idle状态,最后进入terminated状态资源被放走,当有新的风云发生时再也被调用。

Service Worker的装置步骤

在页面上做到注册手续之后,让我们把集中力转到service worker的脚本里来,在这里在那之中,大家要成功它的装置步骤。

在最宗旨的例证中,你须要为install事件定义二个callback,并决定怎么样文件你想要缓存。

JavaScript

// The files we want to cache var urlsToCache = [ '/', '/styles/main.css', '/script/main.js' ]; // Set the callback for the install step self.addEventListener('install', function(event) { // Perform install steps });

1
2
3
4
5
6
7
8
9
10
11
// The files we want to cache
var urlsToCache = [
  '/',
  '/styles/main.css',
  '/script/main.js'
];
 
// Set the callback for the install step
self.addEventListener('install', function(event) {
    // Perform install steps
});

在大家的install callback中,大家须要进行以下步骤:

  1. 翻开二个缓存
  2. 缓存大家的文书
  3. 垄断(monopoly卡塔尔国是或不是享有的能源是或不是要被缓存

JavaScript

var CACHE_NAME = 'my-site-cache-v1'; var urlsToCache = [ '/', '/styles/main.css', '/script/main.js' ]; self.addEventListener('install', function(event) { // Perform install steps event.waitUntil( caches.open(CACHE_NAME) .then(function(cache) { console.log('Opened cache'); return cache.addAll(urlsToCache); }) ); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var CACHE_NAME = 'my-site-cache-v1';
var urlsToCache = [
  '/',
  '/styles/main.css',
  '/script/main.js'
];
 
self.addEventListener('install', function(event) {
  // Perform install steps
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

上边的代码中,大家通过caches.open张开大家钦点的cache文件名,然后我们调用cache.addAll并传播大家的文本数组。那是由此多元promise(caches.open 和 cache.addAll)达成的。event.waitUntil得到一个promise并应用它来博取安装成本的岁月甚至是还是不是安装成功。

万一具有的文件都被缓存成功了,那么service worker就设置成功了。假若别的多个文件下载战败,那么安装步骤就能倒闭。那个主意允许你依附于你自身钦点的有着能源,不过那意味你供给特别谨严地垄断(monopoly卡塔尔(قطر‎哪些文件须求在安装步骤中被缓存。钦定了太多的文书的话,就能够增添设置失利率。

地点只是一个精练的事例,你能够在install事件中推行其它操作如故以致忽略install事件。

特点

  • 浏览器

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所处的情形是并行隔断的。

图片 11

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

接纳系统事件,后台运转

  • 事件驱动,须求时运维,无需时就告黄金年代段落

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

  • 可升级

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

什么缓存和重回Request

你早就安装了service worker,你今后得以回到您缓存的央求了。

当service worker被装置成功还要顾客浏览了另叁个页面也许刷新了当下的页面,service worker将起来收受到fetch事件。上边是几个例子:

JavaScript

self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request) .then(function(response) { // Cache hit - return response if (response) { return response; } return fetch(event.request); } ) ); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }
 
        return fetch(event.request);
      }
    )
  );
});

上面的代码里大家定义了fetch事件,在event.respondWith里,我们传入了贰个由caches.match发生的promise.caches.match 查找request中被service worker缓存命中的response。

若果大家有叁个命中的response,大家回去被缓存的值,不然咱们回去叁个实时从互连网诉求fetch的结果。那是二个非常简单的事例,使用全部在install步骤下被缓存的财富。

假定大家想要增量地缓存新的哀告,我们能够透过拍卖fetch诉求的response而且增加它们到缓存中来贯彻,举个例子:

JavaScript

self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request) .then(function(response) { // Cache hit - return response if (response) { return response; } // IMPORTANT: Clone the request. A request is a stream and // can only be consumed once. Since we are consuming this // once by cache and once by the browser for fetch, we need // to clone the response var fetchRequest = event.request.clone(); return fetch(fetchRequest).then( function(response) { // Check if we received a valid response if(!response || response.status !== 200 || response.type !== 'basic') { return response; } // IMPORTANT: Clone the response. A response is a stream // and because we want the browser to consume the response // as well as the cache consuming the response, we need // to clone it so we have 2 stream. var responseToCache = response.clone(); caches.open(CACHE_NAME) .then(function(cache) { cache.put(event.request, responseToCache); }); return response; } ); }) ); });

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
28
29
30
31
32
33
34
35
36
37
38
39
self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }
 
        // IMPORTANT: Clone the request. A request is a stream and
        // can only be consumed once. Since we are consuming this
        // once by cache and once by the browser for fetch, we need
        // to clone the response
        var fetchRequest = event.request.clone();
 
        return fetch(fetchRequest).then(
          function(response) {
            // Check if we received a valid response
            if(!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }
 
            // IMPORTANT: Clone the response. A response is a stream
            // and because we want the browser to consume the response
            // as well as the cache consuming the response, we need
            // to clone it so we have 2 stream.
            var responseToCache = response.clone();
 
            caches.open(CACHE_NAME)
              .then(function(cache) {
                cache.put(event.request, responseToCache);
              });
 
            return response;
          }
        );
      })
    );
});

代码里我们所做业务包蕴:

  1. 增加三个callback到fetch诉求的 .then 方法中
  2. 借使大家获取了贰个response,我们开展如下的反省:
    1. 保证response是实用的
    2. 反省response的景况是不是是200
    3. 保证response的花色是basic,那象征哀告笔者是同源的,非同源(即跨域)的号召也不可能被缓存。
  3. 意气风发经大家透过了反省,clone这些央浼。这么做的来头是借使response是贰个Stream,那么它的body只好被读取二回,所以大家得将它克隆出来,风度翩翩份发给浏览器,黄金时代份发给缓存。

贯彻加速/离线

什么样改善一个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);
          }
        })
      );
    })
  );
});

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所提供的增进功用。

瑟维斯 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);
    });

若果设置退步了,未有超级高贵的诀要获得通报

假如三个worker被注册了,不过从未出未来chrome://inspect/#service-workers或chrome://serviceworker-internals,那么很可能因为异常而安装失败了,或者是产生了一个被拒绝的的promise给event.waitUtil。

要解决那类难题,首先到 chrome://serviceworker-internals检查。打开开发者工具窗口准备调试,然后在你的install event代码中添加debugger;语句。这样,通过断点调试你更容易找到问题。

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

fetch(卡塔尔(قطر‎方今仅协助瑟维斯 Workers

fetch马上补助在页面上采纳了,不过当前的Chrome完成,它还只帮助service worker。cache API也将在要页面上被扶持,不过近年来截止,cache也还一定要在service worker中用。

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(卡塔尔的暗中同意参数

当您使用fetch,缺省级地区级,诉求不会带上cookies等证据,要想带上的话,必要:

JavaScript

fetch(url, { credentials: 'include' })

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

如此设计是有理由的,它比XHKoleos的在同源下私下认可发送凭据,但跨域时舍弃凭据的规规矩矩要来得好。fetch的一举一动更像任何的CORAV4S央求,比方<img crossorigin>,它默认不发送cookies,除非你指定了<img crossorigin="use-credentials">.。

fetch

JavaScript

//////// // Fetch //////// function onFetch(event卡塔尔(قطر‎ { const request = event.request; if (shouldAlwaysFetch(request卡塔尔卡塔尔(英语:State of Qatar) { event.respondWith(networkedOrOffline(request卡塔尔卡塔尔(قطر‎; return; } if (shouldFetchAndCache(request卡塔尔(قطر‎卡塔尔 { event.respondWith(networkedOrCached(request卡塔尔(قطر‎卡塔尔国; return; } event.respondWith(cachedOrNetworked(request卡塔尔卡塔尔(英语:State of Qatar); } 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做为浏览器网络请求的代理,根据需要返回网络或缓存内容,如果获取了网络内容,返回网络请求时同时进行缓存操作。

Non-CO昂科威S暗中同意不协理

暗中同意情形下,从第三方UXC90L跨域得到三个能源将会退步,除非对方接济了CO逍客S。你可以增添贰个non-COEscortS选项到Request去制止失利。代价是如此做会回到八个“不透明”的response,意味着你无法意识到那几个央求毕竟是打响了依旧诉讼失败了。

JavaScript

cache.addAll(urlsToPrefetch.map(function(urlToPrefetch) { return new Request(urlToPrefetch, { mode: 'no-cors' }); })).then(function() { console.log('All resources have been fetched and cached.'); });

1
2
3
4
5
cache.addAll(urlsToPrefetch.map(function(urlToPrefetch) {
  return new Request(urlToPrefetch, { mode: 'no-cors' });
})).then(function() {
  console.log('All resources have been fetched and cached.');
});

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

fetch(卡塔尔不遵照30x重定向标准

不幸,重定向在fetch(卡塔尔中不会被触发,那是现阶段版本的bug;

管理 Service worker

拍卖响应式图片

img的srcset属性或许<picture>标签会根据情况从浏览器或者网络上选择最合适尺寸的图片。

在service worker中,你想要在install步骤缓存三个图片,你有以下两种采用:

  1. 安装具备的<picture>元素或者将被请求的srcset属性。
  2. 安装单大器晚成的low-res版本图片
  3. 安装单风度翩翩的high-res版本图片

正如好的方案是2或3,因为固然把装有的图样都给下载下来存着有一点点浪费内部存款和储蓄器。

豆蔻年华经你将low-res版本在install的时候缓存了,然后在页面加载的时候你想要尝试从网络上下载high-res的版本,但是只要high-res版本下载失利以来,就依然用low-res版本。那些主张很好也值得去做,不过有一个主题素材:

若是大家有上边二种图片:

Screen Density Width Height
1x 400 400
2x 800 800

HTML代码如下:

JavaScript

<img src="image-src.png" srcset="image-src.png 1x, image-2x.png 2x" />

1
<img src="image-src.png" srcset="image-src.png 1x, image-2x.png 2x" />

生机勃勃旦大家在二个2x的展现方式下,浏览器会下载image-2x.png,假设大家离线,你能够读取以前缓存并回到image-src.png代替,倘诺早先它已经被缓存过。就算如此,由于即日的形式是2x,浏览器会把400X400的图形显示成200X200,要制止那几个主题素材就要在图片的样式上安装宽高。

JavaScript

<img src="image-src.png" srcset="image-src.png 1x, image-2x.png 2x" style="width:400px; height: 400px;" />

1
2
<img src="image-src.png" srcset="image-src.png 1x, image-2x.png 2x"
style="width:400px; height: 400px;" />

图片 12

<picture>标签情况更复杂一些,难度取决于你是如何创建和使用的,但是可以通过与srcset类似的思路去解决。

一定网址

  1. Google Chrome

Developer Tools->Application->Service Workers

图片 13

在此边还会有三个极其管用的复选框:

  • Offline

模仿断网状态

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

除非在Settings里有叁个得以在HTTP景况中央银行使Service worker的选项,适应于调节和测量试验,未有单独网址下的Service worker管理。

图片 14

  1. Opera及别的双核浏览器同Google Chrome
    尽管看到多少个同样范围内的四个Service worker,说明Service woker更新后,而原有Service worker还没被terminated。

改变URL Hash的Bug

在M40版本中存在二个bug,它会让页面在改换hash的时候产生service worker截至职业。

您能够在这里处找到越来越多相关的新闻: 

浏览器全局

拜谒您的浏览器里都有啥样Service worker已经存在了

  1. Google Chrome

在地址栏里输入:

JavaScript

chrome://serviceworker-internals/

1
chrome://serviceworker-internals/

能够看出曾经有贰12个Serviceworker了,在那能够手动Start让它专门的职业,也足以Unregister卸载掉。

图片 15

  1. Firefox

有三种方式步向Service worker拘禁分界面来手动Start或unregister。

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

JavaScript

about:debugging#workers

1
about:debugging#workers

图片 16

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

越多内容

这里有部分连锁的文书档案能够参考:

更多

TODO:

  • Service workers的改进需求手动编辑version,每趟公布新小说时索要编写制定。
  • 使用AMP让页面渲染速度到达最高。

获得扶助

即使你遇上麻烦,请在Stackoverflow上发帖询问,使用‘service-worker’标签,以便于大家立刻跟进和尽可能援救您消除难点。

赞 2 收藏 评论

图片 17

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

图片 18

版权声明:本文由威尼斯网站发布于网站建设,转载请注明出处:worker落成加速