こんにちは、すぐるです！
sugulogをお読みいただきありがとうございます！！
このブログは、「 過去の無知な自分に向けてわかりやすく説明するなら？？ 」を基準に書いています。
少しでもお役に立てれば幸いです。
今回は、ServiceWorkerを使用しバックグラウンド処理の設定をしてみようということで
-
JavaScriptのServiceWorker
について簡単に解説します！！
その為このブログを読むことで、ServiceWorkerについて理解できるのはもちろん、ServiceWorkerを使用しバックグラウンド処理の設定をできるようにもなります。
是非最後までご愛読ください。
今回は、
・ServiceWorker
・ServiceWorkerを設定してみよう
の順で解説していきます。
では早速、みていきましょう！！
・ServiceWorker
ServiceWorkerとはJavaScriptにおけるメインスレッドの処理とは別に分離して処理を実行するための機能のことです。
ServiceWorkerは永続的に処理が動作するといった特徴を持っており、オフライン状態でもリソースを取得できるようにするcacheやpush通知を行う際に重宝されます。
また基本的にはHTTPS通信でのみ動作しますので押さえておきましょう
・ServiceWorkerを設定してみよう
今回HTMLでmain.jsを呼び出しmain.jsにServiceWorkerを定義していきます。
またmain.jsではworker.jsを呼び出しworker.jsではServiceWorkerの処理を定義していきます。
ではまずmain.jsでServiceWorkerを定義していきます。
in演算子を使用しif("serviceWorker" in navigator)でユーザーが使用しているユーザーエージェント情報の中にServiceWorkerが存在するのかの判定を行なっています。
存在する場合はnavigator.serviceWorker.register()でServiceWorkerを扱うファイルを登録します。
今回はworker.jsをServiceWorkerを扱うファイルとして登録しています。
またこのメソッドではPromiseオブジェクトで登録の成功を監視します。
そのため.thenで成功、.catchで失敗を取得します。
次にServiceWorkerを扱うファイルとして登録したworker.jsに、ServiceWorkerを使用して行う処理を定義していきます。
ServiceWorkerは主ににインストール、有効化、処理(リクエスト検知)の流れを踏みます。
それぞれself.addEventListenerでwindowのイベントとして監視し処理を定義します。
特に処理を行わない際は記述する必要はありません。
では最後にChromのデベロッパーツールのApplicationで正常にServiceWorkerが登録されているか確認してみます。
左のリストの中からServiceWorkersをクリックし確認するとworker.jsがServiceWorkerとして登録されているのが確認できます。
これでServiceWorkerを使用しバックグラウンド処理を行うための設定は完了です。
以上、今回のブログでした。
ServiceWorkerについて理解でき、ServiceWorkerを使用しバックグラウンド処理の設定をできるようにもなりましたか？？
ServiceWorkerはpush通知によく使用される機能です。
今回のブログを機に定義方法を落とし込みましょう。
今回のToDo
ServiceWorkerを使用しバックグラウンド処理を行うための設定を記述してみましょう(≧∀≦)/
最後に！！
今後も、「 過去の無知な自分に向けてわかりやすく説明するなら？？ 」を基準にブログを書いていきます。
少しでも気になった方はお試しでもいいので1度読者登録お願いします！
最後までご愛読いただきありがとうございました！！