ServiceWorker API

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

草案
このページは完成していません。

Service workerは基本的にWebアプリケーションやブラウザとネットワークの間のプロキシサーバーとして機能します。それらは、ネットワークリクエストを受 信し、ネットワークの使用可否やサーバー上にあるassetの更新有無に基づく適切なアクションを取得する効果的なオフライン体験を作成可能にすることが できます。

それらは、通知をプッシュしたり、バックグラウンドの同期API群にアクセスすることを許可します。このページはMDNのServiceWorkerに関するランディングページですので、このページに書かれている以上の情報を見つけることができるでしょう。

Note: ServiceWorkerの仕様、そしてブラウザーのサポート状況はEarlyステージです。ほとんどの機能は正しく動作しません。そして、このドキュメントセットは現在機能プレビューとして書かれています。この文書のアップデートには注意を払ってください。

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

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

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

Serivce workerはセキュリティ上の理由からHTTPS通信でのみ動作します。中間者攻撃手法の主たる改善されたネットワークリクエストを大きく開放することは、本当によくありません。

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

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

登録

Service workerでは、まずはじめにserviceWorker.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メソッドを利用して、あなたが望む様々な方法で要求に対する応答を変更できます。

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

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

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

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

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

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

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

インターフェイス

Service workerのインターフェイスは既にブラウザで実装されて入手可能なものと、そうでないものの2つのリストで表現されています。

完全または一部が入手可能なインターフェイス

入手する事ができないインターフェイス

仕様

仕様 状態 コメント
Service Workers 草案  

ブラウザサポート状況

機能 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を有効にしてブラウザを再起動してください。

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

関連項目


 

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

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