PWA使用Workbox时如何配置规则同时缓存HTML页面与静态资源

你现有正则仅匹配带指定后缀的静态资源，未覆盖HTML页面的两种常见访问形态：带.html后缀的路径、无文件后缀的路由路径（如/、/about），按以下方案修改即可：

方案1：直接修改正则 #

修改后的正则会同时命中指定静态资源、带.html后缀的页面、无后缀的导航页面：

registerRoute(
    new RegExp('(\\.(js|css|eot|ttf|otf|woff|woff2|html)$)|(^[^.]+$|\\/$)'),
    new CacheFirst({
        cacheName: 'static-and-html',
    })
);

注意：JS字符串中写入正则反斜杠需要双重转义，原有单\要替换为\\否则正则会失效。

方案2：拆分规则更稳妥（推荐） #

使用Workbox内置的NavigationRoute自动匹配所有HTML导航请求，无需手动写复杂正则，也不会误缓存无后缀的接口请求：

import { registerRoute, NavigationRoute } from 'workbox-routing';
import { CacheFirst } from 'workbox-strategies';

// 缓存指定后缀的静态资源
registerRoute(
  new RegExp('\\.(js|css|eot|ttf|otf|woff|woff2)$'),
  new CacheFirst({ cacheName: 'static-assets' })
);

// 单独缓存所有HTML页面请求
const htmlRoute = new NavigationRoute(
  new CacheFirst({ cacheName: 'html-pages' })
);
registerRoute(htmlRoute);

内容的提问来源于stack exchange，提问作者kodfire