前回の記事を書いてからずいぶんと時間があいてしまいました。
今回は前回の予告通り、「ServiceWorker」についてご紹介したいと思います。
ServiceWorkerとは何かを簡単に説明しますと、「バックグラウンドでJavaScriptを動作させ、
様々な処理をWebページの状態に関係なく実行することができる機能」です。
Webページ上のJavaScriptとは別のスレッドで動作する形となり、Workerの一種となります。
それでは簡単に使い方をご説明します。
■インストール方法
ServiceWorkerを使うにあたってはまず、Webページ上で動作するJavaScriptから
ServiceWorkerとなるJavaScriptファイルをブラウザにインストールする必要があります。
インストール後にServiceWorkerは待機状態となり、画面を更新することで動作が開始します。
ServiceWorkerのJavaScriptに記述することで、独自のインストール処理を指定することもできます。
◆UIスレッド
// ServiceWorkerをインストールする。
navigator.serviceWorker.register("serviceWorker.js");
◆ServiceWorkerスレッド(serviceWorker.js)
// UIスレッドでnavigator.serviceWorker.register関数が呼ばれると、
// ServiceWorker側ではinstallイベントが発火する。
// event.waitUntil関数を利用すると、
// インストール処理に独自の処理を追加することができる。
self.oninstall = function(event) {
event.waitUntil(
// Promiseを用いた非同期処理を指定する。
new Promise(function(resolve, reject) {
// ～処理～
// 処理が完了したらresolve関数を呼ぶ。
resolve();
});
);
}
■ServiceWorkerの開始方法
先ほどまででServiceWorkerをインストールすることはできました。
しかしそのままでは画面を更新するまでは動作が開始しません。
インストールしてすぐに動作させたい場合はclaim関数を呼ぶ必要があります。
◆ServiceWorkerスレッド
// ServiceWorkerがactivateされた後でないとclaim関数を呼ぶことができない。
// なのでactivateイベント中に実行する。
self.onactivate = function(event) {
event.waitUntil(self.clients.claim());
};
■ServiceWorkerとUIスレッドの通信方法
ServiceWorkerはUIとは別のスレッドで動くため、
直接データをやり取りしたり、ServiceWorkerから画面を操作したりすることができません。
そのため、MessageChannelを用いて通信する必要があります。
◆UIスレッド
// ServiceWorkerからの連絡を受け取れるようにする。
var messageChannel = new MessageChannel();
messageChannel.port1.onmessage = function(event) {
// event.dataにデータが格納される。
};
// ServiceWorkerへデータを送る。
navigator.serviceWorker.controller.postMessage("message", [messageChannel.port2]);
◆ServiceWorkerスレッド
// UIスレッドからの連絡を受け取れるようにする。
self.onmessage = function(event) {
// event.dataにデータが格納される。
// 応答を返す。
e.source.postMessage("Response is here.");
};
ただし、この方法ではUIスレッドからServiceWorkerへ通信することはできても、
ServiceWorkerからUIスレッドへ通信することができません。
ServiceWorkerから通信するには、ServiceWorkerが保持するClientsを利用する必要があります。
長くなるため、今回は割愛させていただきます。
■ServiceWorkerを使ってできること
ServiceWorker内ではDOMへアクセスすることができません。
また、完全に非同期な設計をされているため、XHRやlocalStorageなどの同期型APIも利用できません。
その代わりに、新たに用意された各種APIを利用することで様々なことが実現できます。
◆Fetch API
XHRの代わりにHTTP通信を可能とするAPIです。
キャッシュの制御やCORSなどをXHRよりも細かく制御することができます。
また、UIスレッドにてXHR通信を行った際に、ServiceWorker側でその通信をフックして、
サーバーの代わりに応答したり、別のリクエストに書き替えたりすることができます。
◆Cache API
詳細なキャッシュ制御を可能とするAPIです。
Fetch APIと組み合わせて、
「キャッシュがあればそこから応答し、なければサーバーに問い合わせる」
というような、これまでブラウザが自動でやっていたキャッシュに関する部分を
自分たちで制御することができます。
◆Push API
スマートフォンなどに通知を出すことができるAPIです。
これまでのWebでは、ブラウザを閉じたり、タブを閉じたりすると、
Webページから何かアクションを起こすことができませんでした。
Push APIを利用することで、ユーザがWebページから離れたあとも
「通知」という形でアクションを起こすことができるようになります。
◆Background Sync
「通信ができるようになったら自動で通信」というような処理を可能とするAPIです。
ServiceWorker、Fetch API、Cache APIを組み合わせることで、
端末がオフライン状態でもWebページを表示することが可能になります。
しかし、コメントを投稿したりすることはできません。
そういった場合に、「通信ができるようになったらあとで投稿」することができます。
他にも例えばこんな使い方ができるようです。
https://www.youtube.com/watch?v=2ugAVXRkr9U
いくつかAPIを紹介しましたが、他にも仕様検討中のAPIがいくつかあります。
上で紹介したAPIについても、仕様検討中の機能があったりします。
これまでの「Webページ」では考えられなかった機能がたくさん実現されそうですね。
今後の動向に期待です。
最後に、現在の仕様をもとに作られたServiceWorkerのデモサイトをご紹介します。
・ServiceWorkerとPush APIを用いたチャットサイト
http://www.locchat.com/
簡単な利用手順
1.Android端末のChromeブラウザから上記のサイトを開いてください。
「通知を送信しようとしています。」というポップアップが出るので、許可してください。
そうしたら、タブを閉じて、Chromeブラウザを終了してください。
2.今度はPCのChromeブラウザから上記のサイトを開いてください。
画面上部の入力欄からメッセージを入力して、Enterを押してください。
3.Android端末に通知が届きます。
monipet
動物病院の犬猫の見守りをサポート
病院を離れる夜間でも安心
ASSE/CORPA
センサー、IoT、ビッグデータを活用して新たな価値を創造
「できたらいいな」を「できる」に
OSGi対応 ECHONET Lite ミドルウェア
短納期HEMS開発をサポート！
GuruPlug
カードサイズ スマートサーバ
株式会社ジェイエスピー
横浜に拠点を置くソフトウェア開発・システム開発・
製品開発(monipet)、それに農業も手がけるIT企業
今回は前回の予告通り、「ServiceWorker」についてご紹介したいと思います。
ServiceWorkerとは何かを簡単に説明しますと、「バックグラウンドでJavaScriptを動作させ、
様々な処理をWebページの状態に関係なく実行することができる機能」です。
Webページ上のJavaScriptとは別のスレッドで動作する形となり、Workerの一種となります。
それでは簡単に使い方をご説明します。
■インストール方法
ServiceWorkerを使うにあたってはまず、Webページ上で動作するJavaScriptから
ServiceWorkerとなるJavaScriptファイルをブラウザにインストールする必要があります。
インストール後にServiceWorkerは待機状態となり、画面を更新することで動作が開始します。
ServiceWorkerのJavaScriptに記述することで、独自のインストール処理を指定することもできます。
◆UIスレッド
// ServiceWorkerをインストールする。
navigator.serviceWorker.register("serviceWorker.js");
◆ServiceWorkerスレッド(serviceWorker.js)
// UIスレッドでnavigator.serviceWorker.register関数が呼ばれると、
// ServiceWorker側ではinstallイベントが発火する。
// event.waitUntil関数を利用すると、
// インストール処理に独自の処理を追加することができる。
self.oninstall = function(event) {
event.waitUntil(
// Promiseを用いた非同期処理を指定する。
new Promise(function(resolve, reject) {
// ～処理～
// 処理が完了したらresolve関数を呼ぶ。
resolve();
});
);
}
■ServiceWorkerの開始方法
先ほどまででServiceWorkerをインストールすることはできました。
しかしそのままでは画面を更新するまでは動作が開始しません。
インストールしてすぐに動作させたい場合はclaim関数を呼ぶ必要があります。
◆ServiceWorkerスレッド
// ServiceWorkerがactivateされた後でないとclaim関数を呼ぶことができない。
// なのでactivateイベント中に実行する。
self.onactivate = function(event) {
event.waitUntil(self.clients.claim());
};
■ServiceWorkerとUIスレッドの通信方法
ServiceWorkerはUIとは別のスレッドで動くため、
直接データをやり取りしたり、ServiceWorkerから画面を操作したりすることができません。
そのため、MessageChannelを用いて通信する必要があります。
◆UIスレッド
// ServiceWorkerからの連絡を受け取れるようにする。
var messageChannel = new MessageChannel();
messageChannel.port1.onmessage = function(event) {
// event.dataにデータが格納される。
};
// ServiceWorkerへデータを送る。
navigator.serviceWorker.controller.postMessage("message", [messageChannel.port2]);
◆ServiceWorkerスレッド
// UIスレッドからの連絡を受け取れるようにする。
self.onmessage = function(event) {
// event.dataにデータが格納される。
// 応答を返す。
e.source.postMessage("Response is here.");
};
ただし、この方法ではUIスレッドからServiceWorkerへ通信することはできても、
ServiceWorkerからUIスレッドへ通信することができません。
ServiceWorkerから通信するには、ServiceWorkerが保持するClientsを利用する必要があります。
長くなるため、今回は割愛させていただきます。
■ServiceWorkerを使ってできること
ServiceWorker内ではDOMへアクセスすることができません。
また、完全に非同期な設計をされているため、XHRやlocalStorageなどの同期型APIも利用できません。
その代わりに、新たに用意された各種APIを利用することで様々なことが実現できます。
◆Fetch API
XHRの代わりにHTTP通信を可能とするAPIです。
キャッシュの制御やCORSなどをXHRよりも細かく制御することができます。
また、UIスレッドにてXHR通信を行った際に、ServiceWorker側でその通信をフックして、
サーバーの代わりに応答したり、別のリクエストに書き替えたりすることができます。
◆Cache API
詳細なキャッシュ制御を可能とするAPIです。
Fetch APIと組み合わせて、
「キャッシュがあればそこから応答し、なければサーバーに問い合わせる」
というような、これまでブラウザが自動でやっていたキャッシュに関する部分を
自分たちで制御することができます。
◆Push API
スマートフォンなどに通知を出すことができるAPIです。
これまでのWebでは、ブラウザを閉じたり、タブを閉じたりすると、
Webページから何かアクションを起こすことができませんでした。
Push APIを利用することで、ユーザがWebページから離れたあとも
「通知」という形でアクションを起こすことができるようになります。
◆Background Sync
「通信ができるようになったら自動で通信」というような処理を可能とするAPIです。
ServiceWorker、Fetch API、Cache APIを組み合わせることで、
端末がオフライン状態でもWebページを表示することが可能になります。
しかし、コメントを投稿したりすることはできません。
そういった場合に、「通信ができるようになったらあとで投稿」することができます。
他にも例えばこんな使い方ができるようです。
https://www.youtube.com/watch?v=2ugAVXRkr9U
いくつかAPIを紹介しましたが、他にも仕様検討中のAPIがいくつかあります。
上で紹介したAPIについても、仕様検討中の機能があったりします。
これまでの「Webページ」では考えられなかった機能がたくさん実現されそうですね。
今後の動向に期待です。
最後に、現在の仕様をもとに作られたServiceWorkerのデモサイトをご紹介します。
・ServiceWorkerとPush APIを用いたチャットサイト
http://www.locchat.com/
簡単な利用手順
1.Android端末のChromeブラウザから上記のサイトを開いてください。
「通知を送信しようとしています。」というポップアップが出るので、許可してください。
そうしたら、タブを閉じて、Chromeブラウザを終了してください。
2.今度はPCのChromeブラウザから上記のサイトを開いてください。
画面上部の入力欄からメッセージを入力して、Enterを押してください。
3.Android端末に通知が届きます。
monipet
動物病院の犬猫の見守りをサポート
病院を離れる夜間でも安心
ASSE/CORPA
センサー、IoT、ビッグデータを活用して新たな価値を創造
「できたらいいな」を「できる」に
OSGi対応 ECHONET Lite ミドルウェア
短納期HEMS開発をサポート！
GuruPlug
カードサイズ スマートサーバ
株式会社ジェイエスピー
横浜に拠点を置くソフトウェア開発・システム開発・
製品開発(monipet)、それに農業も手がけるIT企業