>

即渐进式web应用,原文出处

- 编辑:澳门博发娱乐官网 -

即渐进式web应用,原文出处

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

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

初稿出处: 人人网FED博客   

在上一篇《本人是什么让网址用上HTML5 Manifest》介绍了怎么用Manifest做一个离线网页应用,结果被广泛网络朋友吐槽说那么些事物已经被deprecated,移出web规范了,未来被ServiceWorker取代了,不管什么,Manifest的一对思索还是能借用的。我又将网址晋级到了ServiceWorker,若是是用Chrome等浏览器就用ServiceWorker做离线缓存,如若是Safari浏览器就照旧用Manifest,读者能够展开那个网址感受一下,断网也是能平常展开。

渐进式Web应用(PWA)入门教程(下)

2018/05/25 · 基本功才具 · PWA

原稿出处: Craig Buckler   译文出处:蒲陶城控件   

上篇小说我们对渐进式Web应用(PWA)做了部分为主的牵线。

渐进式Web应用(PWA)入门教程(上)

在这一节中,我们将介绍PWA的原理是如何,它是怎么样起初工作的。

行使 瑟维斯 worker 成立二个非常轻易的离线页面

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

本文由 伯乐在线 - 刘健超-J.c 翻译,艾凌风 校稿。未经许可,禁止转发!
乌克兰(УКРАЇНА)语出处:Dean Hume。款待参预翻译组。

让大家想像以下场景:大家那时候在一辆通往农村的轻轨里,用运动道具望着一篇很棒的稿子。与此同期,当你点击“查看更加多”的链接时,火车溘然步入了隧道,导致运动设备失去了网络,而 web 页面会展现出类似以下的内容:

图片 1

那是一对一令人颓废的感受!幸运的是,web 开采者们能透过某些新本性来创新那类的客商体验。作者多年来一直在折腾 ServiceWorkers,它给 web 带来的数不清只怕性总能给本身喜悦。瑟维斯 Workers 的名特别降价特质之一是同意你检验互联网央浼的气象,并令你作出相应的响应。

在这篇小说里,笔者准备用此本性检查顾客的脚下互连网连接情形,假如没连接则赶回多个至上轻松的离线页面。尽管那是三个丰裕基础的案例,但它能给你带来启迪,让您了然运维并运营该特性是何其的简要!假如你没领悟过 Service Worker,作者提出您看看此 Github repo,驾驭越多相关的消息。

在该案例初叶前,让大家先轻便地看看它的干活流程:

  1. 在客户第一回访谈大家的页面时,大家会设置 ServiceWorker,并向浏览器的缓存增添咱们的离线 HTML 页面
  2. 接下来,若是顾客筹划导航到另叁个 web 页面(同一个网址下),但那时已断网,那么大家将赶回已被缓存的离线 HTML 页面
  3. 可是,要是顾客筹划导航到别的贰个 web 页面,而此时网络已一而再,则能照常浏览页面

Service Worker入门

2015/03/26 · JavaScript · Service Worker

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

  • 十年踪迹]()   

原生App具备Web应用普通所不具备的富离线体验,定期的守口如瓶更新,音讯通告推送等效用。而新的Serviceworkers规范让在Web App上全部那么些成效成为只怕。

关于PWA

PWA(Progressive Web App), 即渐进式web应用。PWA本质上是web应用,目标是经过多项新才干,在平安、质量、体验等地点给顾客原生应用的体验。并且无需像原生应用那样繁琐的下载、安装、进级等操作。

此处表明下概念中的“渐进式”,意思是以此web应用还在持续地升高级中学。因为最近来讲,PWA还尚无成熟到一蹴即至的程度,想在保山、品质、体验上高达原生应用的效劳照旧有这么些的进级空间的。一方面是营造PWA的本金难题,另一方面是当下各大浏览器、安卓和IOS系统对于PWA的支撑和包容性还会有待狠抓。

正文笔者将从网址缓存、http须要拦截、推送到主屏等作用,结合实例操作,一步步引领大家相当的慢玩转PWA技能。

1. 什么是Service Worker

瑟维斯 Worker是谷歌(Google)发起的落实PWA(Progressive Web App)的二个第一剧中人物,PWA是为着化解古板Web 应用程式的劣势:

(1)未有桌面入口

(2)不可能离线使用

(3)没有Push推送

这瑟维斯 Worker的具体表现是如何的吗?如下图所示:

图片 2

ServiceWorker是在后台运营的一条服务Worker线程,上海体育场所笔者开了多少个标签页,所以显得了七个Client,不过不管开几个页面都独有二个Worker在肩负管理。这么些Worker的劳作是把一部分能源缓存起来,然后拦截页面包车型客车伸手,先看下缓存Curry有没有,假诺部分话就从缓存里取,响应200,反之未有的话就走正规的乞请。具体来讲,ServiceWorker结合Web App Manifest能成就以下事业(那也是PWA的检查测量检验正式):

图片 3

归纳能够离线使用、断网时回来200、能唤醒顾客把网址增加一个Logo到桌面上等。

第一步:使用HTTPS

渐进式Web应用程序须要选取HTTPS连接。尽管采用HTTPS会让您服务器的开拓变多,但使用HTTPS能够令你的网址变得更安全,HTTPS网址在Google上的排行也会更靠前。

出于Chrome浏览器会暗中认可将localhost以及127.x.x.x地点视为测量试验地方,所以在本示例中你并无需开启HTTPS。别的,出于调节和测验目标,您可以在起步Chrome浏览器的时候使用以下参数来关闭其对网址HTTPS的自笔者批评:

  • –user-data-dir
  • –unsafety-treat-insecure-origin-as-secure

让大家开首吧

倘使你有以下 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‘。我们筹算用那些 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 时,向缓存增多了离线页面。若是我们将代码分为几小块,可知到前几行代码中,小编为离线页面内定了缓存版本和UTiggoL。假诺您的缓存有区别版本,那么你只需立异版本号就能够简单地排除缓存。在大意在第 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 访谈互联网)

图片 4

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

图片 5

一经你只想大约地质衡量试该意义而不想写任何代码,那么你能够访谈作者已创建好的 demo。别的,上述总体代码能够在 Github repo 找到。

自家精通用在此案例中的页面很轻松,但你的离线页面则取决于你本身!假如您想深远该案例的开始和结果,你可认为离线页面增添缓存破坏( cache busting),如: 此案例。

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

Service Worker

ServiceWorker是PWA的大旨技艺,它亦可为web应用提供离线缓存效能,当然不止如此,下边列举了有的ServiceWorker的天性:

依靠HTTPS 处境,那是创设PWA的硬性前提。(LAMP景况网址晋级HTTPS建设方案)

是三个独自的 worker 线程,独立于前段时间网页进度,有自身单身的 worker context

可拦截HTTP乞请和响应,可缓存文件,缓存的公文能够在互联网离线状态时取到

能向客商端推送音讯

不能够直接操作 DOM

异步实现,内部大都是透过 Promise 完结

2. Service Worker的协理意况

Service Worker近些日子只有Chrome/Firfox/Opera辅助:

图片 6

Safari和Edge也在备选援救Service Worker,由于ServiceWorker是Google基本的一项正式,对于生态相比较密闭的Safari来讲也是迫于局势开端筹算帮衬了,在Safari TP版本,能够看看:

图片 7

在实验作用(Experimental Features)里早就有ServiceWorker的菜单项了,只是尽管打开也是无法用,会提醒您还从未落到实处:

图片 8

但随意怎么样,至少注明Safari已经策动帮助ServiceWorker了。其他还足以看到在当年前年五月文告的Safari 11.0.1版本已经帮忙WebRTC了,所以Safari照旧多个上扬的男女。

Edge也筹算支持,所以瑟维斯 Worker的前景十一分美好。

第二步:创造多个应用程序清单(Manifest)

应用程序清单提供了和当前渐进式Web应用的连带新闻,如:

  • 应用程序名
  • 描述
  • 富有图片(富含主荧屏图标,运营荧屏页面和用的图纸可能网页上用的图形)

精神上讲,程序清单是页面上用到的Logo和主旨等财富的元数据。

程序清单是一个位于您使用根目录的JSON文件。该JSON文件重临时必须抬高Content-Type: application/manifest+json 或者 Content-Type: application/jsonHTTP头消息。程序清单的公文名不限,在本文的演示代码中为manifest.json

{ "name" : "PWA Website", "short_name" : "PWA", "description" : "An example PWA website", "start_url" : "/", "display" : "standalone", "orientation" : "any", "background_color" : "#ACE", "theme_color" : "#ACE", "icons": [ { "src" : "/images/logo/logo072.png", "sizes" : "72x72", "type" : "image/png" }, { "src" : "/images/logo/logo152.png", "sizes" : "152x152", "type" : "image/png" }, { "src" : "/images/logo/logo192.png", "sizes" : "192x192", "type" : "image/png" }, { "src" : "/images/logo/logo256.png", "sizes" : "256x256", "type" : "image/png" }, { "src" : "/images/logo/logo512.png", "sizes" : "512x512", "type" : "image/png" } ] }

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
{
  "name"              : "PWA Website",
  "short_name"        : "PWA",
  "description"       : "An example PWA website",
  "start_url"         : "/",
  "display"           : "standalone",
  "orientation"       : "any",
  "background_color"  : "#ACE",
  "theme_color"       : "#ACE",
  "icons": [
    {
      "src"           : "/images/logo/logo072.png",
      "sizes"         : "72x72",
      "type"          : "image/png"
    },
    {
      "src"           : "/images/logo/logo152.png",
      "sizes"         : "152x152",
      "type"          : "image/png"
    },
    {
      "src"           : "/images/logo/logo192.png",
      "sizes"         : "192x192",
      "type"          : "image/png"
    },
    {
      "src"           : "/images/logo/logo256.png",
      "sizes"         : "256x256",
      "type"          : "image/png"
    },
    {
      "src"           : "/images/logo/logo512.png",
      "sizes"         : "512x512",
      "type"          : "image/png"
    }
  ]
}

程序清单文件营造完事后,你要求在每一个页面上援用该公文:

<link rel="manifest" href="/manifest.json">

1
<link rel="manifest" href="/manifest.json">

以下属性在程序清单中平日利用,介绍表明如下:

  • name: 客商看到的应用名称
  • short_name: 应用短名称。当显示应用名称的地点远远不够时,将运用该名称。
  • description: 动用描述。
  • start_url: 使用起首路线,相对路线,默认为/。
  • scope: U福特ExplorerL范围。举例:假若你将“/app/”设置为UXC60L范围时,这么些应用就能直接在这么些目录中。
  • background_color: 招待页面包车型地铁背景颜色和浏览器的背景颜色(可选)
  • theme_color: 运用的大旨颜色,一般都会和背景颜色同样。那些装置决定了应用怎么着显示。
  • orientation: 优先旋转方向,可选的值有:any, natural, landscape, landscape-primary, landscape-secondary, portrait, portrait-primary, and portrait-secondary
  • display: 显示情势——fullscreen(无Chrome),standalone(和原生应用一样),minimal-ui(最小的一套UI控件集)也许browser(最古老的使用浏览器标签呈现)
  • icons: 二个分包全体图片的数组。该数组中每种成分包括了图片的URAV4L,大小和项目。

进行阅读

另外,还恐怕有多少个很棒的离线成效案例。如:Guardian 创设了一个富有 crossword puzzle(填字游戏)的离线 web 页面 – 因而,即使等待互连网重连时(即已在离线状态下),也能找到一点野趣。小编也援引看看 Google Chrome Github repo,它包含了广大见仁见智的 Service Worker 案例 – 在这之中一些行使案例也在那!

可是,如果您想跳过上述代码,只是想大概地因而多个库来管理有关操作,那么笔者引入你看看 UpUp。那是二个轻量的台本,能让你更轻易地利用离线功用。

打赏援助小编翻译更加多好小说,多谢!

打赏译者

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

图片 9

瑟维斯 Worker生命周期

serviceworker的使用流程能够回顾总计为注册--安装--激活。

登记其实就是报告浏览器serviceworkerJS文件贮存在怎么地方,然后浏览器下载、剖析、实行该公文,进而运维安装。这里小编创制七个app.js文件,注册代码如下,将该公文在网址的head标签里引进。

if ('serviceWorker' in navigator) {

window.addEventListener('load', function () {

navigator.serviceWorker.register

.then(function (registration) {

// 注册成功

console.log('ServiceWorker registration successful with scope: ', registration.scope);

})

.catch(function {

// 注册退步:(

console.log('ServiceWorker registration failed: ', err);

});

});

}

当奉行serviceworkerJS文件时,首先触及的是install事件,进行安装。安装的进程正是将钦命的局地静态能源拓宽离线缓存。下边是本人的sw.js文件中的安装代码:

var CACHE_VERSION = 'sw_v8';

var CACHE_FILES = [

'/js/jquery/min.js',

'/js/zui/min.js',

'/js/chanzhi.js',

];

self.addEventListener('install', function {

event.waitUntil(

caches.open(CACHE_VERSION)

.then(cache => cache.addAll(CACHE_FILES)

));

});

当安装成功后,serviceworker就能够激活,这时就能管理 activate 事件回调 (提供了立异缓存战术的空子)。并得以管理成效性的风浪 fetch 、sync 、push 。

self.addEventListener('activate', function {

event.waitUntil(

caches.keys().then(function{

return Promise.all(keys.map(function{

if(key !== CACHE_VERSION){

return caches.delete;

}

}));

})

);

});

3. 使用Service Worker

ServiceWorker的利用套路是先挂号三个Worker,然后后台就能够运转一条线程,可以在那条线程运行的时候去加载一些能源缓存起来,然后监听fetch事件,在那个事件里拦截页面包车型客车央求,先看下缓存里有未有,借使有一贯回到,否则不奇怪加载。也许是一发轫不缓存,每一种能源央求后再拷贝一份缓存起来,然后下三回呼吁的时候缓存里就有了。

其三步:创制七个 Service Worker

Service Worker 是贰个可编制程序的服务器代理,它能够阻挡也许响应互连网诉求。瑟维斯 Worker 是放在应用程序根目录的贰个个的JavaScript文件。

你供给在页面前碰到应的JavaScript文件中注册该ServiceWorker:

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

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

借令你没有供给离线的相干职能,您可以只开创三个 /service-worker.js文本,那样客户就足以一贯设置您的Web应用了!

ServiceWorker那几个定义大概相比较难懂,它实在是一个做事在其他线程中的规范的Worker,它不能够访谈页面上的DOM成分,未有页面上的API,不过能够阻止全部页面上的互联网央求,包蕴页面导航,央求财富,Ajax央求。

地点便是接纳全站HTTPS的根本原因了。借让你未有在您的网址中利用HTTPS,贰个第三方的脚本就能够从任何的域名注入他本人的ServiceWorker,然后篡改全数的乞请——那如实是那么些危急的。

Service Worker 会响应两个事件:install,activate和fetch。

打赏协理本身翻译越多好小说,多谢!

任选一种支付格局

图片 10 图片 11

1 赞 3 收藏 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打听最好施行。

serviceworker的缓存功效

设置时,serviceworker将我们钦命的静态能源开展缓存,你大概会问,借使是实时的动态内容怎么做,大家不恐怕预先将具备的文本能源提前线指挥部定好,让serviceworker缓存。那就要涉及serviceworker的阻止HTTP央浼响应的特色了。

serviceworker拦截http央浼,首先去检查须求的财富在缓存中是不是留存,如若存在,则直接从缓存中调用,何况就算是无网络状态下,serviceworker也能调用缓存中的能源。假如缓存中绝非伏乞的财富,则经过互连网去服务器上查究,何况在找到并响应时,serviceworker会将其存入缓存中,以备下一次再诉求时一贯从缓存中调用。

图片 12serviceworker缓存流程

serviceworker文件中fetch事件代码如下:

self.addEventListener('fetch', function {

event.respondWith(

caches.match(event.request).then(function{

if{

return response;

}

var requestToCache = event.request.clone();

return fetch(requestToCache).then(

function{

if(!response || response.status !== 200){

return response;

}

var responseToCache = response.clone();

caches.open(CACHE_VERSION)

.then(function{

cache.put(requestToCache, responseToCache);

});

return response;

}

);

})

);

});

在网址前台通过浏览器开辟者工具,我们能够看下从缓存中调用能源的效能:

图片 13serviceworker缓存调用图片 14缓存文件

本人这里操作演示用的是谷歌(Google)浏览器,下边是各大浏览器对于serviceworker的帮衬境况:

图片 15serviceworker浏览器帮衬情状

本文由胜博发-前端发布,转载请注明来源:即渐进式web应用,原文出处