Service Worker用プリキャッシュリストを作成
オフラインで使うために保存したいファイルのパスを貼り付けると、整った一覧ができます。/assets/./app.jsは/assets/app.jsになり、重複したスタイルシートは除かれ、例の5件は4件にまとまります。ブラウザで無料で使えます。
- 無料
- ブラウザで動作
- 登録不要
- データは端末の外に出ません
無料で実行
さらに、意味のあるクエリ文字列を維持し、最初の順序を変えずに重複を除去します。Cache Storageですぐ使えるプリキャッシュ一覧と、ビルド検査に役立つ件数を返します。
ビルド成果物をインストール可能な一覧にします
現在のWebビルドでは、HTML、スタイルシート、JavaScriptチャンク、フォント、アイコン、代替ページが複数のディレクトリに生成されます。最初に現れた順序を保つため、生成ファイルの確認やビルド間の比較も容易です。応答には最終的なアセット数と削除した重複数も含まれます。
CIでは、件数の予期しない減少を検出して、不完全なオフライン版が公開される前にビルドを停止できます。このツールはファイルをダウンロード、指紋化、検査しません。信頼できるビルド工程から得たパスだけを変換します。
予測可能な規則でパスを正規化します
同じファイルでも、アセットのパス表記が異なる場合があります。たとえば、<code>assets/app.js</code>、<code>/assets/app.js</code>、<code>/assets/./app.js</code>はいずれも<code>/assets/app.js</code>になります。
連続するスラッシュをまとめ、安全な親区間を解決し、前後の空白を除去したうえで、正規化後の重複を2件目から省きます。<code>/app.js?完全なURLとプロトコル相対URLも対象外です。
この機能は同一サイトの静的ファイル向けであり、第三者リソースをオフラインキャッシュへ複製するものではありません。サイトのルートより上へ移動する親区間は、黙って書き換えずエラーにします。配信元、内容、外部の可用性を推測しないため、どの環境でも決定的な結果になります。
返された配列は、バージョン付きキャッシュを開いて<code>addAll</code>を呼ぶインストール処理に置いてください。同じパスの内容が変わっても本ツールは検知できないため、キャッシュ名は別途バージョン管理します。バンドラーがファイル名へ内容ハッシュを付ける場合は、その出力パスを指定してください。
安定した名前を使う場合は、内容変更時にキャッシュのバージョンを更新します。入力は意図的な許可リストとして扱い、アプリケーションシェルとオフライン動作に必要な素材を含めます。大きすぎる一覧はダウンロードを遅らせ、不安定な回線で失敗しやすくなります。
防御上の上限は10,000件ですが、本番の一覧は通常それより大幅に少なくします。アクティベーション時には運用方針に従って古いキャッシュを削除してください。本ツールは一覧だけを作り、イベント、キャッシュ戦略、ネットワークアクセス、既存コードの変更は行いません。
活用例
アプリケーションシェル一覧の生成
PWAをオフラインで起動するために必要なHTML、CSS、JavaScript、フォント、アイコンのパスを正規化します。
CIでのビルド成果物検査
収集した成果物名を安定した出力へ変換し、デプロイ前にアセット数と重複数を確認します。
手作業の一覧を整理
不統一な相対パスを解決し、インストール順を維持したまま偶発的な重複を除去します。
よくある質問
料金はいくらですか?
同じ決定的な生成処理を、このページのブラウザー内でも実行できます。
アセットをダウンロードまたは検証しますか?
いいえ。 ネットワーク要求やファイルの存在確認は行わず、パス文字列の検証と正規化だけを実施します。
クエリ文字列を残すのはなぜですか?
クエリによって別のキャッシュキーや版を選べるため、削除すると分離すべきリソースが統合される可能性があります。
外部URLを拒否するのはなぜですか?
同一サイトの静的一覧を作る機能だからです。オリジン間キャッシュには、可用性、CORS、プライバシー、障害への明示的な設計が必要です。
一覧に入れられるパスの数に上限はありますか?
安全のための上限として10,000件まで受け付けますが、実際に公開する一覧はずっと少なくするべきです。一覧が長いほどダウンロードに時間がかかり、不安定な回線ではインストールに失敗しやすくなります。
関連ツール
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/web/service-worker-cache-list-build \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"paths":["/","/assets/app.css","assets/app.js","/icons/icon-192.png"]}'const res = await fetch("https://api.kit.forhosting.com/web/service-worker-cache-list-build", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"paths": [
"/",
"/assets/app.css",
"assets/app.js",
"/icons/icon-192.png"
]
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/web/service-worker-cache-list-build",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"paths": [
"/",
"/assets/app.css",
"assets/app.js",
"/icons/icon-192.png"
]
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/service-worker-cache-list-build", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"paths":["/","/assets/app.css","assets/app.js","/icons/icon-192.png"]}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"paths":["/","/assets/app.css","assets/app.js","/icons/icon-192.png"]}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/service-worker-cache-list-build", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)リクエスト例
{
"paths": [
"/",
"/assets/app.css",
"assets/app.js",
"/icons/icon-192.png"
]
}レスポンス例
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "web.service_worker_cache_list_build",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。
料金
単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。
制限
timeout_sec | 30 |
max_crawl_pages | 25 |
エラー
| HTTP | コード | 意味 |
|---|---|---|
401 | unauthorized | APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。 |
402 | insufficient_balance | 残高が不足しています。チャージ後に再度お試しください。 |
404 | unknown_type | 指定されたタスクタイプは存在しません。タイプ名を確認してください。 |
429 | rate_limited | リクエストが多すぎます。しばらく待ってから再度お試しください。 |
技術的な注記
信頼できるService Workerのインストールには、キャッシュ対象ファイルの整理された一覧が必要です。このツールは静的アセットのパスを受け取り、相対指定をルート基準のURLへ変換し、安全なドット区間を解決します。
ビルド成果物をインストール可能な一覧にします
これらの名前をService Workerへ手作業で転記すると時間がかかり、ファイル移動のたびにずれが生じます。取得したい順に静的パスを渡すと、<code>precache_manifest</code>キーへService Worker用プリキャッシュ一覧を返します。各要素はルート基準のローカルURLなので、インストールイベントで配列を<code>cache.addAll(precache_manifest)</code>へ直接渡せます。
予測可能な規則でパスを正規化します
v=41</code>と<code>/app.js?v=42</code>は異なるキャッシュキーになり得るため、クエリ文字列は残します。フラグメントはHTTP要求に送られず、同じネットワークリソースを別物に見せるため拒否します。
Service Workerで一覧を安全に使用します
個人別ページ、認証済みAPI応答、無制限に増える実行時URLは避けてください。
技術的な質問
結果をcache.addAllへ直接渡せますか?
はい。precache_manifestは、Cache StorageのaddAllメソッドに適したローカルURLの配列です。
パス一覧が空の場合はどうなりますか?
空のプリキャッシュ一覧では目的を果たせないため、invalid_inputエラーで要求が失敗します。