More than 5 years have passed since last update.

Service Worker の初歩の初歩

Posted at 2016-12-16

はじめに

ネイティブアプリの開発をしていて、Web アプリとの差がプッシュ機能くらいなのでは…と思いました。

じゃあ、「Webアプリでプッシュ機能を実装できればいいのにな」と思い、
いろいろ調べたら ServiceWorker に出会いました。

折角なので調査した内容を共有しようと、Qiita に投稿してみました。
主な内容は下記のとおりです。

※本記事は ServiceWorker を実際に使うにあたって、サービスの大まかなイメージを掴んでもらうための導入的な記事です。これから実装していく中での発見等を共有できたら幸いです。

端的に言うと ユーザーの端末上でバックグラウンドで動くイベント駆動のJavaScript環境です。
ユーザーがブラウザで Webページを開いていないときでも、何かしらの処理を実行させることが出来ます。

※ServiceWorker の概要に関しては下記の記事を参考にさせていただきました。

Service Workerの基本とそれを使ってできること

バックグランドで動くイベントの種類によって色んなことができそうです。

ウェブのプッシュ通知
GCMからプッシュ通知を受け取り、ブラウザに表示させる
バックグラウンド同期
ブラウザを閉じていてもバックグラウンドでデータ受信したり、
オフライン状態で受けた動作も通信可能になるとバックグラウンドで動作可能
データのキャッシュ
指定したページや画像等をCache APIを使って保存、Fetchイベントハンドラで取り出す
リクエストの横取り
ブラウザから投げられるリクエストを横取りして、サーバに投げる前に加工したり、
サーバにリクエストを投げずに、固定のページをレスポンとして返したりすることが可能

ServiceWorker を使いたいサイトの好きな場所に下記のスクリプトを埋め込む。

navigator.serviceWorker.register('/ServiceWorker.js',{scope: '/mysite'}); 
//scope プロパティで ServiceWorker.js が有効になるスコープの指定もできる。

ユーザーの環境上で ServiceWorker.js がブラウザをコントロールするようになります。
そして、ページにアクセスするたびに fetch イベントを発火するようになります。
あとは fetch イベントをキャッチするイベントリスナー内で好きな処理を書けばいいです。

self.addEventListener('fetch', (event) => {
    //fetch イベントに対してやりたい処理を書く
}

次回は実際に ServiceWorker を使ってプッシュ通知などを実装してみる予定です！