阅读 509

前端缓存之:Service Worker

什么是Service Worker

Service worker是一个注册在指定源和路径下的事件驱动worker。它采用JavaScript控制关联的页面或者网站,拦截并修改访问和资源请求,细粒度地缓存资源。Service Worker 可以使你的应用先访问本地缓存资源,包括js、css、png、json等多种静态资源。

Service Worker的特点

  1. 独立于主JavaScript线程(这就意味着它的运行丝毫不会影响我们主进程的加载性能)
  2. 设计完全异步,大量使用Promise(因为通常Service Worker通常会等待响应后继续,Promise再合适不过了)
  3. 不能访问DOM,不能使用XHR和localStorage
  4. Service Worker只能由HTTPS承载(出于安全考虑)

Service Worker的生命周期

image.png

Service Worker用法

注册

使用 ServiceWorkerContainer.register() 方法注册service worker。

// sw.js
if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/loading-page-sw.js', {scope: '/'}).then(function(reg) {
	// reg可以查看当前sw的状态和作用域等 
    }).catch(function(error) {
        // registration failed
        console.log('Registration failed with ' + error);
    });
}

复制代码

缓存处理

  • caches.open(SW_VERSION):打开缓存, SW_VERSION: 版本
  • cache.addAll(CACHE_FILE_LIST):添加缓存, CACHE_FILE_LIST:文件路径列表
  • caches.keys():获取本地存储的版本集合
  • caches.delete(key): 删除某个版本的缓存信息
  • cache.put(event.request, responseClone):手动添加缓存,参数为request,response

下面附完整代码

// loading-page-sw.js
const SW_VERSION = 'V1';
const CACHE_FILE_TYPE = [ 'js','css', 'html','jpg','json','png''mp3','wav','mp4','ttf'];
//需要确认缓存的文件
const CACHE_FILE_LIST = [];
// 需要忽悠的文件列表
const IGNORE_FILE_LIST = [
  '/test/index.js',
];
/**
 * 是否是对应的文件类型
 * @param {*} url 
 */
function isAcceptFile(url) {
  var r = new RegExp("\\.(" + CACHE_FILE_TYPE.join('|') + ")$");
  return r.test(url);
}
/**
 * 检查文件名
 */
function checkIgnoreFileName(url) {
  var r = new RegExp("(" + IGNORE_FILE_LIST.join('|') + ")$");
  return r.test(url);
}
self.addEventListener('install', function(event) {
    event.waitUntil(
      caches.open(SW_VERSION).then(function(cache) {
        return cache.addAll(CACHE_FILE_LIST);
      })
    );
  });
self.addEventListener('activate', function(event) {
    var cacheWhitelist = [SW_VERSION];
    event.waitUntil(
      caches.keys().then(function(keyList) {
        return Promise.all(keyList.map(function(key) {
          if (cacheWhitelist.indexOf(key) === -1) {
            return caches.delete(key);
          }
        }));
      })
    );
  });
  self.addEventListener('fetch', function(event) {
    const {method, url} = event.request;
    event.respondWith(
      caches.match(event.request).then(function(response) {
          if (response !== undefined) {
              return response;
          } else {
              return fetch(event.request).then(function (response) {
                  let responseClone = response.clone();
                  if (method === 'POST') {
                    return response
                  }
                  if (!isAcceptFile(url)) {
                    return response
                  }
                  if (checkIgnoreFileName(url)) {
                    return response
                  }
                  caches.open(SW_VERSION).then(function (cache) {
                    cache.put(event.request, responseClone);
                  });
                  return response;
              }).catch(function (error) {
                 return Promise.reject(error);
              });
          }
      })
    );
  });
复制代码

service worker调试检查

查看service worker进程状态

  • service worker实际上提供的是本地缓存服务,所以和我们平时查看localStorage差不多,打开谷歌浏览器调试中心,在Application栏下,就能看到Service Woerkers,如图:

image.png

  • 可通过右侧Unregister来注销service worker进程。

查看本地存储信息

  • service worker会根据我们的版本在本地存储相应版本的文件,如图:

image.png

  • V1: 是我们自定义的版本号
  • 缓存的文件已列表的形式被列出,信息有名称、返回类型、上下文长度、缓存时间等。

HTTP缓存

当我们的页面发起资源请求时,浏览器会通过缓存等手段来尽快响应,避免不必要的http消耗,所以我们经常见到:Memory Cache、Disk Cache、Push Cache,现在又多了一种ServiceWorker。我们来简单对比如下:

ServiceWorker

当我们启用ServiceWorker时,浏览器就会显示我们的资源来自ServiceWorker。Service Worker的缓存有别与其他缓存机制,我们可以自由控制缓存、文件匹配、读取缓存,并且是持续性的。当ServiceWorker没有命中时才会去重新请求数据。

Memory Cache

Memory Cache为内存中的缓存,读取内存中的资源是非常快的,内存读取虽然快且高效,但它是短暂的,当浏览器或者tab页面关闭,内存就会被释放了。而且内存占用过多会导致浏览器占用计算机过大内存,你要知道一台计算机的内存是有限的。

Disk Cache

Disk Cache 将资源存储在硬盘中,读取速度次于Memory Cache,但可长期存储,可定义时效时间,覆盖面比较大的;Disk Cache 会根据http header来启用的缓存策略来做缓存,即强缓存和协商缓存。

Push Cache

当以上三种缓存都没有命中时才会使用Push Cache。它只在会话(Session)中存在,一旦会话结束就被释放,并且缓存时间也很短暂。

  • 我们通过network,最直观的查看资源用的缓存方式。如图所示:

image.png

image.png

Service Worker注销和删除

我们对Service Worker已经做了用法说明,并和其他缓存做了对比;最后我们来说说如何注销Service Worker和删除本地缓存吧!

注销

通过调用unregister()函数来注销,代码如下:

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.getRegistrations()
    .then(function(registrations){
        registrations.forEach(function(registration) {
            registration.unregister();
        })
    })
}
复制代码

删除

通过调用caches.delete()删除对,代码如下:

if (window.caches && caches.keys) {
    caches.keys().then(function(keys) {
        keys.forEach(function(key) {
            caches.delete(key)
        })
    })
}
复制代码

写在最后

由于Service Worker是单独运行环境,独立于主JavaScript进程的,导致前端获取的navigator.userAgent和后台获取的userAgent不一样,若在项目中需要使用Service worker时需观察自身业务是否有影响,多做测试观察。

文章分类
前端
文章标签