ServiceWorkerを使う

この記事はアピリッツの技術ブログ「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

そして起動します。

http://localhost:8080/

無事インストールが完了しました。

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が処理していますね。