PWAインストールへの動線を強化

プロダクトも固まってきたので、色んなろんな方に使っていただくフェーズに入ってきました。
まずは友人への紹介をしているのですが、友人に使ってみて！とURLを教えた後、毎回PWAの導入の仕方(iOSならSafariで、AndoroidならChromeで開いてもらって、下のボタンから「ホームに追加」)を教えていました。

いやそれ、新規登録のページに書いてあるやん！と。

でも僕が直接教えてしまうんですね。
それはこの動線の甘さを僕が認識しているから。
じゃあもっと強い動線にしてLPのURL教えればPWA化までスムーズに行ってもらえるようにしようと今更思ったわけです。
こんな感じにしました。

普通にインストール方法を最初に掲示するだけ！笑(下にスクロールすると登録フォームがある)。
PWA化後は、このインストール方法は不要なので、PWA上では見えないように設定。
以下のコードで、PWAから見ているかどうか判定し、処理しました。

if(window.matchMedia('(display-mode: standalone)').matches){
    //PWAの時の処理
}

また、PCの際はPWAのインストール方法が若干異なるので、

if(!navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/i)){
    //PCの時の処理
}

で分岐させました。
本当はAndroidのときとiOSのときでも分岐させてそれぞれのスクショにしたかったのですが、Android版のスクショがなかったのでまとめてしまいました。
Androidの友人に会ったときにスクショ撮らせてもらおう…。

これでめでたくPWAの動線がわかりやすくなりましたとさ！

今日もお読みくださりありがとうございます。
ほぼ毎日、アプリ開発や事業に関する日記を書いておりますので是非またお読みになってください！