@norejs/prefetch-worker 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,20 @@
+# @norejs/prefetch-worker
+
+## 1.0.0
+
+### Initial Release
+
+Service worker implementation for background prefetching.
+
+### Features
+
+- 🔧 Service worker setup and installation utilities
+- 📡 Background request prefetching with caching
+- 🎯 Rule-based request matching and handling
+- 🔐 Crypto-based request key generation
+- 📝 Comprehensive logging for debugging
+
+### Build
+
+- Built with Rsbuild for optimized service worker bundle
+- Express server utilities for development and testing

package/README.md

@@ -0,0 +1,226 @@
+# Prefetch Worker
+
+一个支持消息初始化的 Service Worker，用于实现智能的 API 请求缓存和预请求功能。
+
+## 特性
+
+- 🔄 **请求去重**: 自动合并相同的并发请求
+- 📦 **智能缓存**: 支持预请求和普通请求的统一缓存机制
+- ⚡ **性能优化**: Promise 级别的请求复用
+- 🎛️ **灵活配置**: 支持消息初始化和默认配置
+- 🔧 **动态劫持**: fetch 事件监听器在脚本初始化时注册，通过函数变量实现动态处理
+- 🐛 **调试友好**: 详细的日志输出
+
+## 安装
+
+```bash
+npm install @norejs/prefetch-worker
+```
+
+## 复制 Service Worker 文件
+
+```bash
+# 复制到 public 目录
+prefetch-worker install --dir public
+
+# 或者复制到自定义目录
+prefetch-worker install --dir assets
+```
+
+## 使用方法
+
+### 1. 基本用法（使用 @norejs/prefetch）
+
+```javascript
+import { setup } from '@norejs/prefetch'
+
+// 初始化 Service Worker
+await setup({
+  serviceWorkerUrl: '/service-worker.js',
+  scope: '/',
+  apiMatcher: '\/api\/*',           // API 匹配规则，默认 '/api'
+  defaultExpireTime: 30000,     // 默认过期时间 30 秒
+  maxCacheSize: 100,            // 最大缓存数量
+  debug: true                   // 开启调试模式
+})
+```
+
+### 2. 手动初始化（发送消息）
+
+```javascript
+// 注册 Service Worker
+const registration = await navigator.serviceWorker.register('/service-worker.js')
+
+// 等待激活
+await new Promise((resolve) => {
+  if (navigator.serviceWorker.controller) {
+    resolve()
+  } else {
+    navigator.serviceWorker.addEventListener('controllerchange', resolve)
+  }
+})
+
+// 发送初始化消息
+navigator.serviceWorker.controller.postMessage({
+  type: 'PREFETCH_INIT',
+  config: {
+    apiMatcher: '/api/v1',        // 自定义 API 匹配规则
+    defaultExpireTime: 60000,     // 60 秒过期时间
+    maxCacheSize: 200,            // 最大缓存 200 个请求
+    debug: false                  // 关闭调试模式
+  }
+})
+```
+
+### 3. 配置参数
+
+| 参数 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `apiMatcher` | `string \| RegExp` | `'/api'` | API 请求匹配规则 |
+| `defaultExpireTime` | `number` | `0` | 默认缓存过期时间（毫秒） |
+| `maxCacheSize` | `number` | `100` | 最大缓存数量 |
+| `debug` | `boolean` | `false` | 是否开启调试模式 |
+
+## HTTP 方法支持
+
+### 支持缓存的方法 ✅
+- **GET**: 查询操作，适合缓存
+- **POST**: 提交操作，支持请求去重
+- **PATCH**: 更新操作，支持缓存
+
+### 不支持缓存的方法 ❌
+- **DELETE**: 删除操作，每次都真实执行
+
+## 请求复用机制
+
+Service Worker 会自动处理并发的相同请求：
+
+```javascript
+// 同时发起的相同请求会被合并
+Promise.all([
+  fetch('/api/users'),    // 发起真实请求
+  fetch('/api/users'),    // 复用第一个请求的 Promise
+  fetch('/api/users')     // 复用第一个请求的 Promise
+])
+```
+
+## 预请求功能
+
+配合 `@norejs/prefetch` 使用预请求功能：
+
+```javascript
+import { preFetch } from '@norejs/prefetch'
+
+// 直接预请求数据
+await preFetch('/api/products', {
+  expireTime: 30000  // 30 秒过期时间
+})
+
+// 实际请求时会从缓存返回
+const response = await fetch('/api/products')
+```
+
+## 调试
+
+开启调试模式后，可以在浏览器控制台看到详细的日志：
+
+```
+prefetch-worker: received message {type: "PREFETCH_INIT", config: {...}}
+prefetch-worker: initializing with config {apiMatcher: "/api", ...}
+prefetch-worker: initialization completed
+prefetch: cache hit (response) /api/products
+prefetch: cache hit (promise) /api/users
+```
+
+## 自动初始化
+
+如果没有收到初始化消息，Service Worker 会在 install 事件后 1 秒自动使用默认配置初始化：
+
+```javascript
+// 默认配置
+{
+  apiMatcher: '\/api\/*'
+}
+```
+
+## 消息类型
+
+### 发送给 Service Worker
+
+```javascript
+// 初始化消息
+{
+  type: 'PREFETCH_INIT',
+  config: {
+    apiMatcher: '\/api\/*',
+    defaultExpireTime: 30000,
+    maxCacheSize: 100,
+    debug: true
+  }
+}
+```
+
+### 从 Service Worker 接收
+
+```javascript
+// 初始化成功
+{
+  type: 'PREFETCH_INIT_SUCCESS',
+  config: { /* 实际使用的配置 */ }
+}
+
+// 初始化失败
+{
+  type: 'PREFETCH_INIT_ERROR',
+  error: 'Error message'
+}
+```
+
+## 技术实现
+
+### 动态劫持机制
+
+Service Worker 采用动态劫持的方式来解决 `fetch` 事件监听器必须在脚本初始评估阶段注册的限制：
+
+```javascript
+// 在脚本加载时就注册 fetch 事件监听器
+self.addEventListener('fetch', function (event) {
+    // 如果没有初始化或没有处理函数，直接返回（不拦截）
+    if (!isInitialized || !handleFetchEventImpl) {
+        return;
+    }
+    
+    // 调用动态处理函数
+    event.respondWith(handleFetchEventImpl(event));
+});
+
+// 初始化时设置处理函数
+handleFetchEventImpl = setupWorker(config);
+```
+
+### 处理流程
+
+1. **脚本加载**: 注册 `fetch` 事件监听器，但不执行任何处理逻辑
+2. **收到初始化消息**: 调用 `setupWorker` 获取处理函数
+3. **设置处理函数**: 将返回的函数赋值给 `handleFetchEventImpl`
+4. **开始拦截**: 后续请求通过动态函数进行处理
+
+这种设计确保了：
+- 符合 Service Worker 规范要求
+- 支持动态配置和初始化
+- 避免了"Event handler must be added on initial evaluation"错误
+
+## 注意事项
+
+1. **首次加载**: Service Worker 首次安装时可能需要刷新页面才能拦截请求
+2. **HTTPS**: Service Worker 只能在 HTTPS 或 localhost 下运行
+3. **作用域**: Service Worker 只能拦截其作用域内的请求
+4. **缓存策略**: DELETE 请求永远不会被缓存，确保数据一致性
+5. **动态劫持**: fetch 监听器在脚本评估时注册，但处理逻辑通过函数变量动态设置
+
+## 兼容性
+
+- Chrome 40+
+- Firefox 44+
+- Safari 11.1+
+- Edge 17+

package/bin/install.js

@@ -0,0 +1,123 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+
+// 获取命令行参数
+const args = process.argv.slice(2);
+
+// 检查第一个参数必须是 install
+if (args.length === 0 || args[0] !== 'install') {
+  console.error('错误: 必须指定 install 子命令');
+  console.log('');
+  showHelp();
+}
+
+let targetDir = 'public'; // 默认目标目录
+
+// 显示帮助信息
+function showHelp() {
+  console.log(`
+使用方法: 
+  prefetch-worker install [选项]
+
+选项:
+  --dir, -d <目录>    指定复制文件的目标目录 (默认: public)
+  --help, -h          显示帮助信息
+
+示例:
+  prefetch-worker install                       # 复制到 public 目录
+  prefetch-worker install --dir static         # 复制到 static 目录  
+  prefetch-worker install -d assets            # 复制到 assets 目录
+`);
+  process.exit(0);
+}
+
+// 解析命令行参数（从索引1开始，跳过 install 子命令）
+for (let i = 1; i < args.length; i++) {
+  if (args[i] === '--dir' || args[i] === '-d') {
+    if (i + 1 < args.length) {
+      targetDir = args[i + 1];
+      i++; // 跳过下一个参数
+    }
+  } else if (args[i] === '--help' || args[i] === '-h') {
+    showHelp();
+  }
+}
+
+// 获取当前工作目录（执行命令的项目目录）
+const cwd = process.cwd();
+const targetPath = path.resolve(cwd, targetDir);
+
+// 获取 prefetch-worker 包的路径
+const packageDir = path.dirname(__dirname);
+const distWorkerDir = path.join(packageDir, 'dist', 'worker');
+
+// 要复制的文件列表
+const filesToCopy = ['service-worker.js'];
+
+function copyFile(src, dest) {
+  try {
+    // 确保目标目录存在
+    const destDir = path.dirname(dest);
+    if (!fs.existsSync(destDir)) {
+      fs.mkdirSync(destDir, { recursive: true });
+      console.log(`✓ 创建目录: ${destDir}`);
+    }
+
+    // 复制文件
+    fs.copyFileSync(src, dest);
+    console.log(`✓ 已复制: ${path.basename(src)} -> ${dest}`);
+  } catch (error) {
+    console.error(`✗ 复制失败: ${src} -> ${dest}`);
+    console.error(`  错误: ${error.message}`);
+    process.exit(1);
+  }
+}
+
+function main() {
+  console.log(`🚀 安装 prefetch-worker 文件到: ${targetPath}`);
+  console.log('');
+
+  // 检查源文件是否存在
+  if (!fs.existsSync(distWorkerDir)) {
+    console.error(`✗ 错误: 未找到构建文件目录: ${distWorkerDir}`);
+    console.error('  请先运行 "npm run build" 或 "pnpm build" 构建项目');
+    process.exit(1);
+  }
+
+  let copiedCount = 0;
+  let totalFiles = filesToCopy.length;
+
+  // 复制每个文件
+  filesToCopy.forEach(fileName => {
+    const srcFile = path.join(distWorkerDir, fileName);
+    
+    if (!fs.existsSync(srcFile)) {
+      console.warn(`⚠ 警告: 文件不存在，跳过: ${srcFile}`);
+      totalFiles--;
+      return;
+    }
+
+    const destFile = path.join(targetPath, fileName);
+    copyFile(srcFile, destFile);
+    copiedCount++;
+  });
+
+  console.log('');
+  console.log(`🎉 安装完成! 成功复制 ${copiedCount}/${totalFiles} 个文件到 ${targetPath}`);
+  
+  if (copiedCount > 0) {
+    console.log('');
+    console.log('已安装的文件:');
+    filesToCopy.forEach(fileName => {
+      const srcFile = path.join(distWorkerDir, fileName);
+      if (fs.existsSync(srcFile)) {
+        console.log(`  • ${fileName}`);
+      }
+    });
+  }
+}
+
+// 运行主函数
+main();

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@norejs/prefetch-worker",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "bin": {
+    "prefetch-worker": "./bin/install.js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@rsbuild/core": "^0.6.1",
+    "@types/crypto-js": "^4.2.2",
+    "@types/express": "4.17.21"
+  },
+  "dependencies": {
+    "crypto-js": "^4.2.0",
+    "express": "4"
+  },
+  "scripts": {
+    "dev": "rsbuild dev",
+    "start": "node dist/server/index.js",
+    "build": "rsbuild build",
+    "test": ""
+  }
+}

package/rsbuild.config.ts

@@ -0,0 +1,30 @@
+export default {
+    source: {
+        entry({ target }) {
+            if (target === 'service-worker') {
+                return {
+                    index: './src/index.ts',
+                    'service-worker': './src/index.ts',
+                };
+            }
+            if (target === 'node') {
+                return {
+                    index: './src/index.server.ts',
+                };
+            }
+        },
+    },
+    dev: {
+        writeToDisk: true,
+    },
+    server: {
+        port: 9004,
+        publicDir: {
+            name: 'dist/worker/',
+        },
+    },
+    output: {
+        minify: false,
+        targets: ['service-worker', 'node'],
+    },
+};

package/src/index.server.ts

@@ -0,0 +1,12 @@
+// 静态服务器，用于提供Service Worker文件
+import express from 'express';
+
+const app = express();
+const port = 8080; // 你可以选择任意未被占用的端口
+
+// 指定静态文件目录
+app.use(express.static('dist/worker'));
+
+app.listen(port, () => {
+  console.log(`Server is running at http://localhost:${port}`);
+});

package/src/index.ts

@@ -0,0 +1,115 @@
+import setupWorker from './setup';
+
+declare var self: ServiceWorkerGlobalScope;
+
+// 标记是否已经初始化
+let isInitialized = false;
+
+// 默认配置
+const defaultConfig = {
+    apiMatcher: '\/api\/*'
+};
+
+// 动态处理函数变量
+let handleFetchEventImpl: ((event: FetchEvent) => Promise<Response> | undefined) | null = null;
+
+// 在初始化阶段就注册 fetch 事件监听器
+self.addEventListener('fetch', function (event) {
+    // 如果没有初始化或没有处理函数，直接返回（不拦截）
+    if (!isInitialized || !handleFetchEventImpl) {
+        return;
+    }
+    const response = handleFetchEventImpl(event);
+    if (response) { 
+        return event.respondWith(response);
+    }
+    return;
+});
+
+// 监听来自主线程的消息
+self.addEventListener('message', (event) => {
+    console.log('prefetch-worker: received message', event.data);
+    
+    if (event.data && event.data.type === 'PREFETCH_INIT') {
+        try {
+            if (isInitialized) {
+                console.log('prefetch-worker: already initialized, sending success response');
+                
+                // 发送已初始化成功的消息回主线程
+                if (event.source) {
+                    event.source.postMessage({
+                        type: 'PREFETCH_INIT_SUCCESS',
+                        config: { ...defaultConfig, ...event.data.config },
+                        message: 'Already initialized'
+                    });
+                }
+                return;
+            }
+            
+            const config = { ...defaultConfig, ...event.data.config };
+            console.log('prefetch-worker: initializing with config', config);
+            
+            // 将字符串转换为正则表达式
+            const apiMatcher = typeof config.apiMatcher === 'string' 
+                ? new RegExp(config.apiMatcher) 
+                : config.apiMatcher;
+            
+            // 调用 setupWorker 并获取处理函数
+            const handleFetchEvent = setupWorker({
+                apiMatcher,
+                ...config
+            });
+            if (handleFetchEvent) {
+                handleFetchEventImpl = handleFetchEvent;
+            }
+            
+            isInitialized = true;
+            console.log('prefetch-worker: initialization completed');
+            
+            // 发送初始化完成的消息回主线程
+            if (event.source) {
+                event.source.postMessage({
+                    type: 'PREFETCH_INIT_SUCCESS',
+                    config: config
+                });
+            }
+        } catch (error) {
+            console.error('prefetch-worker: initialization failed', error);
+            
+            // 发送初始化失败的消息回主线程
+            if (event.source) {
+                event.source.postMessage({
+                    type: 'PREFETCH_INIT_ERROR',
+                    error: error instanceof Error ? error.message : String(error)
+                });
+            }
+            
+            self.registration.unregister();
+        }
+    }
+});
+
+// 如果没有收到初始化消息，使用默认配置自动初始化
+self.addEventListener('install', () => {
+    console.log('prefetch-worker: install event');
+    
+    // 延迟一下，给主线程发送初始化消息的机会
+    setTimeout(() => {
+        if (!isInitialized) {
+            console.log('prefetch-worker: auto-initializing with default config');
+            try {
+                const apiMatcher = new RegExp(defaultConfig.apiMatcher);
+                handleFetchEventImpl = setupWorker({
+                    apiMatcher
+                });
+                isInitialized = true;
+                console.log('prefetch-worker: auto-initialization completed');
+            } catch (error) {
+                console.error('prefetch-worker: auto-initialization failed', error);
+                self.registration.unregister();
+            }
+        }
+    }, 1000); // 1秒延迟
+});
+
+console.log('prefetch-worker: loaded, waiting for initialization message');

package/src/setup.ts

@@ -0,0 +1,247 @@
+import { createLogger } from 'utils/log';
+import { default as defaultRequestToKey } from './utils/requestToKey';
+declare var self: ServiceWorkerGlobalScope & {
+    _setuped: symbol;
+    debug: boolean;
+};
+
+export const HeadName = 'X-Prefetch-Request-Type';
+export const HeadValue = 'prefetch';
+export const ExpireTimeHeadName = 'X-Prefetch-Expire-Time';
+
+export type ICacheItem = {
+    expire: number;
+    response?: Response;
+    requestPromise?: Promise<Response>;
+};
+
+export type ISetupWorker = {
+    // 通过Url匹配是否是需要缓存的请求，匹配中的请求才有可能被缓存，是否缓存取决于请求头
+    apiMatcher: RegExp;
+    // 缓存的最大数量
+    requestToKey?: (request: Request) => Promise<string>;
+    // 默认的失效时间，单位毫秒, 默认为0
+    defaultExpireTime?: number;
+    // 是否允许跨域, 默认为false
+    allowCrossOrigin?: boolean;
+    // 是否自动跳过等待，默认为true
+    // 最大缓存数量, 默认为 100
+    maxCacheSize?: number;
+    debug?: boolean;
+};
+self.addEventListener('install', (event) => {
+    console.log('prefetch: install');
+    self.skipWaiting();
+});
+self.addEventListener('activate', (event) => {
+    // 激活阶段：清除旧缓存，并立即控制客户端
+    console.log('prefetch: activate');
+    event.waitUntil(
+        self.clients.claim().then(() => {
+            console.log(
+                'Service Worker activated and now controls the clients.'
+            );
+        })
+    );
+});
+// 用于标记是否已经初始化
+const setupSymbol = Symbol('setuped');
+export default function setupWorker(
+    props: ISetupWorker
+): ((event: FetchEvent) => Promise<Response> | undefined) | undefined {
+    console.log('prefetch setupWorker');
+    if (self._setuped === setupSymbol) {
+        // 如果已经设置过，返回现有的处理函数
+        return;
+    }
+
+    self._setuped = setupSymbol;
+    const preRequestCache: Map<string, ICacheItem> = new Map();
+    let cachedNums = 0;
+    const {
+        apiMatcher,
+        requestToKey = defaultRequestToKey,
+        defaultExpireTime = 0,
+        maxCacheSize = 100,
+        debug = false,
+    } = props;
+    if (debug) {
+        self.debug = debug;
+    }
+    const logger = createLogger(debug);
+    logger.info('prefetch: setupWorker', {
+        apiMatcher,
+        requestToKey,
+        defaultExpireTime,
+        maxCacheSize,
+    });
+
+    console.log('prefetch: setupWorker complete');
+
+    // 创建处理函数
+    const fetchHandler = (event: FetchEvent): Promise<Response> | undefined => {
+        try {
+            const request = event.request;
+            // Skip cross-origin requests, like those for Google Analytics.
+            if (request.mode === 'navigate') {
+                return;
+            }
+
+            // Opening the DevTools triggers the "only-if-cached" request
+            // that cannot be handled by the worker. Bypass such requests.
+            if (
+                request.cache === 'only-if-cached' &&
+                request.mode !== 'same-origin'
+            ) {
+                return;
+            }
+            const url = request?.url;
+            const method = request?.method?.toLowerCase?.();
+            const isApiMetod = ['get', 'post', 'patch'].includes(method);
+            const isApi = url?.match(apiMatcher) || isApiMetod;
+            if (!url || !isApi) {
+                return;
+            }
+            return handleFetchEvent(event);
+        } catch (error) {
+            logger.error('fetch error', error);
+            return;
+        }
+    };
+
+    async function handleFetchEvent(event: FetchEvent) {
+        try {
+            const request = event.request.clone();
+            const headers = request.headers;
+            const method = request.method?.toLowerCase?.();
+            const isPreRequest = headers.get(HeadName) === HeadValue;
+            const expireTime =
+                Number(headers.get(ExpireTimeHeadName)) || defaultExpireTime;
+
+            // DELETE 方法不进行缓存，直接透传
+            if (method === 'delete') {
+                logger.info(
+                    'prefetch: DELETE method, bypass cache',
+                    request.url
+                );
+                return fetch(event.request);
+            }
+
+            const cacheKey = await requestToKey(request.clone());
+            logger.info('prefetch: cacheKey', request.url, cacheKey);
+            if (!cacheKey) {
+                return fetch(event.request);
+            }
+
+            const cache = preRequestCache.get(cacheKey);
+
+            // 检查是否有有效的缓存（不管是预请求还是普通请求）
+            if (cache && cache.expire > Date.now()) {
+                // 如果有完成的响应，直接返回
+                if (cache.response) {
+                    logger.info('prefetch: cache hit (response)', request.url);
+                    return cache.response.clone();
+                }
+
+                // 如果有正在进行的请求，等待并复用
+                if (cache.requestPromise) {
+                    logger.info('prefetch: cache hit (promise)', request.url);
+                    try {
+                        const response = await cache.requestPromise;
+                        return response.clone();
+                    } catch (error) {
+                        // 如果正在进行的请求失败，清除缓存并重新发起请求
+                        preRequestCache.delete(cacheKey);
+                        cachedNums--;
+                        logger.error('prefetch: cached promise failed', error);
+                        return fetch(event.request.clone());
+                    }
+                }
+            } else if (cache && cache.expire <= Date.now()) {
+                // 缓存过期，清除
+                preRequestCache.delete(cacheKey);
+                cachedNums--;
+            }
+
+            // 创建新的请求
+            const fetchPromise = fetch(request.clone());
+
+            // 如果缓存中没有这个请求或请求已过期，创建新的缓存项
+            if (!cache || cache.expire <= Date.now()) {
+                const newExpireTime =
+                    isPreRequest && expireTime ? expireTime : defaultExpireTime;
+                if (newExpireTime > 0) {
+                    logger.info(
+                        'prefetch: creating new cache entry',
+                        request.url
+                    );
+                    clearCacheWhenOversize();
+
+                    // 创建带有 requestPromise 的缓存项，以便其他并发请求可以复用
+                    preRequestCache.set(cacheKey, {
+                        expire: Date.now() + newExpireTime,
+                        requestPromise: fetchPromise
+                            .then((response) => {
+                                const returnResponse = response.clone();
+                                // 请求成功后，更新缓存为 response
+                                if (response.status === 200) {
+                                    const existingCache =
+                                        preRequestCache.get(cacheKey);
+                                    if (
+                                        existingCache &&
+                                        existingCache.expire > Date.now()
+                                    ) {
+                                        preRequestCache.set(cacheKey, {
+                                            expire: existingCache.expire,
+                                            response: response.clone(),
+                                        });
+                                    }
+                                }
+                                return returnResponse;
+                            })
+                            .catch((error) => {
+                                // 请求失败，清除缓存
+                                preRequestCache.delete(cacheKey);
+                                cachedNums--;
+                                throw error;
+                            }),
+                    });
+                    cachedNums++;
+                }
+            }
+
+            // 等待请求完成并返回响应
+            try {
+                const response = await fetchPromise;
+                logger.info(
+                    'prefetch: response received',
+                    response.status,
+                    request.url
+                );
+                return response;
+            } catch (error) {
+                logger.error('prefetch: fetch failed', error);
+                throw error;
+            }
+        } catch (error) {
+            logger.error('prefetch: error', error);
+            return fetch(event.request);
+        }
+    }
+
+    function clearCacheWhenOversize() {
+        if (cachedNums <= maxCacheSize) {
+            return;
+        }
+        logger.info('clearCache');
+        preRequestCache.forEach((cache, key) => {
+            if (cache && cache.expire < Date.now()) {
+                preRequestCache.delete(key);
+                cachedNums--;
+            }
+        });
+    }
+
+    // 返回处理函数
+    return fetchHandler;
+}

package/src/utils/log.ts

@@ -0,0 +1,6 @@
+const noop = () => {};
+export const createLogger = (debug = false) => ({
+  info: debug ? console.log : noop,
+  warn: debug ? console.warn : noop,
+  error: debug ? console.error : noop,
+});

package/src/utils/requestToKey.ts

@@ -0,0 +1,13 @@
+import sha256 from "crypto-js/sha256";
+export default async function requestToKey(_request: Request) {
+  const request = _request.clone();
+  const url = request.url;
+  const method = request.method;
+  const body = await request.text();
+  // 组合信息
+  const combinedInfo = `${method.toUpperCase()} ${url} ${JSON.stringify(body)}`;
+  // 使用btoa函数进行编码生成唯一键
+  // 注意：在实际应用中，可能需要使用更安全的哈希函数如SHA-256
+  const key = sha256(combinedInfo).toString();
+  return key;
+}

package/src/utils/rules.ts

@@ -0,0 +1,120 @@
+import { IRule } from '@norejs/prefetch';
+// 是否在SW 中可运行
+import MD5 from 'crypto-js/md5';
+
+// 通过appUrl找到rule
+const AppRuleMap: {
+    [key: string]: {
+        [key: string]: IRule;
+    };
+} = {};
+
+// 通过key找到rule
+const KeyRuleMap: {
+    [key: string]: IRule;
+} = {};
+
+/**
+ * 添加规则
+ * @param appUrl
+ * @param rule
+ * @returns
+ */
+export function addRule(appUrl: string, rule: IRule) {
+    if (!appUrl || !rule) {
+        return null;
+    }
+    if (!AppRuleMap[appUrl]) {
+        AppRuleMap[appUrl] = {};
+    }
+    // 利用rule和appUrl 计算唯一key
+    const key = MD5(`${appUrl}-${JSON.stringify(rule)}`).toString();
+    AppRuleMap[appUrl][key] = rule;
+    // @ts-ignore
+    rule.__key__ = key;
+    // @ts-ignore
+    rule.__appUrl__ = appUrl;
+    // 不允许修改
+    Object.defineProperties(rule, {
+        __appUrl__: {
+            writable: false,
+        },
+        __key__: {
+            writable: false,
+        },
+    });
+    KeyRuleMap[key] = rule;
+    return key;
+}
+
+export function removeRule(key: string) {
+    if (!key) {
+        return null;
+    }
+    const rule = KeyRuleMap[key];
+    const appUrl = rule.__appUrl__;
+    if (appUrl && AppRuleMap[appUrl]) {
+        delete AppRuleMap[appUrl][key];
+    }
+    if (KeyRuleMap[key]) {
+        delete KeyRuleMap[key];
+    }
+    return true;
+}
+
+// 获取appUrl下的所有规则
+export function getAppRules(appUrl: string) {
+    return AppRuleMap[appUrl];
+}
+
+export function clearRules(appUrl: string) {
+    if (appUrl && AppRuleMap[appUrl]) {
+        Object.keys(AppRuleMap[appUrl]).forEach((key) => {
+            if (KeyRuleMap[key]) {
+                delete KeyRuleMap[key];
+            }
+        });
+        delete AppRuleMap[appUrl];
+    }
+}
+/**
+ * 清空所有规则
+ */
+export function clearAllRules() {
+    Object.keys(AppRuleMap).forEach((appUrl) => {
+        clearRules(appUrl);
+    });
+}
+
+/**
+ * 匹配规则
+ * @param appUrl
+ * @param request
+ */
+export function matchRule(appUrl: string, request: Request) {
+    const appRules = getAppRules(appUrl);
+    // TODO: 这里可以通过算法优化将复杂度降到O(1)
+    if (appRules) {
+        for (const key in appRules) {
+            const rule = appRules[key];
+            if (isRuleMatched(rule, request)) {
+                return rule;
+            }
+        }
+    }
+    return null;
+}
+
+/**
+ * 通过请求匹配规则，从而决定如何缓存
+ * @param rule
+ * @param originRequest
+ * @returns
+ */
+export function isRuleMatched(rule: IRule, originRequest: Request) {
+    // type 相同、url 相同
+    const request = originRequest.clone();
+    const url = request.url;
+    const method = request.method;
+    return rule.type === method && rule.apiUrl === url;
+}

package/tests/utils.test.ts

@@ -0,0 +1 @@
+// 测试请求变成唯一key

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "baseUrl": "./src",
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "lib": ["ESNext", "WebWorker"],
+    "moduleResolution": "Node",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "resolveJsonModule": true,
+    "rootDir": "src",
+    "skipLibCheck": true,
+    "strict": true
+  },
+  "exclude": ["**/node_modules"],
+  "include": ["src"]
+}