ServiceWorkerGlobalScope

ServiceWorker API の ServiceWorkerGlobalScope インターフェイスは service worker のグローバル実行コンテキストを表します。

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

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

加えて、同期リクエストは service worker では許可されていません— 非同期リクエスト、つまり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 読取専用

Service worker に関連する Clients オブジェクトを含む。

ServiceWorkerGlobalScope.registration 読取専用

Service worker の登録を表す ServiceWorkerRegistration オブジェクトを含む。

ServiceWorkerGlobalScope.caches 読取専用

Service worker に関連する CacheStorage オブジェクトを含む。

イベントハンドラー

ServiceWorkerGlobalScope.onactivate

An event handler fired whenever an activate event occurs — when a ServiceWorkerRegistration acquires a new ServiceWorkerRegistration.active worker.

ServiceWorkerGlobalScope.onfetch

An event handler fired whenever a fetch event occurs — when a fetch() is called.

ServiceWorkerGlobalScope.oninstall

An event handler fired whenever an install event occurs — when a ServiceWorkerRegistration acquires a new ServiceWorkerRegistration.installing worker.

ServiceWorkerGlobalScope.onmessage

An event handler fired whenever a message event occurs — when incoming messages are received. Controlled pages can use the MessagePort.postMessage() method to send messages to service workers. The service worker can optionally send a response back via the MessagePort exposed in event.data.port, corresponding to the controlled page.

ServiceWorkerGlobalScope.onnotificationclick

An event handler fired whenever a notificationclick event occurs — when a user clicks on a displayed notification.

ServiceWorkerGlobalScope.onnotificationclose

An event handler fired whenever a notificationclose event occurs — when a user closes a displayed notification.

ServiceWorkerGlobalScope.onpush

An event handler fired whenever a push event occurs — when a server push notification is received.

ServiceWorkerGlobalScope.onpushsubscriptionchange

An event handler fired whenever a pushsubscriptionchange event occurs — when a push subscription has been invalidated, or is about to be invalidated (e.g. when a push service sets an expiration time.)

ServiceWorkerGlobalScope.onsync

An event handler fired whenever a SyncEvent event occurs. This is triggered when a call to SyncManager.register is made from a service worker client page. The attempt to sync is made either immediately if the network is available or as soon as the network becomes available. 

メソッド

ServiceWorkerGlobalScope.skipWaiting()

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

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

GlobalFetch.fetch()

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

例

This code snippet is from the service worker prefetch sample (see prefetch example live.) The ServiceWorkerGlobalScope.onfetch event handler listens for the fetch event. When fired, the code returns a promise that resolves to the first matching request in the Cache object. If no match is found, the code fetches a response from the network.

The code also handles exceptions thrown from the fetch() operation. Note that an HTTP error response (e.g., 404) will not trigger an exception. It will return a normal response object that has the appropriate error code set.

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;
      });
    })
  );
});

仕様

ブラウザー実装状況

関連情報

• Using Service Workers
• Service workers basic code example
• Is ServiceWorker ready?
• Promise
• Using web workers