現状
src/cache-v1/service-worker.ts 内には、リソースタイプごとにリクエストを処理するメソッド (handleStyleRequest, handleTileRequest など) が存在します。これらのメソッドは、キャッシュチェック → ネットワークフェッ
チ → キャッシュ保存という流れがほぼ共通しており、多くのコードが重複しています。
提案
これらの重複をなくすために、汎用的なリクエスト処理メソッドにロジックを統合することを提案します。リソースタイプごとの固有の処理(例: スタイルシート内のURL書き換え)は、プラグインやコールバック関数として外部から注
入できるようにします。
実装イメージ
// src/cache-v1/service-worker.ts
// 汎用ハンドラ
private async handleRequest(request: Request, resource: Resource): Promise<Response> {
// 1. キャッシュチェック
const cached = await this.db.getCacheEntry(request.url);
if (cached && this.isCacheValid(cached)) {
return new Response(cached.data, { headers: cached.headers });
}
// 2. ネットワークフェッチ
const response = await fetch(request);
if (!response.ok) {
throw new NetworkError(`Failed to fetch: ${response.status}`); // 改善案4も適用
}
// 3. レスポンスの加工 (タイプ別)
let blob = await response.blob();
if (resource.type === 'style') {
const styleText = await new Response(blob).text();
const processedStyle = this.processStyle(styleText); // 固有処理
blob = new Blob([processedStyle], { type: 'application/json' });
}
// 4. クオータチェックとキャッシュ保存
if (await this.checkQuota(blob.size)) {
await this.db.saveCacheEntry({ /* ... */, data: blob });
} else {
// ★★★ quota.test.tsが検出したバグの修正箇所 ★★★
// 現在の実装ではこの分岐がなく、クオータ超過時もキャッシュが保存されてしまいます。
// エラーをスローするか、あるいはキャッシュせずにレスポンスを返す必要があります��
console.warn('Quota exceeded, cannot save to cache:', request.url);
// throw new QuotaExceededError('Quota exceeded, cannot save cache.');
}
return new Response(blob, { headers: response.headers });
}
メリット
- コードの重複が劇的に削減され、メンテナンス性が向上します。
- キャッシュ戦略(キャッシュファーストなど)の変更が、一箇所の修正で済むようになります。
現状
src/cache-v1/service-worker.ts内には、リソースタイプごとにリクエストを処理するメソッド (handleStyleRequest,handleTileRequestなど) が存在します。これらのメソッドは、キャッシュチェック → ネットワークフェッチ → キャッシュ保存という流れがほぼ共通しており、多くのコードが重複しています。
提案
これらの重複をなくすために、汎用的なリクエスト処理メソッドにロジックを統合することを提案します。リソースタイプごとの固有の処理(例: スタイルシート内のURL書き換え)は、プラグインやコールバック関数として外部から注
入できるようにします。
実装イメージ
メリット