使用 Workbox-Routing 实现前端应用路由

简介

Workbox-Routing 是一个基于 Service Worker 的路由库，可以帮助我们管理前端应用的路由。使用 Workbox-Routing 可以让我们更好地控制页面的缓存和响应。

本文将详细介绍如何使用 Workbox-Routing 创建路由，并根据需要缓存页面内容。

安装

在使用 Workbox-Routing 之前，需要安装 Workbox 包：

npm install workbox-core --save-dev

然后安装 Workbox-Routing：

npm install workbox-routing --save-dev

创建路由

首先，我们需要创建一个 router 对象：

import { Router } from 'workbox-routing';

const router = new Router();

然后，我们可以添加路由规则：

router.registerRoute(
  ({request, url}) => url.pathname.endsWith('.jpg'),
  new CacheFirst()
);

这个例子中，我们注册了一个规则：如果请求的 URL 路径以 .jpg 结尾，那么就使用 CacheFirst 策略来缓存响应。

缓存策略

Workbox 中提供了多种缓存策略，可以根据需要选择不同的策略。

CacheFirst

CacheFirst 策略会先查找缓存，如果缓存中有数据，就直接返回缓存数据；否则发出网络请求，并缓存响应。

import { CacheFirst } from 'workbox-strategies';

router.registerRoute(
  ({request, url}) => url.pathname.endsWith('.jpg'),
  new CacheFirst()
);

NetworkFirst

NetworkFirst 策略会先发出网络请求，如果请求失败，则使用缓存数据。

import { NetworkFirst } from 'workbox-strategies';

router.registerRoute(
  ({request, url}) => url.pathname.endsWith('.html'),
  new NetworkFirst()
);

StaleWhileRevalidate

StaleWhileRevalidate 策略会使用缓存数据来响应请求，并在后台更新缓存数据。

import { StaleWhileRevalidate } from 'workbox-strategies';

router.registerRoute(
  ({request, url}) => url.pathname.endsWith('.css'),
  new StaleWhileRevalidate()
);

路由匹配

在注册路由规则时，我们可以使用不同的方式指定匹配条件。

URL 字符串

router.registerRoute(
  '/styles/*',
  new CacheFirst()
);

这个例子中，所有以 /styles/ 开头的 URL 都会匹配到该路由规则。

RegExp

router.registerRoute(
  /\/articles\/(.*)\/images\//,
  new CacheFirst()
);

这个例子中，所有以 /articles/{id}/images/ 开头的 URL 都会匹配到该路由规则。

函数

router.registerRoute(
  ({url, request}) => {
    return url.origin === 'https://api.example.com' && request.destination === 'script';
  },
  new NetworkFirst()
);

这个例子中，所有请求 API 的脚本都会匹配到该路由规则。

缓存清理

为了保持缓存数据的有效性，我们需要定期清理缓存。可以使用 Workbox 提供的方法来清理缓存。

precacheAndRoute

precacheAndRoute 方法可以在 Service Worker 安装时预缓存指定的资源，并创建路由规则。

import { precacheAndRoute } from 'workbox-precaching';

// 安装后预缓存以下文件
precacheAndRoute([
  '/index.html',
  '/styles/main.css',
  '/scripts/main.js',
]);

cleanupOutdatedCaches

cleanupOutdatedCaches 方法可以在 Service Worker 启动时清理过期的缓存。

import { registerRoute } from 'workbox-routing';
import { cleanupOutdatedCaches } from 'workbox-precaching';

// 安装 Service Worker 时清理过期的缓

> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/47623) ，转载请注明来源
[https://www.javascriptcn.com/post/47623](https://www.javascriptcn.com/post/47623)