最近の PWA 事情についてわかったこと

2020-12-26

ここ 1 週間ほど PWA について色々と調べてみてわかったことを書いていこうと思います。

間違っている情報もあると思いますので、鵜呑みにはしないようにお願いします。

PWA に対応している環境について

現時点では上記の環境で PWA は動作するみたいです。

ただし iOS についてはインストール時の beforeinstallprompt や appinstalled などのイベントは発火しないので注意。

PC、Android と iOS で全く異なる対応を行うのがベターな気がします。

Add to Home screen のこと、要するに「ホーム画面に追加」のことを指しています。

A2HS は Android と iOS を対象としている言葉っぽい、PC にはホームという概念が存在しないのでそりゃそうかという印象を受けました。

ただし上に書いたとおり、PC と Android は PWA のインストールを行うのに対し、iOS はただホーム画面にショートカットを追加しているだけなので結構挙動が異なります。

iOS の場合 A2HS を JavaScript から制御を行うことはできないみたいです。

そもそも PWA は Google がゴリ押ししている技術なので、Apple が乗り気じゃないのはなんとなくわかる気がします。

具体的なシェア率はなんとも言えないけれど、PC、Android、iOS ともに 65% くらいのユーザーは PWA に対応したブラウザを日常的に使っているようです。

Web サービスを PWA に全寄せする、みたいなのはまだ非現実的だとは思うけれど、インストールを促すくらいであれば悪くないシェア率かなーという印象を受けました。

beforeinstallprompt の発火のタイミングが結構曖昧なのがちょっと困る、早かったり遅かったりするのがなんとも。

Andoroid の A2HS のポップアップは初回アクセス時しか表示されない仕様になっている（おそらくキャッシュで判定している？）ので、PWA に対応しただけではインストール率は低いと思われます。

あと iOS の PWA 対応はクソ、どうしようもないです。

ローカル開発では https である必要はなく、普通の localhost で PWA 自体は動作確認が可能です。

ただし create-react-app の場合 npm start 中に PWA は起動しなかった（多分 Service Worker が起動していない）ので、毎回 build して serve する必要があります。

あと、シークレットウィンドウでは起動しないっぽい？ため、キャッシュが残ってうまく動作しない、みたいなケースは多かったです。

PWA としてインストールしたアプリの更新タイミングもまだよくわかっていません、多分何かしらの設定がいるっぽいんですが…。

PWA 自体は結構便利な印象です。

PC のみの対応であれば Electron で十分な気がするけど、スマホであればわざわざ React Native で書くほどでもないときの選択肢としては良いかもしれないです。

PWA と聞くとやたらオフライン対応を目にするけれど、PC もスマホも基本ネットに繋げているし、オフライン対応ってそこまで重要視するポイントかぁ？と思いました。

むしろそれよりはブラウザと PWA で異なる仕様に対して繊細な UX を組むことのほうが大切かなと、特に PWA では戻るなどの導線の対応が必須となります。

そんな感じです。

Nextjs などの ssr が絡んだ場合、PWA がどういった挙動をするのかは興味がありますね。

next-pwa というのが一番メジャーな対応っぽいですが。

create-react-app で PWA 対応を行う場合、最近のバージョンからは Service Worker の登録が削除されたので、いつもと異なるテンプレートを使用する必要があります。

せめて iOS の Chrome も PWA に対応してくれるとぐっとシェア率も伸びるのですが…Apple 頼むよー。