SW-precache Webpack插件适配带GET参数URL及动态预缓存方案咨询

嘿，针对你提到的「根据店铺名称加载不同模板、迁移PWA时用Service Worker预缓存」的场景，我来拆解下怎么用dynamicUrlToDependencies实现类似的动态关联逻辑！

首先得明确：dynamicUrlToDependencies（Workbox提供的预缓存配置项）不止能写静态键值对，它还可以是一个函数——这正是实现你动态逻辑的核心！它会接收当前的请求对象，你可以根据请求里的店铺信息，返回对应的依赖资源清单。

具体实现步骤 #

1. 匹配动态店铺URL
   先通过正则捕获请求URL里的店铺名称，比如你的店铺页面URL是/stores/xxx，就用正则/^\/stores\/([a-zA-Z0-9-]+)$/来提取xxx部分。

2. 编写动态依赖映射逻辑
   把店铺名称和对应的模板、样式、脚本等资源做关联，用配置对象维护比硬编码更易扩展，后续新增店铺直接加配置就行。

3. 整合到Workbox预缓存配置
   把逻辑放进precacheAndRoute的配置里，示例代码如下：

import { precacheAndRoute } from 'workbox-precaching';

// 店铺-资源映射表，集中管理更方便
const storeResourceMap = {
  'cozy-coffee': [
    '/templates/coffee-shop.html',
    '/css/coffee-theme.css',
    '/js/coffee-features.js'
  ],
  'book-nook': [
    '/templates/book-store.html',
    '/css/book-theme.css',
    '/js/book-features.js'
  ],
};

precacheAndRoute(self.__WB_MANIFEST, {
  dynamicUrlToDependencies: (request) => {
    // 解析请求URL，提取店铺名称
    const url = new URL(request.url);
    const storeMatch = url.pathname.match(/^\/stores\/([a-zA-Z0-9-]+)$/);
    
    if (storeMatch) {
      const storeName = storeMatch[1];
      // 返回对应店铺的依赖资源，无匹配则用默认模板
      return storeResourceMap[storeName] || [
        '/templates/default-store.html',
        '/css/default-theme.css'
      ];
    }
    
    // 非店铺页面返回undefined，沿用默认预缓存规则
    return undefined;
  }
});

工作机制说明 #

当Service Worker启动预缓存，或用户访问某店铺页面时，Workbox会调用这个dynamicUrlToDependencies函数：

• 解析请求URL并提取店铺名称；
• 根据名称匹配对应的依赖资源清单；
• 将这些资源与当前店铺URL关联，确保后续访问该店铺时，模板、样式等资源能被正确缓存（离线也能访问）；
• 若后续依赖资源更新，Workbox会自动更新缓存，保证用户拿到最新版本。

额外注意点 #

• 确保依赖资源在预缓存清单里：你返回的模板、CSS、JS文件，必须包含在self.__WB_MANIFEST（Workbox生成的预缓存清单）中，否则预缓存不会生效。
• 搭配运行时缓存：如果店铺信息是从API拉取的动态数据，可以结合Workbox的registerRoute，用StaleWhileRevalidate策略缓存API请求，和预缓存的静态模板配合使用。
• 适配客户端路由：如果是单页应用（SPA），要保证Workbox的路由匹配规则和客户端路由逻辑一致，避免漏缓存或误匹配。

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