use-pwa について改めてざっくり紹介
ようやく PWA と JavaScript の仕様がぼちぼち把握できてきました。
それに伴いパッケージの挙動も安定させることができたので、改めて内容を紹介をば。
このパッケージは「このパッケージが導入されている Web サイトやサービスが PWA 対応されている場合、アプリのインストールを促すポップアップを表示させること」を目的としたパッケージになっています。
説明だけを見ると意味不明なパッケージに思えるかもしれないですが、実は PWA のインストールを開発側がコントロールするのって結構難しかったりします。
PWA に対応されたサイトを眺めていても、アプリのインストールを促すポップアップの表示タイミングってかなり曖昧で、一度閉じちゃうと二度と表示されないケースもしばしばあります。
なのでよくわからない表示タイミングで振り回されるくらいなら、インストールボタンをつけたほうが UX 的に絶対良いよね、という思いからこのパッケージを作ってみました。
現時点では Windows と Mac の両 Chrome と、Android の Chrome での正常動作が確認できています。
一方 iOS や iPadOS の Safari については対応が厳しそうです。
Apple 製品の PWA の仕様って結構意味不明でして…せめてフラグ値を返すくらいは作りたいなーと思っているのですが。
コードレベルにおける仕様については GitHub を見てもらえればわかると思います。
一応現時点で使用可能な値の紹介をば。
デモサイト も公開していますので、お気軽に確認して頂ければと。
当初自分のためだけにこのパッケージを作っていたのですが『最近 npm パッケージを作ってないなー』と思い、さくっと公開したまでは良かったんですが。
インストール用のハンドラーをボタンの onClick に絞ったのはあんまり良くなかったような気がしてならないです、多分直さないですが。
とはいえ好きなタイミングで呼び出せるようにすると、例えばサイトを開いたタイミングでポップアップが表示されるような作りも簡単にできちゃうので、そういう使われ方がイヤで絞ったというのもあります。
今のとこ create-react-app での動作確認しか行っていないので、Nextjs や Gatsby 環境で正常動作するかは不明です。
一応 window オブジェクトへのアクセスは useEffect 内で行うように組んであるので、多分大丈夫だとは思うのですが…誰か教えてくれるとありがたいです。