Googleマップ上に、洪水ハザードマップを表示するWebアプリを開発しています
このWebアプリをスマホのホーム画面にインストールできれば、定期的な防災意識の啓発につながるのではと思い、PWAについて調べた内容と感想を書きます
PWAの実装方法を説明するというより、概要と感想がメインです
主に参考にしたのは MDNのページ です
PWAとは？
Webアプリをスマホアプリっぽく利用できるようにするために、ホーム画面にインストールしたり、プッシュ通知したり、ファイルをローカルにキャッシュしてオフラインでも動作を継続できるようにしたりする技術の総称です
PWAに必要なこと
- サーバがHTTPSであること
- サービスワーカーの実装
- webアプリmanifestファイル
詳しくは MDNのこちら
サービスワーカーとは？
プッシュ通知や、ローカルのファイルキャッシュを実装するのには、必須の技術です
またWebサイト上で、インストールをうながすポップアップを表示するには 一定条件を満たした サービスワーカーの実装が必要になります
検証の際に、この一定条件を詳しく書いてあるサイトを見つけられませんでした(あまり深追いしてない)
うまく動かないときに stack overflowのコメント を見て、なんとか動かせた
A2HSとは？
Add to Home Screen の略。PWAの世界で、ホーム画面にWebアプリをインストールすることを、こうやって読んでいるようです
インストールするだけなら、ブラウザのメニューからインストールを選択すればできます(冒頭のリンク先参照)
問題は、Webアプリの画面上にホーム画面にインストールをうながすポップアップを表示するときです
このポップアップを表示する機能はブラウザ側で実装されているのですが、これが使いにくいです
- ポップアップが表示される条件が不明瞭で、安定的に表示させることが難しい
- ユーザの初回アクセス時しか表示されないっぽい？
- Service Workerがアップデートされると表示が復活したりしなかったりする
- ユーザの操作を邪魔しないよう、頻繁に表示させないような仕様になっているらしい
- この仕様により、何度もブラウザキャッシュをクリアしつつデバッグする必要があるのでつらい
- ポップアップのデザインや表示位置も、ブラウザ依存でカスタマイズできない
- インストールボタンを決まったデザインで、決まった位置に表示したい場合もあるはずなのに、そういったことはできない
いろいろ試してみたけど
ポップアップは表示させなくても、ブラウザのメニューからインストールはできます
なら、その手順を説明するページを作ってユーザにやってもらえばよくね、という結論に至り、下記のページをユーザに案内することにしました