PWAの状態を確認する方法｜MODE・Service Worker・Installableの意味をやさしく解説

PWAの開発中、『これ本当にインストール可能になってる？』って不安になりますよね。デベロッパーツールを開いて毎回確認するの面倒だと思うので、URLを入れるだけで一発判定する『PWA自動チェッカー』を自作しました。 手っ取り早く確認したい方は、目次で飛ばして一番下のツールへどうぞ！

PWAは「作ったつもり」でも、状態を見ないと分かりにくい

PWAを作っていると、manifest.jsonを書いて、Service Workerを登録して、ホーム画面にも追加できるようにしたはずなのに、「本当にPWAとして動いているのか？」が分かりにくいことがあります。

普通のWebページとして開いているのか、ホーム画面からPWAとして開いているのか。Service Workerは動いているのか。インストール可能な状態なのか。

このあたりは、見た目だけでは判断しにくいです。

そこでOJappでは、PWAの状態を実験するためにOJapp PWA LABというページを作りました。

この記事では、PWA LABに表示しているステータスを例に、PWAの状態確認で見るべき項目をやさしく解説します。

MODE：今、PWAとして開いているか

MODEは、そのページが普通のブラウザ表示なのか、PWAとして開かれているのかを見る項目です。

例えば、ブラウザのタブで開いている状態なら「WEB」。ホーム画面に追加したアイコンから開いて、standalone表示になっていれば「PWA」と表示されます。

ここで大事なのは、PWA対応しているサイトでも、ブラウザで普通に開いているだけならWEB扱いになることです。

つまり「PWAにできるページ」と「今PWAとして開いている状態」は別です。

実際にPWA LABでも、ブラウザで見るとWEB、ホーム画面から開くとPWAというように表示が変わります。

ONLINE：通信できているか

ONLINEは、端末がオンライン状態かどうかを見る項目です。

ここがONLINEなら通信可能、OFFLINEなら通信できない状態です。

ただし、ONLINEだからPWAが正しく動いている、OFFLINEだからPWAではない、という意味ではありません。

PWAでは、オフラインでも一部の画面を表示できるようにすることがあります。

その場合、ONLINE表示はあくまで「今ネットにつながっているか」を見るものです。

SERVICE WORKER：裏側の処理が動いているか

Service Workerは、PWAのかなり重要な仕組みです。

ページとネットワークの間に入って、キャッシュを返したり、オフライン時の表示を助けたりします。

PWA LABでは、Service Workerが動いている状態を確認できるようにしています。

ここがACTIVEになっていれば、Service Workerが有効になっている状態です。

ただし、ACTIVEだから必ずオフライン対応が完成している、という意味ではありません。

Service Workerは登録されていても、fetch処理で何もしない設定なら、オフライン表示まではできません。

この違いはけっこう大事です。

Service Workerがあることと、オフラインでちゃんと動くことは別物です。

PUSH：通知の許可状態

PUSHは、Web Push通知の許可状態を見る項目です。

DEFAULTなら、まだ許可も拒否もしていない状態です。

GRANTEDなら通知が許可されている状態、DENIEDなら拒否されている状態です。

PWAというと通知機能をイメージする人もいますが、通知はPWAの必須条件ではありません。

通知を使わないPWAも普通にあります。

なので、PUSHがDEFAULTだからPWAとして失敗している、というわけではありません。

OS：どの環境で見ているか

OSは、現在の端末環境を表示する項目です。

Windows、Mac、iOS、Androidなど、どの環境で見ているかをざっくり確認できます。

PWAは、OSやブラウザによって挙動がかなり変わります。

特にiPhoneのSafariとAndroidのChromeでは、ホーム画面追加の流れやインストール表示の出方が違います。

そのため、PWAを確認するときは「どのOSで見ているか」を分けて考えた方がいいです。

INSTALLABLE：インストール案内が出せる状態か

INSTALLABLEは、そのページがブラウザからインストール可能と判断されたかを見る項目です。

Chrome系ブラウザでは、条件が揃うと beforeinstallprompt というイベントが発生します。

PWA LABでは、このイベントが発生したら INSTALLABLE を YES にするようにしています。

逆に、一定時間たってもイベントが来なければ NO と表示します。

ここで注意したいのは、iPhoneのSafariではAndroid Chromeのようなインストール案内が出るとは限らないことです。

iPhoneでは、共有メニューから「ホーム画面に追加」する流れが基本になります。

そのため、INSTALLABLE が NO でも、iPhoneでホーム画面追加できないとは限りません。

この項目は、主にChrome系ブラウザでのインストール判定を見るものだと考えると分かりやすいです。

実際にPWA LABを作ってハマったこと

今回、PWA LABを作る中でもかなり初歩的なミスでハマりました。

manifest.jsonのパスを、本来は /lab/manifest.json と書くべきところを、/leb/manifest.json と書いていました。

たった1文字のミスですが、これだけでPWA判定は崩れます。

画面は普通に表示されていても、manifestが読めていなければ、PWAとしてはかなり重要な情報が欠けてしまいます。

PWAはこういう小さなズレで急に動かなくなるので、ステータス表示で確認できるようにしておくとかなり助かります。

PWAの状態確認で見る順番

PWAがうまく動いているか確認するときは、次の順番で見ると分かりやすいです。

• manifest.json が正しく読めているか
• Service Worker が登録されているか
• ホーム画面から開いたときに MODE が PWA になるか
• オフライン時に必要な画面が表示できるか
• Chrome系で INSTALLABLE が YES になるか
• iPhoneでは共有メニューからホーム画面追加できるか

特に初心者のうちは、「PWA対応」と「インストール表示」と「オフライン対応」をまとめて考えがちです。PWAチェッカーでURLから状態を確認できます。

でも実際には、それぞれ別の条件で動いています。

ここを分けて見るだけで、原因をかなり探しやすくなります。

関連記事

PWAの基本から確認したい場合は、PWAとは？スマホのWebサイトを“アプリ化”する仕組みをわかりやすく解説が参考になります。

実際の作り方を見たい場合は、PWAの作り方｜manifest.json・Service Worker・ホーム画面対応を丁寧に解説もあわせて読むと流れが分かりやすいです。

キャッシュやオフライン対応まで進めたい場合は、PWAのキャッシュ戦略を完全に理解するも近い内容です。

まとめ

PWAの状態を確認するときは、見た目だけではなく、MODE、ONLINE、SERVICE WORKER、PUSH、OS、INSTALLABLEのような項目を分けて見ると分かりやすいです。

特にMODEは「今PWAとして開いているか」、SERVICE WORKERは「裏側の処理が有効か」、INSTALLABLEは「ブラウザがインストール可能と判断したか」を見る項目です。

PWAは、manifest、Service Worker、キャッシュ、ブラウザ仕様が絡むため、少しのミスでも挙動が変わります。

だからこそ、PWA LABのように実際の状態を見ながら確認できる場所を作っておくと、かなり理解しやすくなります。

【無料】URLを貼るだけ！PWAチェッカーを使ってみる

PWA設定出来てるはずだけど、本当に出来てるのか？
そんな時にさっと判定してくれるチェッカーです。

PWAチェッカーはこちら