PWAの基礎知識（その2）「Service Workerの開発法」

PWA（Progressive Web App）という単語がトレンドになっています。PWAは特定の技術を指す言葉ではなく、様々な技術が組み合わさったスマートフォンにおけるWebアプリのベストプラクティスと言えます。

今回はそんなPWAの基礎になる、Service Workerの開発方法について紹介します。

Google Chromeの場合

Google ChromeはWebブラウザ側、Service Worker側の両方のスクリプトについて一つの開発者ツール内で扱えます。

また、オフライン時の確認をする際には開発者ツールのアプリケーションタブ、Service Workersの中にOfflineというチェックを有効にすることで動作検証できます。

Firefoxの場合

Firefoxはツールメニューのウェブ開発、Service Workerという項目を選択します。

現在、デバッガーがマルチプロセスコンテンツに対応していないのでオプトアウトしないとデバッグできません。

オプトアウト後、Service Workerが組み込まれているページを表示するとデバッグボタンが押せるようになります。これを押すと別ウィンドウでデバッガーが立ち上がります。

もちろんブレークポイントを入れることもできます。

オフライン時の検証はファイルメニューのオフライン作業を選んで有効にできます。

Safariの場合

Safariは開発メニューのService Workerを選んでデバッグします。

Firefoxと同レベルのデバッグができます。ただしオフライン作業にはできませんでした。

Edgeの場合

Edgeは開発者ツールのデバッガーの中にService Workersという項目があり、スクリプトを選んで検査というリンクをクリックすると専用のデバッガーが立ち上がります。

EdgeはService Workerが読み込まれていることを通知してくれます。これは他のブラウザにはない機能です。

なお、オフラインにする機能はないようです。

Google Chromeだけが通常のJavaScriptとService Workerを同じ開発者ツールの中でデバッグできます。他のブラウザは別ウィンドウでデバッグとなります。また、Google ChromeとFirefoxはオフライン時の挙動を素早く確認できます。

通常のJavaScriptと異なるので、デバッグ方法も異なります。各ブラウザでのやり方を覚えておくと開発がスムーズになるでしょう。