Service Workerとは何か？仕組みと出来る事をわかりやすく解説。
この記事では、Service Workerについてその仕組みや出来ることを中心に解説したいと思う。
Service Workerは高機能でモダンなWebアプリケーションを制作するための基盤となる技術。
ただし、Service Workerは発展途上の技術であり、アプリに実装するうえでは気を付けなければいけないことも多い。
Service Workerとは？
Service Workerはブラウザがバックグラウンドで実行するスクリプト。
プッシュ通知やバックグラウンド同期といったモダンなWeb技術を使用するための基盤となる技術だ。
Service WorkerはWebアプリケーションをオフラインでも使用できるようにするための試みでもあり、ネットワーク接続を失うと使えなくなるというWebサイトの弱点を補う技術でもある。
Webサイトのオフラインでの使用を可能とする技術にはAppCacheがあったが、現在はService Workerに置き換えられてる。
Service Workerで出来ること
Service Workerの使い道としては以下のようなものが例として挙げられる。
- プッシュ通知
- バックグラウンド同期
- PWA（Progressive Web App）
- オフラインでの使用
- リソースのキャッシュ
- リクエストの制御（ロードバランサ）
この章では、「 プッシュ通知 」と「 PWA（Progressive Web App）」について説明する。
プッシュ通知
プッシュ通知はデバイスに対して送信される通知のことだ。
WIndowsでは届いたプッシュ通知は以下のように表示される。
このような通知を実現するためにService Workerが使われている。
ユーザが通知をクリックした際のアクションも指定することができ、SALEページやログインページなどにユーザを誘導することができる。
プッシュ通知を利用するためにはGoogleが提供しているFirebase Cloud Messagingを利用するのが一般的だ。
プッシュ通知を実装する際にはPush APIといったWeb APIを使用する。
PWA (Progressive Web App)
PWAは「Progressive Web App」の略であり、簡単に言うならWebアプリケーションをデスクトップアプリのように使用するための技術。
PWAによって登録されたアプリは、デスクトップ上のショートカットなどを通じてデスクトップアプリのように使用することができる。
これによって企業はAndroid/iOSのネイティブアプリを別に開発する必要が無くなるため、プロジェクトに掛かるコストを大幅に削減することができる。
ServiceWorkerの仕組み
ServiceWorkerの仕組みを見ていこう。
以下の図はService Workerの働きを示したものだ。
Service Workerはウェブサイトとインターネットの間に位置し、ウェブサイトから送信されるリクエストを双方向に制御することが出来る。
いわばプロキシサーバーのような役割だと考えると分かりやすいだろう。
CacheStorageを利用してウェブサイトで利用される写真やファイルなどのリソースをキャッシュすることもできる。
Service Workerとウェブアプリケーションのメインスレッドはポストメッセージを通して通信する。
Service Workerの登録
次にService Workerがどのように登録され有効化されるのかを見てみよう。
Service Workerはそれを使用しているウェブサイトを訪問すると自動で登録される。 既にそのサイトのService Workerが登録されている場合は再度、登録されることはない。
Google Chromeを使用している場合、URLに「chrome://serviceworker-internals」と入力すればブラウザに登録されているService Workerを一覧で確認できる。
Service Workerのライフサイクル
ServiceWorkerのライフサイクルについて説明しよう。
以下はServiceWorkerのライフサイクルを示した図だ。
Service Workerが登録されると次にインストールが開始され、その後アクティベートされバックグランド処理が始まる。
そのサイトのService Workerの内容がアップデートされた場合、Service Workerはコードを読み取り違いがあれば新しいバージョンとして認識する。
新しいバージョンはタブを新しく開き直したときから有効となる。
複数のバージョン間でデータを共有する場合はIndexedDBを使用する。