目次
この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。
Service Workerは、ブラウザ上でWebページを表示していない時にでも実行できるスクリプトです。 GoogleのPWA(Progressive Web Apps)の実装に不可欠な技術ですが、ブラウザでスマホアプリのようなPush通知を実装したWeb Push機能に必須の機能です。 今回は簡単にServiceWorkerを試してみます。
ServiceWorkerが使えるか確認してみる
対応しているブラウザ: Chrome、Firefox、Opera
対応しているOS: Windows、macOS、Android
現段階では、WindowsのIEやEdge、iOSの全てのブラウザで使うことができません。
日本のシェアを考えるとiOS非対応なのはとてもネック・・・
ちなみに、対応しているブラウザかを調べるには、
navigator.serviceWorker
が定義されているかを確認します。
さて、ブラウザの開発ツールのコンソールから次のコマンドを実行してみます。
対応しているブラウザ(Chrome)だと
ServiceWorkerContainerというオブジェクトを返します。
このオブジェクトはサービスワーカの登録・解除・状態の取得などの機能を提供しています。
対応していないブラウザ(Safari)だと
undefinedが返ってしまいました。ダメだこりゃ。
ServiceWorkerを使うまでの準備
必要なもの
- ServiceWorkerのJavaScriptスクリプト
- インストールするためのJavaScriptコードを含んだHTMLページ
- SSLまたはlocalhostでアクセス可能なWebサーバ
ServiceWorkerの実体
単なるJavaScriptスクリプトですが、
決められたイベントのうち扱いたいものを追加するだけ、というシンプルなものです。
対応している主なイベントは
- install
- activate
- fetch
- message
- push
今回は、GlobalFetch.fetch メソッドが呼ばれたときに、コンソールにメッセージを出すというプログラムです。
self.addEventListener("fetch", function(event) {
console.log("fetchメソッドが呼ばれたよ!");
});
今回はこのファイルを serviceworker.js という名前で保存します。
ServiceWorkerをインストールする
次に、ServiceWorkerをコントロールしたいサイトでインストールします。
ServiceWorkerContainerのregister()メソッドを使います。
navigator.serviceWorker.register("serviceworker.js").then(function(registration) {
console.log("登録されたよ!");
});
これを含んだHTMLファイル(index.html)を置いて、localhostにサーバをたてて試してみましょう。
簡単なwebサーバならば nodejsで動作する node-web-server が便利です。
インストールは
npm install -g node-web-server
で、起動はHTMLのおいてあるディレクトリで
nws
そして起動します。
無事インストールが完了しました。
ServiceWorkerがインストールされているかは、開発者ツールでも確認できます。
Firefoxの場合は、 ツール＞ウェブ開発＞Service Worker または about:debugging#workers
Chromeの場合は、 chrome://serviceworker-internals/
ServiceWorkerにイベントを処理してもらう
fetch リクエストのハンドラをかいたので、実際にfetchを呼び出してみます。
navigator.serviceWorker.register("serviceworker.js").then(function(registration) {
console.log("登録されたよ!");
fetch("sample.txt");
});
sample.txtは適当に作成してください。
ServiceWorkerが処理していますね。
