この翻訳は不完全です。英語から この記事を翻訳 してください。

サービスワーカーは、基本的にウェブアプリケーション、ブラウザー、(もしあれば)ネットワークの間に介在するプロキシサーバーとして機能します。オフラインで利用しやすくするために、ネットワークのリクエストに介在して、ネットワークの使用可否の状況に基づいて適切な対応を取ったり、サーバー上にある資産を更新したりすることができるようになります。また、プッシュ通知やバックグラウンド同期の API 群へのアクセスもできるようになります。

サービスワーカーの概念と使い方

サービスワーカーは、あるオリジンとパスに対して登録されたイベント駆動型の worker です。 JavaScript ファイルの形を取り、関連付けられたウェブページやサイトを制御し、ナビゲーションやリソースへのリクエストを横取りしたり改変したりして、(in a very granular fashion)でリソースをキャッシュして、特定の状況下(もっとも顕著な例は、ネットワークが利用できないとき)にアプリがどのように振舞うかを完全に制御することができます。

サービスワーカーは worker のコンテキストで実行されます。従って、 DOM へアクセスすることができず、アプリを実行する主要な JavaScript とは異なるスレッドで実行されるため、ブロックされることはありません。完全に非同期で設計されています。そのため、同期型の XHRlocalStorage のような API をサービスワーカーで利用することはできません。

Serivce worker はセキュリティ上の理由から、 HTTPS 通信でのみ動作します。ネットワークリクエストが改変されると、中間者攻撃を受けるので、人間に広く開かれているのは本当にまずいことです。 Firefox ではプライベートブラウジングモードでサービスワーカー API を利用することはできません。

メモ: サービスワーカー は AppCache のような、この分野における以前の試みより勝っています。以前のものは、何をしようとしているかを想定していなかったり、想定が正しくなかったときに中断したりすることがなかったのに対して、サービスワーカーはすべてを制御することができるためです。

メモ: サービスワーカーは promise を頻繁に使用して、応答が来るのを待ってから、成功または失敗のアクションで応答します。 promise のアーキテクチャはこの領域に対して理想的なものです。

登録

サービスワーカーは最初に ServiceWorkerContainer.register メソッドを使って登録されます。成功したら、 サービスワーカーがクライアントにダウンロードされ、ユーザーがアクセスした URL のオリジン内全体、又は指定したそのサブセット内に対してインストールと有効化(下記参照)が試みられます。

ダウンロードとインストールと有効化

この段階で、サービスワーカーは以下のライフサイクルで実行されます。

  1. ダウンロード
  2. インストール
  3. 有効化

ユーザーが最初にサービスワーカーが制御するサイトやページにアクセスすると、サービスワーカーが直ちにダウンロードされます。

その後、ダウンロードは24時間ごとに行われます。もっと頻繁にダウンロードされるかもしれませんが、不正なスクリプトに長時間悩まされないために、24時間ごとにダウンロードする必要があります

ダウンロードしたファイルが新しいと分かった場合、既存のサービスワーカーとバイト単位に比較して異っていた場合や、そのページやサイトで最初のサービスワーカーが見つかった場合は、インストールが試みられます。

サービスワーカーが初めて有効化されるときであれば、インストールが試みられ、インストールに成功した後で、有効化されます。

利用できる既存のサービスワーカーがあった場合は、新しいバージョンがバックグラウンドでインストールされますが、まだ有効化されません。この時点のものを待機中のワーカーと呼びます。まだ使用している古いサービスワーカーが読み込んでいるページがなくなった時のみ、有効化されます。ページが読み込まれなくなったらすぐに、新しいサービスワーカーが有効化されます(アクティブワーカーになります)。 ServiceWorkerGlobalScope.skipWaiting() を使用するとすぐに有効化することができ、 Clients.claim() を使用してアクティブワーカーが既存のページの管理を始めることができます。

InstallEvent を受け取ることもできます。イベントが発火したときの標準的なアクションは、使用するためにサービスワーカーを準備すること、例えば組込みストレージ API を使用してキャッシュを構築したり、アプリがオフラインの時に使用したい資産をその中に配置したりすることです。

activate イベントもあります。このイベントが発火した時点は、古いキャッシュや、前のバージョンのサービスワーカーに関するその他のものを整理するのによいタイミングです。

サービスワーカーは FetchEvent イベントを使用してリクエストに応答することができます。 event.respondWith メソッドを使用して、これらのリクエストに対するレスポンスを何でも思うように変更できます。

メモ: oninstall/onactivate は完了するまでに時間がかかる可能性があるため、サービスワーカーの仕様書では waitUntil メソッドを提供しており、これが oninstall 又は onactivate を呼び出すと、 promise を渡します。 promise が正常に解決されるまで、関数イベントはサービスワーカーに配信されません。

最初の基本的な例をどのように構築するかについての完全なチュートリアルは、 サービスワーカーの使用を読んでください。

その他の使用例

サービスワーカーは次のようなことにも利用されることを想定しています。

  • バックグラウンドのデータ同期
  • 他のオリジンからのリソースのリクエストに対する応答
  • 位置情報やジャイロスコープのような計算コストの高いデータの更新を集中的に受信して、複数のページがデータの一部を利用できるようにすること
  • CoffeeScript, less, CJS/AMD モジュールなどの開発用途で、クライアント側のコンパイルや依存性管理
  • バックグラウンドサービスのフック
  • 特定の URL パターンに基づくテンプレートカスタマイズ
  • パフォーマンスの改善、例えばユーザーが近く必要とするであろう、写真アルバムの次の数枚の写真などの先読み

近い将来、サービスワーカーはネイティブアプリで実現できることに近い、その他いくつもの便利なことを、ウェブプラットフォーム上でも実現する事ができるようになるでしょう。興味深いことに、次のような他の仕様書でも、サービスワーカーのコンテキストを利用できるようになってきていることです。

  • バックグラウンド同期: ユーザーがサイトにいないときにもサービスワーカーを起動し、キャッシュを更新したりすることができます。
  • プッシュメッセージへの応答: 新しいコンテンツが利用可能になった旨を伝えるためにユーザーにメッセージを送るためにサービスワーカーを起動します。
  • 特定の日付・時刻に対する反応
  • 特定の地理的範囲へ入った事を検知する

インターフェイス

Cache
Represents the storage for Request / Response object pairs that are cached as part of the ServiceWorker life cycle.
CacheStorage
Represents the storage for Cache objects. It provides a master directory of all the named caches that a ServiceWorker can access, and maintains a mapping of string names to corresponding Cache objects.
Client
Represents the scope of a service worker client. A service worker client is either a document in a browser context or a SharedWorker, which is controlled by an active worker.
Clients
Represents a container for a list of Client objects; the main way to access the active service worker clients at the current origin.
ExtendableEvent
Extends the lifetime of the install and activate events dispatched on the ServiceWorkerGlobalScope, as part of the service worker lifecycle. This ensures that any functional events (like FetchEvent ) are not dispatched to the ServiceWorker, until it upgrades database schemas, and deletes outdated cache entries, etc.
ExtendableMessageEvent
The event object of a message event fired on a service worker (when a channel message is received on the ServiceWorkerGlobalScope from another context) — extends the lifetime of such events.
FetchEvent
The parameter passed into the ServiceWorkerGlobalScope.onfetch handler, FetchEvent represents a fetch action that is dispatched on the ServiceWorkerGlobalScope of a ServiceWorker. It contains information about the request and resulting response, and provides the FetchEvent.respondWith() method, which allows us to provide an arbitrary response back to the controlled page.
InstallEvent
The parameter passed into the oninstall handler, the InstallEvent interface represents an install action that is dispatched on the ServiceWorkerGlobalScope of a ServiceWorker. As a child of ExtendableEvent, it ensures that functional events such as FetchEvent are not dispatched during installation.
NavigationPreloadManager
Provides methods for managing the preloading of resources with a service worker.
Navigator.serviceWorker
Returns a ServiceWorkerContainer object, which provides access to registration, removal, upgrade, and communication with the ServiceWorker objects for the associated document.
NotificationEvent
The parameter passed into the onnotificationclick handler, the NotificationEvent interface represents a notification click event that is dispatched on the ServiceWorkerGlobalScope of a ServiceWorker.
ServiceWorker
Represents a service worker. Multiple browsing contexts (e.g. pages, workers, etc.) can be associated with the same ServiceWorker object.
ServiceWorkerContainer
Provides an object representing the service worker as an overall unit in the network ecosystem, including facilities to register, unregister, and update service workers, and access the state of service workers and their registrations.
ServiceWorkerGlobalScope
Represents the global execution context of a service worker.
ServiceWorkerMessageEvent
Represents a message sent to a ServiceWorkerGlobalScope. Note that this interface is deprecated in modern browsers. Service worker messages will now use the MessageEvent interface, for consistency with other web messaging features.
ServiceWorkerRegistration
Represents a service worker registration.
ServiceWorkerState
Associated with its ServiceWorker's state.
SyncEvent

The SyncEvent interface represents a sync action that is dispatched on the ServiceWorkerGlobalScope of a ServiceWorker.

SyncManager
Provides an interface for registering and listing sync registrations.
WindowClient
Represents the scope of a service worker client that is a document in a browser context, controlled by an active worker. This is a special type of Client object, with some additional methods and properties available.

仕様策定状況

仕様書 策定状況 コメント
Service Workers 草案 初回定義。

ブラウザーの対応

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本対応 40 未サポート[1] 44.0 (44.0)[2] 未サポート 24 未サポート[3]
install/activate events 40 未サポート[1] 44.0 (44.0)[2] 未サポート (有) 未サポート
fetch event/request/
respondWith()
40 未サポート[1] 44.0 (44.0)[2] 未サポート 未サポート 未サポート
caches/cache 42 未サポート[1] 39.0 (39.0)[2] 未サポート 未サポート 未サポート
MessageEvent を採用して ServiceWorkerMessageEvent を非推奨とした 57 未サポート 55.0 (55.0)[2] 未サポート 未サポート 未サポート
NavigationPreloadManager 59 未サポート   未サポート 46 未サポート
機能 Android Webview Chrome for Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本対応 未サポート 40 未サポート[1] 44.0 (44.0) 未サポート (有) 未サポート[3]
install/activate events 未サポート 40 未サポート[1] 44.0 (44.0) 未サポート (有) 未サポート
fetch event/request/
respondWith()
未サポート 40 未サポート[1] 44.0 (44.0) 未サポート 未サポート 未サポート
caches/cache 未サポート 40 未サポート[1] 39.0 (39.0) 未サポート 未サポート 未サポート
MessageEvent を採用して ServiceWorkerMessageEvent を非推奨とした 未サポート

57

未サポート 55.0 (55.0) 未サポート 未サポート 未サポート
NavigationPreloadManager 未サポート 59 未サポート 未サポート 未サポート 46 未サポート

[1] この機能にはまだ対応していませんが、すでに開発中です

[2] サービスワーカー(及びプッシュ通知)は Firefox 45 & 52 Extended Support Releases (ESR.) では無効になっています。

[3] この機能にはまだ対応していませんが、現在開発中です

関連項目

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, Uemmra3, niku, warapy, hideo54, lv7777, cakecatz, mantaroh
最終更新者: mfuji09,