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

Service workerは(使用可能であれば)基本的にWebアプリケーションとブラウザやネットワークの間のプロキシサーバーとして機能します。Service workerを使えば、ネットワークリクエストを受信し、ネットワークの使用可否状況やサーバー上にある最新のアセットに基づいて適切に振る舞うことにより、(他の機能と合わせて)効果的なオフライン体験を生み出すことができるようになります。また、プッシュ通知やバックグラウンド同期のAPI群を利用することもできるようになります。

Service worker のコンセプトと使い方

Service workerは、ナビゲーションとリソースのリクエストの変更やインターセプトに関連しているウェブページ/サイトや、特定の状況であなたのアプリがどのように振る舞うか完全にコントロールできる粒度のリソースキャッシュをコントロールできるJavaScriptファイルの形式をとっています。(ネットワークが利用できない状況で最も効果が発揮されます)

Service workerはworkerコンテキストで動作します、
それにより、DOMアクセスすることができません。またJavaScriptの強力なメインスレッドとは違うスレッドで動作するためブロッキングすることはありません。
それらは、完全非同期で設計されています。その結果、XHRlocalStorageのような同期型APIはService worker上で動作することができません。

Serivce workerはセキュリティ上の理由からHTTPS通信でのみ動作します。中間者攻撃が可能な通信は、ネットワークリクエストを改ざんされてしまうため、本当によくありません。FirefoxではプライベートブラウジングモードではService worker APIを利用できません。

: Service Worker はAppCacheのような、この分野における以前の試みより優っています。それらは前提条件が正しくない場合に何かしたり、打開しようとした時について仮定していなかったためです。Service workerはきめ細かく全てを制御することができます。

: Service workerは一般的に成功可否の応答を待つためにpromisesを頻繁に利用します。promisesのアーキテクチャはこの領域に対して理想的なものです。

登録

Service workerでは、まずはじめに ServiceWorkerContainer.registerメソッドを使って登録をする必要があります。もし登録成功したら、Service workerはダウンロードされ、ユーザーがアクセスしたURLのOrigin内部または、指定したサブセットの内部からインストール/起動(以下のダウンロード、インストールと起動を参照)を試みます。

ダウンロード、インストールと起動

この段階で、Service workerは以下のライフサイクルを監視できます。

  1. ダウンロード
  2. インストール
  3. 起動

Service worker はwokerコントロールされたサイト/ページに初回アクセスするとすぐにダウンロードされます。

ダウンロード後は24時間ごとにダウンロードされます。それはもっと頻繁にダウンロードされるかもしれません。しかし、長い間悪いコードが迷惑をかけることをさけるためにも24時間ごとにダウンロードされるべきです。

インストールは既に存在しているService workerと違うものが見つかるか(バイト単位での比較)、新しいService workerが見つかると即時インストールされます。もしくはService workerが初めてそのページ/サイトにアクセスした場合。

もし初めてService workerを入手した場合は、インストールを試みて、成功した場合はアクティベートされます。

もし既に存在しているService workerを入手した場合は、新しいバージョンはバックグラウンドでインストールされます。しかしこの時点ではアクティベートされていません。この時点はworker待ちといいます。古いService workerが利用しているページが長い間ロードされなかったときに始めてアクティベートされます。そのようなページが既にロードされていなければ即時、新しいService workerはアクティベートされます(Active workerになります)。

インストールイベントを監視する事もできます。このイベントが発火したときに一般的なアクションとしてService workerの準備をします。例えば、ストレージAPIのキャッシュを構築したり、オフライン時に動作させるためのアセット情報を配置したりします。

アクティベートイベントもまた監視する事ができます。一般的にこのイベントは前のService workerのバージョンの関連ファイルやキャッシュを削除しても良いタイミングのときに発火されます。

Service workerはfetchイベントを使って要求に対する応答をする事ができます。event.respondWithメソッドを利用して、あなたが望む様々な方法で要求に対する応答を変更できます。

: oninstall/onactivateが完了するまでに時間がかかる可能性があるため、Service workerの仕様として、oninstallまたはonactivateが完了した時点でpromiseを呼ぶためのwaitUtilメソッドを提供しています。promiseが成功となるまではService workerの関数イベントにディスパッチすべきではありません。

最初のベーシックなサンプルを構築するための完璧なチュートリアルは、Using Service Workerを読んでください。

他のユースケースアイデア

Service workerは以下のような事に利用される事を想定しています。

  • バックグラウンド同期
  • 他のoriginからのリソース要求に対する応答
  • 地図計算・ジャイロ計算のように計算する事が高コストなアップデートを集中的に受信すること。またそのように複数ページを1組のデータとして扱える事
  • クライアントサイドコンパイルやCoffeScriptの依存管理、less、CJS/AMDモジュールなど、開発向け用途に
  • バックグラウンドサービス(XHRなど)のフック
  • URLパターンに基づくテンプレートカスタマイズ
  • 近い将来ユーザーが必要とするようなリソース(例:フォトアルバムアプリの新しい写真)のpre-fetching

近い将来Service workerはネイティブアプリで実現できるような事をWebプラットフォーム上でもいくつか実現する事ができるようになるでしょう。興味深い事に、以下のような他の仕様でもService workerコンテキストが利用できる、もしくは利用可能となるでしょう。

  • Background synchronisation: サイトにユーザーが存在しないときでもService workerを起動する事ができ、キャッシュをアップロードしたりできます。
  • Reacting to push messages: 新しいコンテンツが入手可能になった事をユーザーに対してメッセージとしてService workerから通知する事ができます。
  • 特定の日付・時刻に対する反応
  • 特定のジオフェンスへ入った事を検知する

インターフェイス

 

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

SyncEvent インターフェイス 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 Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
navigator.serviceWorker/
serviceWorker.register

(有)

33.0 (33.0) 未サポート 24 未サポート
install/activate events (有) 33.0 (33.0) 未サポート (有) 未サポート
fetch event/request/
respondWith()
(有) 33.0 (33.0) 未サポート 未サポート 未サポート
caches/cache 未サポート 未サポート 未サポート 未サポート 未サポート
機能 Android Chrome Mobile Firefox Mobile (Gecko) Firefox OS IE Phone Opera Mobile Safari Mobile
navigator.serviceWorker/
serviceWorker.register
未サポート (有) (有) (有) 未サポート (有) 未サポート
 install/activate events 未サポート (有) (有) (有) 未サポート (有) 未サポート
fetch event/request/
respondWith()
未サポート (有) 未サポート 未サポート 未サポート 未サポート 未サポート
caches/cache 未サポート 未サポート 未サポート 未サポート 未サポート 未サポート 未サポート

 

Service workerは現在、設定からは隠れているため、以下のように有効にしてください。

  • Firefox Nightly: about:configを表示し、dom.serviceWorkers.enableをtrueにして、ブラウザを再起動します。Firefoxではhttpsのみの設定を、dom.serviceWorkers.testing.enableをtrueにすることで無効化する事ができます。
    今後はfetch() API( XHRにかわるもの)や他の機能を有効化するための多くの設定が設けられるでしょう。しかし今は含まれている機能のみしかアクセスできません。
  • Chrome Canary: chrome://flagsを表示し、experimental-web-platform-featuresを有効にし、ブラウザを再起動してください。バックグラウンドでのService workerの同期をChromeで利用したい場合はenable-service-worker-syncも同様に有効にしてください。
  • Opera: opera://flagsを表示し、Support for ServiceWorkerを有効にしてブラウザを再起動してください。

: 下位互換のために、同じWebアプリ上で同じ事ができるようにService workerとAppCacheの選択ができます(もしAppCacheがサポートされなくなっても大丈夫なように)。たとえService workerをサポートしないブラウザではAppCacheを利用して、反対の場合はAppCacheを利用せずにService workerを利用する事が可能です。

関連項目


 

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

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