Worker是PWA的核心技术,   译文出处
分类:巴黎人-前端

动用 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的法规是哪些,它是什么样最早职业的。

运用 Service worker 成立多少个非常轻松的离线页面

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

本文由 伯乐在线 - 刘健超-J.c 翻译,艾凌风 校稿。未经许可,禁止转发!
罗马尼亚(罗曼ia)语出处:Dean Hume。应接参与翻译组。

让大家想像以下场景:大家那儿在一辆通往农村的高铁上,用移动设备望着一篇很棒的篇章。与此同不时间,当您点击“查看越来越多”的链接时,高铁陡然步入了隧道,导致运动道具失去了网络,而 web 页面会展现出类似以下的剧情:

图片 1

那是一定令人黯然的经验!幸运的是,web 开拓者们能经过一些新特点来改进那类的顾客体验。小编近来直接在折腾 ServiceWorkers,它给 web 带来的数不胜数恐怕性总能给自个儿惊奇。Service 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

Service Worker是谷歌(Google)倡导的贯彻PWA(Progressive Web App)的贰个重中之重角色,PWA是为了减轻传统Web 应用程式的老毛病:

(1)未有桌面入口

(2)无法离线使用

(3)没有Push推送

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

图片 2

瑟维斯Worker是在后台运维的一条服务Worker线程,上海体育场地作者开了多少个标签页,所以展现了五个Client,可是不管开多少个页面都独有二个Worker在负担管理。那个Worker的干活是把有个别能源缓存起来,然后拦截页面包车型大巴央浼,先看下缓存Curry有没有,假如局地话就从缓存里取,响应200,反之未有的话就走寻常的央浼。具体来讲,ServiceWorker结合Web App Manifest能一气呵成以下职业(那也是PWA的检查实验规范):

图片 3

饱含能够离线使用、断网时再次来到200、能唤起客户把网址增加二个Logo到桌面上等。

第一步:使用HTTPS

渐进式Web应用程序须要运用HTTPS连接。就算选拔HTTPS会让你服务器的成本变多,但运用HTTPS能够让您的网址变得更安全,HTTPS网址在谷歌上的排名也会更靠前。

鉴于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 时,向缓存增添了离线页面。要是大家将代码分为几小块,可看出前几行代码中,笔者为离线页面钦定了缓存版本和URAV4L。假设你的缓存有两样版本,那么您只需革新版本号就能够轻松地化解缓存。在差十分的少在第 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),如: 此案例。

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

瑟维斯Worker是PWA的大旨技巧,它可认为web应用提供离线缓存功能,当然不止如此,下边罗列了一些ServiceWorker的特征:

依赖HTTPS 遭遇,那是营造PWA的硬性前提。(LAMP蒙受网址进级HTTPS技术方案)

是三个独立的 worker 线程,独立于当下网页进程,有投机独立的 worker context

可阻止HTTP央求和响应,可缓存文件,缓存的文本能够在互联网离线状态时取到

能向客商端推送音信

不可能直接操作 DOM

异步达成,内部大都以经过 Promise 达成

2. 瑟维斯 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也计划帮助,所以Service Worker的前景拾贰分美好。

其次步:创设一个应用程序清单(Manifest)

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

  • 应用程序名
  • 描述
  • 全体图片(满含主显示器Logo,运营荧屏页面和用的图形大概网页上用的图样)

精神上讲,程序清单是页面上用到的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: UTiguanL范围。比方:假如你将“/app/”设置为UOdysseyL范围时,那一个应用就能够直接在这些目录中。
  • 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: 贰个暗含全数图片的数组。该数组中各样成分包罗了图片的UEvoqueL,大小和品种。

进展阅读

其余,还应该有多少个很棒的离线成效案例。如: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

Service 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 是一个可编程的服务器代理,它能够阻碍恐怕响应互连网央求。Service 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浏览器帮忙情形

本文由巴黎人手机版发布于巴黎人-前端,转载请注明出处:Worker是PWA的核心技术,   译文出处

上一篇:   译文出处,service worker是一段脚本 下一篇:没有了
猜你喜欢
热门排行
精彩图文