码迷,mamicode.com
首页 > 系统相关 > 详细

[PWA] 8. Delete old cache and only keep one

时间:2016-05-16 21:58:26      阅读:223      评论:0      收藏:0      [点我收藏+]

标签:

So once you modify the code, service worker will auto create a new one and it won‘t take control over until the previous service work total die(close the tab or nav to a new url). The new service work is in the waiting list.

技术分享

 

Now what we want to do is delete the old caches and only keep the one which is latest installed. 

So the way to do this, is in ‘activate‘ state. So once anything changed, a new service worker is created and push into the waiting list. Then we want to delete old caches only keep the static one.

var staticCacheName = wittr-demo-v13;

self.addEventListener(install, function(event) {
  var urlsToCache = [
    /,
    js/main.js,
    css/main.css,
    imgs/icon.png,
    https://fonts.gstatic.com/s/roboto/v15/2UX7WLTfW3W8TclTUvlFyQ.woff,
    https://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff
  ];

  event.waitUntil(
      caches.open(staticCacheName).then( (cache) => {
          cache.addAll(urlsToCache);
      })
  );
});

self.addEventListener(activate, function(event){
    event.waitUntil(
        // Get all the cache name
        caches.keys().then(function(cacheNames){
            // wait all cache deleted
            return Promise.all(
                // filter out staticCacheName (only keep staticCacheName)
                cacheNames.filter( function(name){
                    return name.startsWith(wittr) && name != staticCacheName;
                }).map(function(name){
                    // delete cache, return promise
                    return caches.delete(name);
                })
            )
        })
    )
})

 

So in the code, the static one is ‘wittr-demo-v13‘. 

We use two apis:

caches.keys() // return a promise with all the cache name

caches.delete(name) // return a promise and delete the selected cache

技术分享

Now only v13 is left.

 

[PWA] 8. Delete old cache and only keep one

标签:

原文地址:http://www.cnblogs.com/Answer1215/p/5499522.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!