ServiceWorkerGlobalScope

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2018年4月⁩.

* Some parts of this feature may have varying levels of support.

安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

メモ: この機能はサービスワーカー内でのみ利用可能です。

ServiceWorkerGlobalScope はサービスワーカー API のインターフェイスで、サービスワーカーのグローバル実行コンテキストを表します。

開発者は、サービスワーカーの状態が終了/再起動サイクルに渡って維持されないことを覚えておく必要があります。したがって、それぞれのイベントハンドラーは、それが裸の、既定のグローバル状態で呼び出されることを想定する必要があります。

いったん正しく登録されたら、サービスワーカーはメモリーとプロセッサーの力を温存するため、アイドル時であれば停止させることができます。アクティブなサービスワーカーは、例えば fetch や message などのイベントに応じて自動的に再起動します。

加えて、同期リクエストはサービスワーカーでは許可されていません。非同期リクエスト、つまり fetch() メソッド経由で初期化されたものが使われます。

このインターフェイスは WorkerGlobalScope インターフェイスと、その親の EventTarget を継承しています。

インスタンスプロパティ

このインターフェイスには WorkerGlobalScope インターフェイス、およびその親である EventTarget から継承したプロパティがあります。

ServiceWorkerGlobalScope.clients 読取専用: サービスワーカーに関連付けられた Clients オブジェクトを保持します。
ServiceWorkerGlobalScope.cookieStore 読取専用 Experimental: このサービスワーカーに関連付けられた CookieStore オブジェクトを参照します。
ServiceWorkerGlobalScope.registration 読取専用: サービスワーカーの登録を表す ServiceWorkerRegistration オブジェクトを保持します。
ServiceWorkerGlobalScope.serviceWorker 読取専用: サービスワーカーを表す ServiceWorker オブジェクトを保持します。

インスタンスメソッド

このインターフェイスには WorkerGlobalScope インターフェイス、およびその親である EventTarget から継承したメソッドがあります。

ServiceWorkerGlobalScope.skipWaiting(): 現在のサービスワーカーの登録を、待ち状態からクライアントが使っている時のアクティブ状態に進めます。

イベント

このイベントを待ち受けするには、 addEventListener() などのメソッドで使用するか、このインターフェイスの onイベント名 プロパティにイベントリスナー設定するかしてください。

activate: ServiceWorkerRegistration が新しい ServiceWorkerRegistration.active ワーカーを得た時に発生します。
backgroundfetchabort Experimental: ユーザーまたはアプリによってバックグラウンドフェッチ処理が中止された場合に発生します。
backgroundfetchclick Experimental: ユーザーが UI をクリックしてバックグラウンドフェッチ処理を実行したときに発生します。
backgroundfetchfail Experimental: バックグラウンドフェッチ処理で、リクエストの少なくとも 1 つが失敗したときに発生します。
backgroundfetchsuccess Experimental: バックグラウンドフェッチ処理で、リクエストされたすべてが成功したときに発生します。
canmakepayment Experimental: 決済アプリのサービスワーカーで発行され、決済を処理する準備ができたかどうかを調べるために使用されます。特に、販売者のウェブサイトが PaymentRequest() コンストラクターを呼び出すと発生します。
contentdelete Experimental: ContentIndex からアイテムが取り除かれたときに発生します。
cookiechange Experimental: サービスワーカーの Cookie 変更購読リストと一致する Cookie 変更があった場合に発生します。
fetch: fetch() が呼び出されたときに発生します。
install: ServiceWorkerRegistration が新しい ServiceWorkerRegistration.installing ワーカーを得た時に発生します。
message: メッセージを受信したときに発生します。制御中のページは MessagePort.postMessage() メソッドを使用してサービスワーカーにメッセージを送信することができます。
messageerror: 受信メッセージがデシリアライズできなかった場合に発生します。
notificationclick: 表示された通知をユーザーがクリックしたときに発生します。
notificationclose: 表示された通知をユーザーが閉じたときに発生します。
paymentrequest Experimental: 販売者のウェブサイトで PaymentRequest.show() メソッドを介して支払いフローが開始されたときに、支払いアプリで発生します。
sync: サービスワーカーのクライアントページから SyncManager.register への呼び出しが行われたときに発生します。ネットワークが有効であるか、すぐに利用可能になるのであれば、直ちに同期が試みられます。
periodicsync Experimental: PeriodicSyncManager を登録したときに指定した周期で発生します。
push: サーバーのプッシュ通知が届いたときに発生します。
pushsubscriptionchange: プッシュ通知への加入が無効化されたとき、または無効化されようとするとき (例えば、プッシュ通知の有効期限が設定されたとき) に発生します。

このコードスニペットは、service worker prefetch の例(prefetch の例のライブ版を参照してください)からのものです。 onfetch イベントハンドラーは fetch イベントを監視します。イベントが発生した時、コードは Cache オブジェクト内で、最初に一致したリクエストに対して解決するプロミスを返します。もし、何も一致しなかった場合は、コードはネットワークからレスポンスを読み取ります。

さらに、このコードは fetch() 操作で発生した例外を処理しています。 HTTP のエラーレスポンス(たとえば、404)は、例外を引き起こさないことに注意してください。適切なエラーコードセットを持った通常のレスポンスオブジェクトを返します。

self.addEventListener("fetch", (event) => {
 console.log("Handling fetch event for", event.request.url);
 event.respondWith(
 caches.match(event.request).then((response) => {
 if (response) {
 console.log("Found response in cache:", response);
 return response;
 }
 console.log("No response found in cache. About to fetch from network...");
 return fetch(event.request).then(
 (response) => {
 console.log("Response from network is:", response);
 return response;
 },
 (error) => {
 console.error("Fetching failed:", error);
 throw error;
 },
 );
 }),
 );
});