Edited at

最小構成のServiceWorker

More than 3 years have passed since last update.

今、話題の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を開く

http://localhost:8000

一回目は何も表示しません。

リロードすると、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が表示されます。