PWA之Workbox 入门

最新推荐文章于 2024-10-11 17:49:24 发布

⑥②

最新推荐文章于 2024-10-11 17:49:24 发布

阅读量1.4k

点赞数 1

分类专栏： pwa

本文链接：https://blog.csdn.net/lw001x/article/details/103684321

版权

pwa 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍如何利用Workbox库优化Progressive Web App（PWA），通过创建并注册ServiceWorker，实现对网站资源如JS、CSS和图片的高效缓存策略。文章详细解释了如何在ServiceWorker中引入Workbox，以及如何使用Workbox提供的路由和缓存策略模块来监听和处理网页请求。

摘要由CSDN通过智能技术生成

简介

Workbox 就是一个类库和Node模块的集合，让我们更轻松的缓存资源数据，充分利用这些功能来构建 pwa 程序

本文会告诉你如何创建并运行用Workbox访问页面的请求，并演示如何使用常见策略进行缓存。

由于大部分网站包含了css，js和图片，让我们来看看如何使用service worker 和 Workbox缓存这些文件。

注：以下看到sw就代表了service worker

创建并注册一个Service Worker文件

在使用Workbox之后，我们需要创建一个service worker文件并注册到我们的网站中。

在网站的根目录创建一个service-worker.js文件，添加一个console消息，这样我们能看到加载的情况。

console.log('Hello from service-worker.js');

在你自己的js页面添加如下内容，来注册service worker：

<script>
// Check that service workers are supported
if ('serviceWorker' in navigator) {
  // Use the window load event to keep the page load performant
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js');
  });
}
</script>

这段代码告诉浏览器，我们要使用service worker了，如果你刷新你的页面，你会在控制台看到service worker文件打印的信息。 Console message from sw.js in DevTools

在Chrome DevTools的Application选项卡中，你就会看到service worker已经注册成功。

Application Tab displaying a registered service worker.

注意： 选中 “Update on reload” ，这样我们就能够在每次刷新页面的时候，看到我们修改的结果。

现在，我们已经注册成功sw，下面就看看如何使用Workbox吧。

引入 Workbox

想要使用Workbox，你需要先在你的sw中引入workbox-sw.js文件。

在sw文件中，使用importScripts()方法引入workbox-sw.js文件。

importScripts('https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js');

if (workbox) {
  console.log(`Yay! Workbox is loaded 🎉`);
} else {
  console.log(`Boo! Workbox didn't load 😬`);
}

如果你看到了“Yay”信息，就代表Workbox已经在我们的sw中正式的加载成功了。

DevTools screenshot of Workbox loading in a service worker.

好了，我们可以开始使用Workbox了。

使用 Workbox

Workbox最主要的功能就是它的路由和缓存策略模块，它允许你监听来自你的网页请求，决定如何缓存请求并做出响应。

让我们为我们的js文件添加一个缓存回退机制，最简单的方法就是使用Workbox注册一个路由，来匹配请求的js文件，我们可以使用一个正则来注册路由地址。

workbox.routing.registerRoute(
  /\.js$/,
  …
);

Workbox会判断一个请求是否匹配当前路由地址，如果匹配，就对该请求“执行某些操作”，“执行某些操作”将通过Workbox的一种缓存策略传递请求。

如果我们想让我们的js文件总是请求网络上的文件，但是如果网络出现故障，则回退到缓存版本，就可以使用“网络优先”策略来实现。

workbox.routing.registerRoute(
  /\.js$/,
  new workbox.strategies.NetworkFirst()
);

添加代码并刷新网页，如果你的网站包含了js文件，你应该能看到类似这些的日志信息。

Example console logs from routing a JavaScript file.

Workbox已经路由成功任意的js文件，并使用网络优先策略来决定如何响应请求。你可以从DevTools中看到缓存的信息，来看看请求是否真的被缓存。

Example of a JavaScript file being cached.

Workbox本身提供了一些缓存策略，例如下面的代码，CSS文件使用了缓存优先后台更新策略，图片信息使用了时间过期策略。

orkbox.routing.registerRoute(
  // Cache CSS files.
  /\.css$/,
  // Use cache but update in the background.
  new workbox.strategies.StaleWhileRevalidate({
    // Use a custom cache name.
    cacheName: 'css-cache',
  })
);

workbox.routing.registerRoute(
  // Cache image files.
  /\.(?:png|jpg|jpeg|svg|gif)$/,
  // Use the cache if it's available.
  new workbox.strategies.CacheFirst({
    // Use a custom cache name.
    cacheName: 'image-cache',
    plugins: [
      new workbox.expiration.Plugin({
        // Cache only 20 images.
        maxEntries: 20,
        // Cache for a maximum of a week.
        maxAgeSeconds: 7 * 24 * 60 * 60,
      })
    ],
  })
);