workbox 使用指北

2019-03-27

序

许久没有更新博客了，其实最近搞得事情太多，没有时间在写博客了，这不最近终于有时间可以写一下博客了，这次要写的是关于离线缓存资源以及pwa离线访问相关的东西。

当然咯！事实上对于离线访问资源或者说主动式的缓存策略而言，早已经有框架提供一种更为便捷的方式是实现了 - workbox:

service worker

提起 pwa 我们就不得不提一下 serivce worker, service worker 是一个很早就兴起的概念，它打开了通向不需要网页或用户交互的功能的大门。

我们可以发现 facebook 和谷歌的网页主动式推送就使用了这种方式在后台静默的处理。

简而言之：Service Worker 是浏览器在后台独立于网页运行的脚本。

当然其兼容性也是非常惨淡虽然微软已经说明了会支持，但是显然 ie 以及早期版本的 edge 显然是无法使用的具体可以看这个：

service worker

这里可以尝试前往谷歌的官方指南阅读：【service-work】

这里就简单的介绍一下：

注意如果使用 service worker 你的网站必须使用 https

service worker 主要执行的步骤大致如上所示。

事实上一个 service worker主要的目的还是拦截请求并处理请求的。

那么通过一个 service worker 我们可以简单的做到一个 api 的拦截器,比如像下面这样简单的拦截一下 fetch，如果命中缓存则直接返回缓存。

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);
      }
    )
  );
});

当然单纯的使用 service work 去构建一个 pwa 的缓存策略着实不是一般的麻烦，这里谷歌推出 workbox 用以简化整个 service worker 处理过程

workbox

现在我的博客已经支持 service work 了你可以关闭你的网络连接，刷新一下页面，可以看到现在的页面还是好好的显示的。

然后这是怎么做到的呢？

这很简单，首先受限于加载策略所以service worker是不允许跨域的，这样首先需要加载本地的service worker：

<script>
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('/sw.js', { scope: '/' }).then(function(reg) {
        
            if(reg.installing) {
            console.log('Service worker installing');
            } else if(reg.waiting) {
            console.log('Service worker installed');
            } else if(reg.active) {
            console.log('Service worker active');
            }
        
        }).catch(function(error) {
            // registration failed
            console.log('Registration failed with ' + error);
        });
    }
</script>

这样浏览器就回去 /sw.js 下加载 service worker了，然后下面是具体的执行代码(一般情况下都可以这么使用，但是本站的匹配策略有点奇怪所以并未如此配置)：

// 
importScripts('https://cdn.iceprosurface.com/workbox/workbox-sw.js')
workbox.setConfig({
    // 设置 cdn 前缀
    modulePathPrefix: 'https://cdn.iceprosurface.com/workbox/',
    debug: false
});

// 注册成功后要立即缓存的资源列表
workbox.precaching.precache([
  'https://avatars.githubusercontent.com/iceprosurface'
]);

// html的缓存策略
workbox.routing.registerRoute(
    '/(.*?)\/$',
    new workbox.strategies.NetworkFirst({
        cacheName: 'index',
        plugins: [
            new workbox.expiration.Plugin({
                maxAgeSeconds: 7 * 24 * 60 * 60,
            }),
        ],
    }),
)

// html的缓存策略
workbox.routing.registerRoute(
    new RegExp('.*.html'),
    new workbox.strategies.NetworkFirst({
        cacheName: 'html-main',
        plugins: [
            new workbox.expiration.Plugin({
                maxEntries: 20,
                maxAgeSeconds: 7 * 24 * 60 * 60,
            }),
        ],
    }),
)

workbox.routing.registerRoute(
    new RegExp('.*.(js|css)'),
    new workbox.strategies.NetworkFirst({
        cacheName: 'icepro-resource',
        plugins: [
            new workbox.expiration.Plugin({
                maxEntries: 20,
                maxAgeSeconds: 7 * 24 * 60 * 60,
            }),
        ],
    }),
)

workbox.routing.registerRoute(
    new RegExp('https://cdn.iceprosurface.com/'),
    new workbox.strategies.NetworkFirst({
        cacheName: 'image-oss',
    }),
)