最小構成のServiceWorker

今、話題のServiceWorkerを動かしてみましょう。
ServiceWorkerはプログラム可能なブラウザキャッシュです。
ブラウザからサーバーへのリクエストをフックして、レスポンスを改ざんできます。

Google Chrome 41.0.2272.118 で動きました。

ファイル

ServiceWorkerを登録するhtml

service-worker.jsをServiceWorkerとして登録します。

index.html

<script>
    navigator.serviceWorker.register('service-worker.js')
        .catch(function(whut) {
            console.error(whut);
        });
</script>

登録するServiceWorker

全てのリクエストをフックして、文字列helloを返します。

service-worker.js

self.onfetch = function(event) {
  event.respondWith(new Response('hello'));
};

動かす

サーバーを起動

pythonを使います。

python -m SimpleHTTPServer

下記URLを開く

一回目は何も表示しません。
リロードすると、helloと表示します。

登録したServiceWorkerを消す

chrome://serviceworker-internals/ を開きます。
Scope: http://localhost:8000/ で登録されたServiceWorkerがあります。
Unregisterボタンを押して登録を解除します。

ソースコードの説明

index.html

ServiceWorkerを登録します。

navigator.serviceWorker.register('service-worker.js')
    .catch(function(whut) {
        console.error(whut);
    });

navigator.serviceWorker

ServiceWorkerはNavigatorオブジェクトのserviceWorkerプロパティで参照できます。

register

registerメソッドを使ってServiceWorkerを登録します。
第二引数で、ServiceWorkerが動くscopeを指定できます。
大抵は相対パスで指定します。指定しなかったら/です。
今回は指定していないので/です。

registerの戻り値はPromiseです。
今回はエラーを拾うためにcatch()メソッドにコールバックを指定します。
ファイル名を間違えると、エラーを表示します。

service-worker.js

self.onfetch = function(event) {
  event.respondWith(new Response('hello'));
};

self

self変数でServiceWorkerGlobalScopeを参照できます。

onfetch

onfetchにコールバック関数を指定します。
fetch関数が呼ばれたときに実行されます。
サーバーにリクエストが飛ぶ前だと解釈しています。

FetchEvent

コールバックにはFetchEventが渡されます。
これを操作してレスポンスを改ざんします。

Response

Resposeメソッドを使って、レスポンスを作ります。
文字列helloを設定します。

respondWith

respondWithメソッドでレスポンスを返します。
ASP.NETみたいですね。struts起源かな？

動き

二回目以降は登録されたServeciWorkerがリクエストをフックします。
http://localhost:8000へのリクエストも対象になります。
helloが表示されます。