JavaScript缓存之Service Worker && workbox

[先来看看基础Service Worker](#先来看看基础Service Worker)

注册阶段

安装和激活

workbox

workbox-webpack-plugin

来看看结果

这次再做组件的库模式打包之后想着优化js加载，于是想到了大家用的并不是很多的Service Worker技术，这个技术类似于原生的离线包能力

先来看看基础Service Worker

注册阶段

javascript 复制代码

if ('serviceWorker' in navigator) {
  navigator.serviceWorker
    .register('/service-worker.js')
    .then(registration => {
      console.log(
        'ServiceWorker registration successful with scope: ',
        registration.scope
      )
    })
    .catch(err => {
      console.log('ServiceWorker registration failed: ', err)
    })
}

来看看registration信息

需要注意的是，Service Worker 脚本除了域名为 localhost 时能运行在 http 协议下以外，只能运行 https 协议下。

注册了一个 service worker，它工作在 worker 上下文，所以没有访问 DOM 的权限。

安装和激活

javascript 复制代码

const addResourcesToCache = async (resources) => {
  const cache = await caches.open("v1");
  await cache.addAll(resources);
};

self.addEventListener("install", (event) => {
  event.waitUntil(
    addResourcesToCache([
      "/",
      "/index.html",
      "/style.css",
      "/app.js",
      "/image-list.js",
      "/star-wars-logo.jpg",
      "/gallery/bountyHunters.jpg",
      "/gallery/myLittleVader.jpg",
      "/gallery/snowTroopers.jpg",
    ]),
  );
});

在安装的时候预缓存网站的静态资源

还有一些涉及service work的工作可以参考MDN文档，里面涉及的一些基本用法也有写。只是很多时候我们不会去直接使用，而是用成熟的框架来达到我们的目的！！

workbox

既然如此，我们最好是站在巨人的肩膀上，这个巨人就是谷歌。workbox 是由谷歌浏览器团队发布，用来协助创建 PWA 应用的 JavaScript 库。当然直接用 workbox 还是太复杂了，谷歌还很贴心的发布了一个 webpack 插件，能够自动生成 Service Worker 和静态资源列表

workbox-webpack-plugin

添加 workbox-webpack-plugin 插件，然后调整 vue.config.js 文件（具体看自己工程配置）：

javascript 复制代码

npm install workbox-webpack-plugin --save-dev

这里的urlPattern可以是链接也可以是正则匹配的规则路径等等

这样就可以直接达到我们的目的

来看看结果

看起来就是和localStroage的显示形式差不多，也可以理解成一种缓存策略，只不过是运用多线程的技术，让js更优雅

如果觉得有收获，麻烦给个赞和关注。你的鼓励是我写作的动力，大家一起学习一起进步。