Widely available すべての主要ブラウザで対応済み。安心して使用可能。

Service workers

Cache インターフェイスは、 Request / Response オブジェクトのペアを保存するストレージの仕組みを提供します。Cache オブジェクトがどのくらい持続するかはブラウザーに依存しますが、単一のオリジンのスクリプトは通常、以前に生成された Cache オブジェクトの存在を頼りにすることができます。Cache インターフェイスは、ワーカーと同様にウィンドウスコープにも公開されていることに注意してください。サービスワーカーの仕様で定義されているとはいえ、サービスワーカーと共に使用する必要はありません。

ひとつのオリジンが、複数の名前付き Cache オブジェクトを保有することができます。スクリプト（例えば ServiceWorker）が Cache の更新をどのように処理するかを実装するのは作者の責任です。Cache 内のアイテムは、明示的に要求されない限り更新されませんし、削除されない限り有効期限はありません。 CacheStorage.open() を使用して特定の名前付き Cache オブジェクトを開き、それから任意の Cache のメソッドを呼び出して Cache を管理します。

また、定期的にキャッシュ項目を掃除する必要があります。各ブラウザーは、あるオリジンで使用できるキャッシュストレージの総量に厳しい制限を設けています。 Cache 容量の概算の使用量は StorageManager.estimate() API を用いて確認することができます。ブラウザーはディスク容量の管理に最善を尽くしますが、あるオリジンのキャッシュストレージを削除することがあります。ブラウザーはふつう、あるオリジンのデータをすべて削除するか、まったく削除しないかのいずれかです。名前を用いてキャッシュをバージョン管理し、安全に操作できるスクリプトのバージョンからのみキャッシュを使用するようにしてください。詳細は、古いキャッシュの削除を確認してください。

メッセージング・ワーカー

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`Cache`	40	16	41	11.1	40	11.3
`add` add() は Cache インターフェイスのメソッドで、URL を受け取り、リソースを取得して、指定されたキャッシュに結果のレスポンスオブジェクトを追加します。	44	16	41	11.1	44	11.3
`addAll` addAll() は Cache インターフェイスのメソッドで、URL の配列を受け取り、それらを取得して、指定されたキャッシュに結果のレスポンスオブジェクトを追加します。取得の間に作成されたリクエストオブジェクトは、格納されるレスポンス操作のキーになります。	46	16	41	11.1	46	11.3
`delete` delete() は Cache インターフェイスのメソッドで、キーがリクエストである Cache 項目を探し、見つかった場合はその Cache 項目を削除して、true に解決する Promise を返します。 Cache 項目が見つからない場合は、false に解決します。	43	16	41	11.1	43	11.3
`keys` keys() は Cache インターフェイスのメソッドで、Cache のキーを表す Request の配列に解決される Promise を返します。	43	16	41	11.1	43	11.3
`match` match() は Cache インターフェイスのメソッドで、Cache オブジェクトで最初に一致したリクエストに関連付けられた Response に解決される Promise を返します。一致するものが見つからない場合、Promise は undefined に解決されます。	43	16	41	11.1	43	11.3
`matchAll` matchAll() は Cache インターフェイスのメソッドで、Cache オブジェクト内の一致するすべてのレスポンスの配列に解決される Promise を返します。	47	16	41	11.1	47	11.3
`put` put() は Cache インターフェイスのメソッドで、キーと値のペアを現在の Cache オブジェクトに追加することができます。	43	16	41	11.1	43	11.3
`worker_support` 労働者で利用可能	40	16	44	11.1	40	11.3
`caches` caches は Window インターフェイスの読み取り専用プロパティで、現在のコンテキストに関連付けられた CacheStorage オブジェクトを返します。このオブジェクトにより、オフライン利用のために資産 (assets) を保存したり、リクエストに対するカスタムレスポンスを生成したりするなどの機能を使用できます。	40	16	41	11.1	40	11.3
`secure_context_required` 安全なコンテキストが必要	65	79	103	11.1	65	11.3
`worker_support` 労働者で利用可能	40	16	41	11.1	40	11.3
`CacheStorage` CacheStorage インターフェイスは、Cache オブジェクトのストレージを表します。	43	16	41	11.1	43	11.3
`delete` delete() は CacheStorage インターフェイスのメソッドで、cacheName に一致する Cache オブジェクトを見つけ、見つかった場合は Cache オブジェクトを削除し、 true に解決される Promise を返します。 Cache オブジェクトが見つからない場合は、false に解決されます。	40	16	41	11.1	40	11.3
`has` has() は CacheStorage インターフェイスのメソッドで、Cache オブジェクトが cacheName と一致する場合に true に解決される Promise を返します。	40	16	41	11.1	40	11.3
`keys` keys() は CacheStorage インターフェイスのメソッドで、CacheStorage オブジェクトによって追跡されるすべての名前付き Cache オブジェクトに対応する文字列をそれが作成された順番で含む配列で解決する Promise を返します。このメソッドを使用して、すべての Cache オブジェクトのリストを反復処理します。	40	16	41	11.1	40	11.3
`match` match() は CacheStorage インターフェイスのメソッドで、所与の Request または URL 文字列が保存された Response のキーであるかどうかをチェックします。このメソッドは、Response の Promise、または一致するものが見つからない場合に undefined に解決される Promise を返します。	54	16	41	11.1	54	11.3
`open` open() は CacheStorage インターフェイスのメソッドで、 cacheName に一致する Cache オブジェクトに解決される Promise を返します。	40	16	41	11.1	40	11.3
`secure_context_required` 安全なコンテキストが必要	65	79	44	11.1	65	11.3
`worker_support` 労働者で利用可能	43	16	44	11.1	43	11.3
`Client` Client インターフェイスは、Worker や SharedWorker などの実行可能なコンテキストを表します。Window クライアントは、より具体的な WindowClient によって表されます。Client/WindowClient オブジェクトは Clients.matchAll や Clients.get などのメソッドから取得できます。	40	17	44	11.1	40	11.3
`frameType` frameType は Client インターフェイスの読み取り専用プロパティで、現在の Client の閲覧コンテキストの種類を示します。この値は、"auxiliary"、"top-level"、"nested"、"none" の何れかです。	43	17	44	11.1	43	11.3
`id` id は Client インターフェイスの読み取り専用プロパティで、Client オブジェクトの汎用一意識別子を返します。	40	17	44	11.1	40	11.3
`postMessage` postMessage() は Client インターフェイスのメソッドで、サービスワーカーがクライアント (Window, Worker, SharedWorker) にメッセージを送信することができます。メッセージは、ServiceWorkerContainer の "message" イベントで受信されます。	40	17	44	11.1	40	11.3
`type` type は Client インターフェイスの読み取り専用プロパティで、サービスワーカーが制御しているクライアントの種類を示します。	60	17	54	11.1	60	11.3
`url` url は Client インターフェイスの読み取り専用プロパティで、現在のサービスワーカークライアントの URL を返します。	40	17	44	11.1	40	11.3
`Clients` Clients インターフェイスは、Client オブジェクトへのアクセスを提供します。これは、サービスワーカー内で ServiceWorkerGlobalScope.clients を介してアクセスします。	40	17	44	11.1	40	11.3
`claim` claim() は Clients インターフェイスのメソッドで、アクティブなサービスワーカーが自身のスコープ（ServiceWorkerRegistration.scope）内のすべてのクライアントのコントローラー（ServiceWorkerContainer.controller）として自分自身を設定できます。これにより、このサービスワーカーによって制御されるようになる ServiceWorkerContainer の中のクライアントで controllerchange イベントが発行されます。	42	17	44	11.1	42	11.3
`get` get() はClients インターフェイスのメソッドは、指定された id と一致するサービスワーカークライアントを取得し、Promise で返します。	51	17	45	11.1	51	11.3
`matchAll` matchAll() は Clients インターフェイスのメソッドで、サービスワーカークライアント（Client）オブジェクトのリストの Promise を返します。関連するサービスワーカーのオリジンと同じオリジンを持つすべてのサービスワーカークライアントを返すには、options 引数を含めます。オプションが含まれていなかった場合、このメソッドは、サービスワーカーによって制御されるサービスワーカークライアントのみを返します。	42	17	54	11.1	42	11.3
`matchAll (options includeUncontrolled parameter)` `options.includeUncontrolled` パラメータ	42	17	44	11.1	42	11.3
`openWindow` openWindow() は Clients インターフェイスのメソッドで、新しい最上位の閲覧コンテキストを作成し、指定された URL をロードします。呼び出し元のスクリプトにポップアップを表示する権限がない場合、openWindow() は InvalidAccessError 例外を発生させます。	40	17	44	11.1	40	11.3
`ExtendableEvent` ExtendableEvent インターフェイスは、サービスワーカーのライフサイクルの一部として、グローバルスコープに配信された install および activate イベントの存続期間を延長します。これにより、データベーススキーマがアップグレードされて古いキャッシュエントリーが削除されるまで、機能イベント（FetchEvent など）が送出されなくなります。	40	17	44	11.1	40	11.3
`ExtendableEvent` ExtendableEvent() コンストラクターは、新しい ExtendableEvent オブジェクトを作成します。	41	17	44	11.1	41	11.3
`waitUntil` ExtendableEvent.waitUntil() メソッドは、作業が進行中であることをイベントディスパッチャーに通知します。また、その作業が成功したかどうかを検出するためにも使用できます。サービスワーカーの場合、 waitUntil() は、プロミスが決定するまで作業が進行中であることをブラウザーに通知し、サービスワーカーがその作業を完了させたい場合にサービスワーカーを終了させません。	40	17	44	11.1	40	11.3
`waitUntil (async waitUntil)` `waitUntil` は非同期で呼び出される場合があります	60	17	53	11.1	60	11.3
`ExtendableMessageEvent` ExtendableMessageEvent はサービスワーカー API のインターフェイスで、（別のコンテキストからのメッセージを ServiceWorkerGlobalScope で受信した時に）サービスワーカーで発生する ServiceWorkerGlobalScope/message_event イベントのイベントオブジェクトを表し、このようなイベントの存続期間を延長します。	51	17	44	11.1	51	11.3
`data` data は ExtendableMessageEvent インターフェイスの読み取り専用プロパティで、イベントのデータを返します。任意のデータ型を使用できます。	51	17	44	11.1	51	11.3
`ExtendableMessageEvent` ExtendableMessageEvent() コンストラクターは、新しい ExtendableMessageEvent オブジェクトのインスタンスを作成します。	51	17	44	11.1	51	11.3
`lastEventId` lastEventID は ExtendableMessageEvent インターフェイスの読み取り専用プロパティで、サーバー送信イベントにおける、イベントソースの最後のイベント ID を表します。これは空の文字列です。	51	17	44	11.1	51	11.3
`origin` origin は ExtendableMessageEvent インターフェイスの読み取り専用プロパティで、メッセージを送信した Client のオリジンを返します。	51	17	44	11.1	51	11.3
`ports` ports は ExtendableMessageEvent インターフェイスの読み取り専用プロパティで、関連するメッセージチャンネル（メッセージが送信されるチャンネル）のポートを表す MessagePort オブジェクトを含む配列を返します。	51	17	44	11.1	51	11.3
`source` source は ExtendableMessageEvent インターフェイスの読み取り専用プロパティで、メッセージの送信元の Client オブジェクトへの参照を返します。	51	17	44	11.1	51	11.3
`FetchEvent` これは fetch イベント用のイベント型で、ServiceWorkerGlobalScopeに配信されます。これには、リクエストや、受け手がどうレスポンスを扱うのかといった、フェッチに関する情報が含まれています。これは、このフェッチへのレスポンスを提供する FetchEvent.respondWith メソッドを提供します。	40	17	44	11.1	40	11.3
`clientId` clientId は FetchEvent インターフェイスの読み取り専用プロパティで、現在のサービスワーカーが制御している Client の id を返します。	49	17	45	11.1	49	11.3
`FetchEvent` FetchEvent() コンストラクターは、新しい FetchEvent オブジェクトを作成します。	44	17	44	11.1	44	11.3
`handled` handled は FetchEvent インターフェイスのプロパティで、このイベントがフェッチアルゴリズムによって処理されたかどうかを示すプロミスを返します。このプロパティは、ブラウザーがレスポンスを消費した後にコードを実行することができ、通常は ExtendableEvent.waitUntil メソッドと共に使用します。	86	86	84	16	86	16
`preloadResponse` preloadResponse は FetchEvent インターフェイスの読み取り専用プロパティで、 Promise を返します。これは、ナビゲーション先読みが発生した場合はナビゲーション先読みの Response に解決し、それ以外の場合は undefined に解決します。	59	18	99	15.4	59	15.4
`request` request は FetchEvent インターフェイスの読み取り専用プロパティで、イベントハンドラーを起動した Request を返します。	40	17	44	11.1	40	11.3
`respondWith` respondWith() は FetchEvent インターフェイスのメソッドで、ブラウザー既定の fetch 処理を抑止して、自分自身で Response 用のプロミスを提供できるようにします。	42	17	44	11.1	42	11.3
`respondWith (networkerror on same-origin cors)` リクエストモードが `same-origin` で、レスポンスタイプが `cors` の場合、`NetworkError` が発生します	66	79	59		66
`respondWith (resource url)` 実験的リソースの最終URLを指定した際の動作の変更。			59
`resultingClientId` resultingClientId は FetchEvent インターフェイスの読み取り専用プロパティで、ページナビゲーション中に前のクライアントを置き換えるClientの Client.id です。	72	79	65	16	72	16
`InstallEvent` ServiceWorkerGlobalScope.install_event ハンドラーに引数として渡される InstallEvent インターフェイスは、ServiceWorkerGlobalScope の ServiceWorker で配信されるインストールアクションを表します。ExtendableEvent の子として、FetchEvent のような機能イベントがインストール中に配信されないようにします。	40	17			40
`addRoutes` 実験的 InstallEvent インターフェースの addRoutes() メソッドは、1つ以上の静的ルートを指定します。これらのルートは、指定されたリソースを取得するためのルールを定義するもので、サービスワーカーの起動前であっても使用されます。これにより、例えば、常にネットワークやブラウザのキャッシュからリソースを取得したい場合などにサービスワーカーをバイパスすることができ、…	123	123			123
`InstallEvent` 実験的 InstallEvent() コンストラクターは、新しい InstallEvent オブジェクトを生成します。	40	79			40
`NavigationPreloadManager` NavigationPreloadManager はサービスワーカー API のインターフェイスで、サービスワーカーによるリソースの事前読み込みを管理するためのメソッドを提供します。	59	18	99	15.4	59	15.4
`disable` disable() は NavigationPreloadManager インターフェイスのメソッドで、以前に NavigationPreloadManager.enable() を使用して開始されたサービスワーカー管理リソースの自動事前読み込みを停止します。このメソッドは、undefined で解決するプロミスを返します。	59	18	99	15.4	59	15.4
`enable` enable() は NavigationPreloadManager インターフェイスのメソッドで、サービスワーカーが管理するリソースの事前読み込みを有効にするために使用されます。このメソッドは、undefined で解決するプロミスを返します。	59	18	99	15.4	59	15.4
`getState` getState() は NavigationPreloadManager インターフェイスのメソッドで、事前読み込みが有効になっているかどうか、また、どのような値が HTTP ヘッダーの Service-Worker-Navigation-Preload に送信されるかを示すプロパティを持つオブジェクトを返すプロミス (Promise) を返します。	59	18	99	15.4	59	15.4
`setHeaderValue` setHeaderValue() は NavigationPreloadManager インターフェイスのメソッドで、サービスワーカーのナビゲーション事前読み込み中に実行された Window/fetch 操作の結果として送信されるリクエストに付加される Service-Worker-Navigation-Preload ヘッダーの値を設定します。これは、undefined で解決する空のプロミス (Promise) を返します。	59	18	99	15.4	59	15.4
`serviceWorker` Navigator.serviceWorker は読み取り専用のプロパティで、 ServiceWorkerContainer オブジェクトを返します。これは関連付けられた文書で ServiceWorker の登録、削除、更新、通信へのアクセスを提供します。	40	17	44	11.1	40	11.3
`ServiceWorker` ServiceWorker はサービスワーカー API のインターフェイスで、サービスワーカーへの参照を提供します。複数のbrowsing context（ページ、ワーカー、など）を、同じサービスワーカーに一意の ServiceWorker オブジェクトによって関連付けることができます。	40	17	44	11.1	40	11.3
`postMessage` postMessage() は ServiceWorker インターフェイスのメソッドで、ワーカーにメッセージを送信します。第一引数はワーカーに送信するデータです。このデータは、構造化クローンアルゴリズムで処理することができる任意の JavaScript オブジェクトにすることができます。	40	17	44	11.1	40	11.3
`scriptURL` ServiceWorkerRegistration の一部として定義された ServiceWorker シリアライズスクリプトの URL を返します。 ServiceWorker を登録した文書と同じオリジンである必要があります。	40	17	44	11.1	40	11.3
`state` state は ServiceWorker インターフェイスの読み取り専用プロパティで、サービスワーカーの現在の状態を表す文字列を返します。読み込みプロパティであるは service worker の現在の状態を表す文字列を返します。これは、parsed、installing、installed、activating、activated、redundant の何れかです。	40	17	44	11.1	40	11.3
`statechange_event` statechange イベントは、ServiceWorker.state が変化するたびに発行されます。	40	17	44	11.1	40	11.3
`ServiceWorkerContainer` ServiceWorkerContainer はサービスワーカー API のインターフェイスで、ネットワークエコシステムの全体的な単位として、サービスワーカーを表すオブジェクトを提供します。これは、サービスワーカーの登録、登録解除、更新のための機能や、サービスワーカーの状態とそれらの登録状況にアクセスするための機能を備えています。	40	17	44	11.1	40	11.3
`controller` controller は ServiceWorkerContainer インターフェイスの読み取り専用プロパティで、ServiceWorker オブジェクトの状態が activating または activated ならそれ (ServiceWorkerRegistration.active で返されるのと同じオブジェクト) を返します。このプロパティはリクエストが強制リフレッシュ（Shift + リフレッシュ）やアクティブワーカーがない場合は null を返します。	40	17	44	11.1	40	11.3
`controllerchange_event` controllerchange は ServiceWorkerContainer インターフェイスのイベントで、文書の関連する ServiceWorkerRegistration が新しいアクティブ (ServiceWorkerRegistration.active) ワーカーを取得したときに発生します。	40	17	44	11.1	40	11.3
`getRegistration` getRegistration() は ServiceWorkerContainer インターフェイスのメソッドで、スコープ URL が指定された文書の URL と一致する ServiceWorkerRegistration オブジェクトを取得します。このメソッドは、ServiceWorkerRegistration または undefined に解決される Promise を返します。	40	17	44	11.1	40	11.3
`getRegistrations` getRegistrations() は ServiceWorkerContainer インターフェイスのメソッドで、この ServiceWorkerContainer に関するすべての ServiceWorkerRegistration を配列で取得します。このメソッドは、 ServiceWorkerRegistration の配列に解決される Promise を返します。	45	17	44	11.1	45	11.3
`message_event` message イベントは、サービスワーカーからメッセージを受信するために、サービスワーカーによって制御されるページで使用します。	40	17	44	11.1	40	11.3
`ready` ready は ServiceWorkerContainer インターフェイスの読み取り専用プロパティは、サービスワーカーがアクティブになるまでコードの実行を遅らせる方法を提供します。決して拒否しない Promise を返し、現在のページに関連する ServiceWorkerRegistration がアクティブ（ServiceWorkerRegistration.active）ワーカーを持つまで無期限に待機します。その条件が満たされると、ServiceWorkerRegistration で解決されます。	40	17	44	11.1	40	11.3
`register` register() は ServiceWorkerContainer インターフェイスのメソッドで、与えられたスコープの ServiceWorkerRegistration を作成または更新します。	40	17	44	11.1	40	11.3
`startMessages` startMessages() は ServiceWorkerContainer インターフェイスのメソッドで、サービスワーカーからその制御下にあるページに配信されるメッセージの流れを明示的に開始します（例えば、 Client.postMessage() を介して送信されます）。これは、ページのコンテンツの読み込みが完了する前であっても、送信されたメッセージに早く反応するために使用できます。	74	79	64	11.1	74	11.3
`worker_support` 労働者で利用可能			133	11.1		11.3
`ServiceWorkerGlobalScope` ServiceWorkerGlobalScope はサービスワーカー API のインターフェイスで、サービスワーカーのグローバル実行コンテキストを表します。	40	17	44	11.1	40	11.3
`activate_event` activate は ServiceWorkerGlobalScope インターフェイスのイベントで、ServiceWorkerRegistration が新しいアクティブワーカー（ServiceWorkerRegistration.active worker）を取得すると発生します。	40	17	44	11.1	40	11.3
`clients` clients は ServiceWorkerGlobalScope インターフェイスの読み取り専用プロパティで、サービスワーカーに関連付けられた Clients オブジェクトを返します。	40	17	44	11.1	40	11.3
`fetch_event` fetch は ServiceWorkerGlobalScope インターフェイスのイベントで、メインアプリスレッドがネットワークリクエストを発行したときに、サービスワーカーのグローバルスコープで発生します。これにより、サービスワーカーがネットワークリクエストを傍受し、独自のレスポンス（例えば、ローカルキャッシュからのレスポンス）を送信できるようになります。	40	17	44	11.1	40	11.3
`install_event` install は ServiceWorkerGlobalScope インターフェイスのイベントで、 ServiceWorkerRegistration が新しい ServiceWorkerRegistration.installing ワーカーを取得したときに発行されます。	40	17	44	11.1	40	11.3
`message_event` message は ServiceWorkerGlobalScope インターフェイスのイベントで、着信メッセージを受信したときに発生します。制御されたページは、ServiceWorker.postMessage() メソッドを使用して、サービスワーカーにメッセージを送信することができます。サービスワーカーは、任意で、制御されたページに対応する Client.postMessage() を介して返信することができます。	40	17	44	11.1	40	11.3
`registration` registration は ServiceWorkerGlobalScope インターフェイスの読み取り専用プロパティで、サービスワーカーの登録を表す ServiceWorkerRegistration オブジェクトの参照を返します。	42	17	44	11.1	42	11.3
`serviceWorker` serviceWorker は ServiceWorkerGlobalScope インターフェイスの読み取り専用プロパティで、サービスワーカーを表す ServiceWorker オブジェクトへの参照を返します。	79	79		15.4	79	15.4
`skipWaiting` skipWaiting() は ServiceWorkerGlobalScope インターフェイスのメソッドで、待機しているサービスワーカーがアクティブになるように強制します。	41	17	44	11.1	41	11.3
`active` active は ServiceWorkerRegistration インターフェイスのプロパティで、ServiceWorker.state がアクティブ化中 (activating) またはアクティブ化済み (activated) のサービスワーカーを返します。このプロパティは、最初は null に設定されています。	40	17	44	11.1	40	11.3
`installing` installing は ServiceWorkerRegistration インターフェイスのプロパティで、ServiceWorker.state がインストール中 (installing) のサービスワーカーを返します。このプロパティは、最初は null に設定されています。	40	17	44	11.1	40	11.3
`navigationPreload` navigationPreload は ServiceWorkerRegistration インターフェイスの読み取り専用プロパティで、現在のサービスワーカー登録に関連する NavigationPreloadManager を返します。	59	17	99	15.4	59	15.4
`scope` scope は ServiceWorkerRegistration インターフェイスの読み取り専用プロパティで、サービスワーカー登録の一意の識別子を返します。サービスワーカーは、 ServiceWorker を登録する文書と同じオリジンにある必要があります。	40	17	44	11.1	40	11.3
`unregister` unregister() は ServiceWorkerRegistration インターフェイスのメソッドで、サービスワーカーの登録を解除し、プロミス (Promise) を返します。登録が見つからなかった場合、プロミスは false に解決されます。それ以外の場合は、登録解除したかどうかに関係なく、true に解決されます（誰かが同じスコープで ServiceWorkerContainer.register() を同時に呼び出した場合は、登録解除されない場合があります）。サービスワーカーは、登録解除される前に進行中の操作を完了します。	40	17	44	11.1	40	11.3
`update` update() は ServiceWorkerRegistration インターフェイスのメソッドで、サービスワーカーの更新を試みます。ワーカーのスクリプト URL を読み取り、新しいワーカーが現在のワーカーとバイト単位で同一でない場合は、新しいワーカーをインストールします。前回の読み取りが 24 時間以上前であった場合、ワーカーの読み取り時にブラウザーのキャッシュをバイパスします。	45	17	44	11.1	45	11.3
`updatefound_event` updatefound は ServiceWorkerRegistration インターフェイスのイベントで、 ServiceWorkerRegistration.installing プロパティが新しいサービスワーカーが取得するたびに呼び出されます。	40	17	44	11.1	40	11.3
`updateViaCache` updateViaCache は ServiceWorkerRegistration インターフェイスの読み取り専用プロパティで、 ServiceWorkerContainer.register の呼び出しで指定されたモードを使用してキャッシュを更新します。 importScripts のリクエストは HTTP キャッシュで行われます。 updateViaCache はこの動作を制御します。	68	18	57	11.1	68	11.3
`waiting` waiting は ServiceWorkerRegistration インターフェイスのプロパティで、サービスワーカーのうち ServiceWorker.state がインストール済み (installed) のものを返します。このプロパティは、最初は null に設定されています。	40	17	44	11.1	40	11.3
`WindowClient` WindowClient はサービスワーカー API のインターフェイスで、アクティブなワーカーによって制御される閲覧コンテキスト内のドキュメントである、サービスワーカークライアントのスコープを表します。サービスワーカークライアントは、それ自身の読み込みとサブリソースに対してサービスワーカーを個別に選択して使用します。	42	17	44	11.1	42	11.3
`ancestorOrigins` 実験的 WindowClient インターフェースの ancestorOrigins 読み取り専用プロパティは、この WindowClient が表すブラウジングコンテキストのすべての祖先のオリジンを逆順で列挙した文字列の配列です。				16		16
`focus` focus() は WindowClient インターフェイスのメソッドで、現在のクライアントにユーザー入力フォーカスを与え、既存の WindowClient に解決するプロミス (Promise) を返します。	42	17	44	11.1	42	11.3
`focused` focused は WindowClient インターフェイスの読み取り専用プロパティで、現在のクライアントにフォーカスがあるかどうかを示す論理値です。	42	17	44	11.1	42	11.3
`navigate` navigate() は WindowClient インターフェイスのメソッドで、指定された URL を制御されたクライアントのページに読み込んでから、既存の WindowClient に解決されるプロミス (Promise) を返します。	49	17	50	16	49	16
`visibilityState` visibilityState は WindowClient インターフェイスの読み取り専用プロパティで、現在のクライアントの可視性を示します。この値は、"hidden"、"visible"、"prerender" のいずれかです。	42	17	44	11.1	42	11.3
`serviceWorker` WorkerNavigator インターフェイスの読み取り専用プロパティ serviceWorker は、関連付けられた文書の ServiceWorkerContainer オブジェクトを返します。このオブジェクトは、ServiceWorker の登録、除去、更新、通信を可能にします。			133	11.1		11.3
その他
`Service-Worker-Navigation-Preload` HTTPの「Service-Worker-Navigation-Preload」リクエストヘッダーは、そのリクエストがサービスワーカーのナビゲーションプリロード中に実行されたWindow/fetch操作の結果であることを示します。これにより、サーバーは通常のfetch()とは異なるリソースで応答することが可能になります。	59	18	Preview	15.4	59	15.4

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

JAVASCRIPT

const CACHE_VERSION = 1;
const CURRENT_CACHES = {
  font: `font-cache-v${CACHE_VERSION}`,
};

self.addEventListener("activate", (event) => {
  // Delete all caches that aren't named in CURRENT_CACHES.
  // While there is only one cache in this example, the same logic
  // will handle the case where there are multiple versioned caches.
  const expectedCacheNamesSet = new Set(Object.values(CURRENT_CACHES));
  event.waitUntil(
    caches.keys().then((cacheNames) =>
      Promise.all(
        cacheNames.map((cacheName) => {
          if (!expectedCacheNamesSet.has(cacheName)) {
            // If this cache name isn't present in the set of
            // "expected" cache names, then delete it.
            console.log("Deleting out of date cache:", cacheName);
            return caches.delete(cacheName);
          }
          return undefined;
        }),
      ),
    ),
  );
});

self.addEventListener("fetch", (event) => {
  console.log("Handling fetch event for", event.request.url);

  event.respondWith(
    caches
      .open(CURRENT_CACHES.font)
      .then((cache) => cache.match(event.request))
      .then((response) => {
        if (response) {
          // If there is an entry in the cache for event.request,
          // then response will be defined and we can just return it.
          // Note that in this example, only font resources are cached.
// ...

実務での使いどころ

Service workers の活用

Cache インターフェイスは、 Request / Response オブジェクトのペアを保存するストレージの仕組みを提供します。

注意点

古いブラウザでは対応していない場合がある。

実装メモ

一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。

対応ブラウザ

基本構文

実務での使いどころ

Service workers の活用

注意点

実装メモ

参考リンク