ServiceWorkerGlobalScope

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

開発者は ServiceWorker の状態が停止/再起動サイクルをまたいで続かないことを心にとめておいてください。このため各イベントハンドラーは、むき出しの、デフォルトのグローバル状態で実行されることを想定すべきです。

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

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

このインターフェイスは WorkerGlobalScope インターフェイスと、その親の EventTarget を継承し、このため WindowTimers, WindowBase64, WindowEventHandlers のプロパティを実装しています。

  <div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 12.142857142857142%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 85" preserveAspectRatio="xMinYMin meet"><a xlink:href="https://developer.mozilla.org/ja/docs/Web/API/EventTarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="56" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">EventTarget</text></a><polyline points="111,25  121,20  121,30  111,25" stroke="#D4DDE4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/ja/docs/Web/API/WorkerGlobalScope" target="_top"><rect x="151" y="1" width="170" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="236" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">WorkerGlobalScope</text></a><polyline points="321,25  331,20  331,30  321,25" stroke="#D4DDE4" fill="none"/><line x1="331" y1="25" x2="361" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/ja/docs/Web/API/ServiceWorkerGlobalScope" target="_top"><rect x="361" y="1" width="240" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text  x="481" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">ServiceWorkerGlobalScope</text></a></svg></div>

  a:hover text { fill: #0095DD; pointer-events: all;}

プロパティ

ServiceWorkerGlobalScope.clients 読取専用

サービスワーカーに関連する Clients オブジェクトを含む。

ServiceWorkerGlobalScope.registration 読取専用

サービスワーカーの登録を表す ServiceWorkerRegistration オブジェクトを含む。

ServiceWorkerGlobalScope.caches 読取専用

サービスワーカーに関連する CacheStorage オブジェクトを含む。

イベント

activate

ServiceWorkerRegistration が新しい ServiceWorkerRegistration.active ワーカーを得た時に発生します。
ServiceWorkerGlobalScope.onactivate プロパティからも利用できます。

fetch

fetch() が呼び出されたときに発生します。
ServiceWorkerGlobalScope.onfetch プロパティからも利用できます。

install

ServiceWorkerRegistration が新しい ServiceWorkerRegistration.installing ワーカーを得た時に発生します。
ServiceWorkerGlobalScope.oninstall プロパティからも利用できます。

message

メッセージを受信したときに発生します。制御中のページは MessagePort.postMessage() メソッドを使用してサービスワーカーにメッセージを送信することができます。サービスワーカーは任意で event.data.port で公開されている MessagePort を通じて、対応する制御中のページに返信することができます。
ServiceWorkerGlobalScope.onmessage プロパティからも利用できます。

notificationclick

表示された通知をユーザーがクリックしたときに発生します。
ServiceWorkerGlobalScope.onnotificationclick プロパティからも利用できます。

notificationclose

表示された通知をユーザーが閉じたときに発生します。
ServiceWorkerGlobalScope.onnotificationclose プロパティからも利用できます。

push

サーバーのプッシュ通知が届いたときに発生します。
ServiceWorkerGlobalScope.onpush プロパティからも利用できます。

pushsubscriptionchange

プッシュ通知への加入が無効化されたとき、または無効化されようとするとき (例えば、プッシュ通知の有効期限が設定されたとき) に発生します。
ServiceWorkerGlobalScope.onpushsubscriptionchange プロパティからも利用できます。

sync

サービスワーカーのクライアントページから SyncManager.register への呼び出しが行われたときに発生します。ネットワークが有効であるか、すぐに利用可能になるのであれば、直ちに同期が試みられます。
ServiceWorkerGlobalScope.onsync プロパティからも利用できます。

メソッド

ServiceWorkerGlobalScope.skipWaiting()

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

ServiceWorkerGlobalScope は WorkerGlobalScope を実装します — これは GlobalFetch を実装します。このため利用できる次のプロパティも持っています:

GlobalFetch.fetch()

リソース取得(fetch)のプロセスを開始します。これはリクエストのレスポンスを表す Response オブジェクトを解決するpromiseを返します。このアルゴリズムは service worker コンテキストに渡されるfetch処理のエントリーポイントです。

例

このコードスニペットは、service worker prefetch sample（prefetch example live を参照してください）からのものです。ServiceWorkerGlobalScope.onfetch イベントハンドラーは fetch イベントを監視します。イベントが発火した時、コードは Cache オブジェクト内で、最初にマッチングしたリクエストに対して解決するプロミスを返します。もし、何もマッチしなかった場合は、コードはネットワークからのレスポンスをフェッチします。

さらに、このコードは fetch() 演算から投げられた例外をハンドリングします。 HTTP のエラーレスポンス (たとえば、404) は、例外を引き起こさないことにご注意ください。適切なエラーコードセットを持った通常のレスポンスオブジェクトを返します。

self.addEventListener('fetch', function(event) {
  console.log('Handling fetch event for', event.request.url);

  event.respondWith(
    caches.match(event.request).then(function(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(function(response) {
        console.log('Response from network is:', response);

        return response;
      }, function(error) {
        console.error('Fetching failed:', error);

        throw error;
      });
    })
  );
});

仕様書

ブラウザーの互換性

関連情報

• サービスワーカーの使用
• Service workers basic code example
• Is ServiceWorker ready?
• Promise
• ウェブワーカーの使用