快捷搜索:
来自 新京葡娱乐场网址 2019-06-15 16:04 的文章
当前位置: 67677新澳门手机版 > 新京葡娱乐场网址 > 正文

新京葡娱乐场网址:Service Worker入门

Service Worker入门

2015/03/26 · JavaScript · Service Worker

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

  • 十年踪迹]()   

原生App具有Web应用一般所不享有的富离线体验,定期的敦默寡言更新,音讯通告推送等功用。而新的Serviceworkers典型让在Web App上富有这一个功能成为也许。

Service Worker初体验

2016/01/06 · JavaScript · Service Worker

初稿出处: AlloyTeam   

在贰零壹陆年,W3C宣布了service worker的草案,service worker提供了相当的多新的工夫,使得web app具备与native app同样的离线体验、新闻推送体验。
service worker是一段脚本,与web worker一样,也是在后台运维。作为三个独门的线程,运维条件与普通脚本差异,所以不可能直接参与web交互行为。native app可以完毕离线使用、信息推送、后台自动更新,service worker的面世是幸亏为了使得web app也得以具备类似的力量。

 

service worker可以:

  1. 后台新闻传递
  2. 互连网代理,转发呼吁,伪造响应
  3. 离线缓存
  4. 信息推送
  5.  … …

本文以财富缓存为例,说美赞臣(Meadjohnson)下service worker是何许行事的。

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的运营周期

新京葡娱乐场网址 1
上图是service worker生命周期,出处

图中得以观察,八个service worker要经历以下进度:

  1.  安装

2.  激活,激活成功之后,打开chrome://inspect/#service-workers能够查阅到当前运转的service worker

新京葡娱乐场网址 2

  1. 监听fetch和message事件,下面三种事件会议及展览开简单描述

  2. 销毁,是不是销毁由浏览器决定,若是三个service worker长期不选取仍然机器内部存款和储蓄器有数,则大概会销毁那一个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初次安装的生命周期:

新京葡娱乐场网址 3

fetch事件

在页面发起http请求时,service worker能够通过fetch事件拦截请求,并且付诸自个儿的响应。
w3c提供了五个新的fetch api,用于代替XMLHttpRequest,与XMLHttpRequest最大分歧有两点:

1. fetch()方法重返的是Promise对象,通过then方法进行再三再四调用,收缩嵌套。ES6的Promise在成为行业内部之后,会更加的便利开采职员。

2. 提供了Request、Response对象,即便做过后端开荒,对Request、Response应该相比较熟知。前端要提倡呼吁能够因此url发起,也得以运用Request对象发起,而且Request能够复用。然而Response用在哪个地方啊?在service worker出现在此之前,前端确实不会协和给自个儿发音信,不过有了service worker,就能够在拦截请求之后听他们说需求发回本人的响应,对页面来说,那几个一般的请求结果并从未分别,这是Response的一处采用。

下边是在中,我利用fetch api通过fliker的当众api获取图片的例子,注释中详尽解释了每一步的功力:

JavaScript

/* 由于是get请求,直接把参数作为query string传递了 */ var URL = ''; function fetch德姆o() { // fetch(url, option)帮衬五个参数,option中得以安装header、body、method信息fetch(U翼虎L).then(function(response) { // 通过promise 对象得到对应内容,并且将响应内容依照json格式转成对象,json()方法调用之后回来的依旧是promise对象 // 也足以把内容转化成arraybuffer、blob对象 return response.json(); }).then(function(json) { // 渲染页面 insertPhotos(json); }); } fetch德姆o();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* 由于是get请求,直接把参数作为query string传递了 */
var URL = 'https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=your_api_key&format=json&nojsoncallback=1&tags=penguins';
 
function fetchDemo() {
  // fetch(url, option)支持两个参数,option中可以设置header、body、method信息
  fetch(URL).then(function(response) {
    // 通过promise 对象获得相应内容,并且将响应内容按照json格式转成对象,json()方法调用之后返回的依然是promise对象
    // 也可以把内容转化成arraybuffer、blob对象
    return response.json();
  }).then(function(json) {
    // 渲染页面
    insertPhotos(json);
  });
}
 
fetchDemo();

fetch api与XMLHttpRequest相比较,尤其从简,并且提供的成效更健全,财富获得格局比ajax更优雅。包容性方面:chrome 42开端协理,对于旧浏览器,能够因而法定维护的polyfill协助。

在我们初阶写码从前

从这个花色地址拿到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刺探最佳施行。

message事件

页面和serviceWorker之间能够经过posetMessage()方法发送消息,发送的音讯能够由此message事件接收到。

这是二个双向的经过,页面能够发音信给service worker,service worker也得以发送音讯给页面,由于那一个特点,能够将service worker作为中间纽带,使得一个域名依旧子域名下的多个页面能够专断通讯。

此处是一个小的页面之间通讯demo

使用Service Worker

现行反革命大家有了polyfill,并且化解了HTTPS,让我们看看究竟怎么用service worker。

利用service workder缓存文件

上面介绍多个使用service worker缓存离线文件的例子
预备index.js,用于注册service-worker

JavaScript

if (navigator.serviceWorker) { navigator.serviceWorker.register('service-worker.js').then(function(registration) { console.log('service worker 注册成功'); }).catch(function (err) { console.log('servcie worker 注册战败') }); }

1
2
3
4
5
6
7
if (navigator.serviceWorker) {
    navigator.serviceWorker.register('service-worker.js').then(function(registration) {
        console.log('service worker 注册成功');
    }).catch(function (err) {
        console.log('servcie worker 注册失败')
    });
}

在上述代码中,注册了service-worker.js作为当下路径下的service worker。由于service worker的权柄相当高,全体的代码都需若是安全可信的,所以唯有https站点才足以利用service worker,当然localhost是八个特例。
注册停止,今后始于写service-worker.js代码。
传闻后边的生命周期图,在贰个新的service worker被注册之后,首先会触发install事件,在service-workder.js中,能够因而监听install事件打开局地伊始化专门的职业,或然怎么样也不做。
因为我们是要缓存离线文件,所以可以在install事件中起头缓存,可是只是将文件加到caches缓存中,真正想让浏览器选取缓存文件须要在fetch事件中梗阻

JavaScript

var cacheFiles = [ 'about.js', 'blog.js' ]; self.addEventListener('install', function (evt) { evt.waitUntil( caches.open('my-test-cahce-v1').then(function (cache) { return cache.addAll(cacheFiles); }) ); });

1
2
3
4
5
6
7
8
9
10
11
var cacheFiles = [
    'about.js',
    'blog.js'
];
self.addEventListener('install', function (evt) {
    evt.waitUntil(
        caches.open('my-test-cahce-v1').then(function (cache) {
            return cache.addAll(cacheFiles);
        })
    );
});

第一定义了亟需缓存的公文数组cacheFile,然后在install事件中,缓存这么些文件。
evt是贰个Install伊夫nt对象,继承自Extendable伊夫nt,个中的waitUntil()方法接收三个promise对象,直到这一个promise对象成功resolve之后,才会持续运转service-worker.js。
caches是三个CacheStorage对象,使用open()方法展开一个缓存,缓存通过名称进行区分。
获取cache实例之后,调用addAll()方法缓存文件。

诸如此类就将文件增多到caches缓存中了,想让浏览器采纳缓存,还索要拦截fetch事件

JavaScript

// 缓存图片 self.add伊夫ntListener('fetch', function (evt) { evt.respondWith( caches.match(evt.request).then(function(response) { if (response) { return response; } var request = evt.request.clone(); return fetch(request).then(function (response) { if (!response && response.status !== 200 && !response.headers.get('Content-type').match(/image/)) { return response; } var responseClone = response.clone(); caches.open('my-test-cache-v1').then(function (cache) { cache.put(evt.request, responseClone); }); return response; }); }) ) });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 缓存图片
self.addEventListener('fetch', function (evt) {
    evt.respondWith(
        caches.match(evt.request).then(function(response) {
            if (response) {
                return response;
            }
            var request = evt.request.clone();
            return fetch(request).then(function (response) {
                if (!response && response.status !== 200 && !response.headers.get('Content-type').match(/image/)) {
                    return response;
                }
                var responseClone = response.clone();
                caches.open('my-test-cache-v1').then(function (cache) {
                    cache.put(evt.request, responseClone);
                });
                return response;
            });
        })
    )
});

由此监听fetch事件,service worker能够重返本身的响应。

第一检缓存中是或不是早已缓存了那些请求,倘诺有,就一贯回到响应,就收缩了一次网络请求。不然由service workder发起请求,那时的service workder起到了贰当中级代理的功用。

service worker请求的经过通过fetch api落成,获得response对象今后进行过滤,查看是不是是图片文件,若是或不是,就径直回到请求,不会缓存。

假如是图形,要先复制一份response,原因是request或然response对象属于stream,只好使用一遍,之后一份存入缓存,另一份发送给页面。
那就是service worker的兵不血刃之处:拦截请求,伪造响应。fetch api在那边也起到了比极大的功效。

 

service worker的革新很简单,只要service-worker.js的公文内容有更新,就能动用新的台本。但是有几许要专注:旧缓存文件的排除、新文件的缓存要在activate事件中开始展览,因为大概旧的页面还在利用以前的缓存文件,清除之后会失掉效率。

 

在首先使用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是否对你的网站启用了。

新京葡娱乐场网址 4

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

你会发觉那个效能能够很有益地在八个模拟窗口中测试你的service worker,这样您能够关闭和再度张开它,而不会潜移默化到你的新窗口。任何制造在模拟窗口中的注册服务和缓存在窗口被关门时都将化为乌有。

题目1. 运维时刻

service worker并不是一贯在后台运转的。在页面关闭后,浏览器能够承接维持service worker运营,也足以关闭service worker,那取决与浏览器自身的一坐一起。所以并非定义一些全局变量,举个例子上面包车型地铁代码(来自):

JavaScript

var hitCounter = 0; this.addEventListener('fetch', function(event) { hitCounter ; event.respondWith( new Response('Hit number ' hitCounter) ); });

1
2
3
4
5
6
7
8
var hitCounter = 0;
 
this.addEventListener('fetch', function(event) {
  hitCounter ;
  event.respondWith(
    new Response('Hit number ' hitCounter)
  );
});

重回的结果恐怕是向来不规律的:1,2,1,2,1,1,2….,原因是hitCounter并从未一向存在,如若浏览器关闭了它,下一次起步的时候hitCounter就赋值为0了
如此那般的作业导致调节和测试代码困难,当你更新叁个service worker以往,唯有在开发新页面未来才大概应用新的service worker,在调整进程中不常等上一两分钟才会使用新的,比较抓狂。

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. 调整是或不是有所的财富是或不是要被缓存

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就安装成功了。假如此外二个文件下载战败,那么安装步骤就能倒闭。这几个点子允许你依据于您和谐钦定的具备财富,不过那象征你需求特别心惊肉跳地决定哪些文件须求在装置步骤中被缓存。钦定了太多的文件的话,就能够扩张设置失利率。

上边只是多个简约的事例,你能够在install事件中奉行其它操作依旧以至忽视install事件。

题目2. 权力太大

当service worker监听fetch事件今后,对应的恳求都会经过service worker。通过chrome的network工具,能够看出此类请求会标记:from service worker。借使service worker中冒出了难点,会促成全数请求战败,包涵普通的html文件。所以service worker的代码质量、容错性一定要很好技艺担保web app符合规律运维。

 

参照小说:

1. 

2. 

3. 

4. 

5. 

1 赞 3 收藏 评论

新京葡娱乐场网址 5

什么样缓存和重返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);
          }
        })
      );
    })
  );
});

处理边界和填坑

这一节内容比较新,有众多待定细节。希望这一节非常快就没有供给讲了(因为标准会管理那几个标题——译者注),不过以后,那些剧情照旧应该被提一下。

本文由67677新澳门手机版发布于新京葡娱乐场网址,转载请注明出处:新京葡娱乐场网址:Service Worker入门

关键词: