serviceWorker实现html页面缓存，离线也能加载网页

前提要求，
1.域名必须支持ssl，否则没有serviceWorker服务。
2.IE等老板本浏览器不支持。chrome、edge等浏览器支持。

在html页面里添加脚本

<script>
// Register A service worker
if ('serviceWorker' in navigator) {

  window.addEventListener('load', function() {
    navigator.serviceWorker.register(`/build.sw.js`)
      .then(function(registration) {
        // Registration was successful
        console.log('[success] register ')
      }, function(err) {
        // registration failed :(
        console.log('[fail]: ', err);
      });
  });
}
</script>

此处表示加载网站根目录下的build.sw.js文件。

build.sw.js内容规则

importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.3.0/workbox-sw.js');//加载workbox插件。
// 缓存策略
workbox.routing.registerRoute(
  new RegExp('.*\.html'),
  workbox.strategies.networkFirst()
);
// 缓存策略
workbox.routing.registerRoute(
  '/',
  workbox.strategies.networkFirst()
);
workbox.routing.registerRoute(
  new RegExp('.*favicon\.rss\.ink.*'),
  workbox.strategies.networkFirst()
);

workbox.routing.registerRoute(
  new RegExp('.*\.(?:js|css|woff2|png|jpg)'),
  workbox.strategies.cacheFirst()
);

代码说明：
workbox.routing.registerRoute()是添加缓存规则。
workbox.strategies.cacheFirst()是缓存优先。
workbox.strategies.networkFirst()是网络优先。