素敵なサムシングを独断と偏見で一方的に紹介するブログ(´・ω・`)

IT

【ボタン配置】PWAアプリのインストールダイアログをJavaScriptで制御しよう【beforeinstallprompt】

投稿日:

スポンサーリンク

336×280




PWAのインストールボタンを配置しよう

先日、WebサイトのPWA化についてご紹介しました。

ただ、何も設定していないと、初回訪問時にインストールダイアログが出現しますが、ここでインストールを行わないとこのダイアログが当分出てこなくなってしまいます

それだと、かなり使い勝手が悪いので、今回は自動で表示されるインストールダイアログを制御し、ボタンを押したタイミングでインストールを行うようにJavaScriptを使って改修してみようと思います。

手順

beforeinstallpromptイベントの制御

今回はbeforeinstallpromptというイベントをJavaScriptで制御すれば実現出来そうです。

以下の記述をheadタグに追記してください

スクリプト自体はこれだけです。

あとはbutton要素等にonclick='pwaInstall()'を入れるなどして実行させる導線を用意しましょう。

確認

では実際に確認してみましょう。

無事に、ボタンを押すことで期待通りの制御が出来ましたね♪

本日のオススメ商品

終わりに

以上のように、意外と簡単にPWAアプリのインストール導線を用意する事が出来ました。

PWA化するのであれば、間違いなく必要な作業だと思いますのでぜひ試してみてください♪

336×280




336×280




CATEGORIES & TAGS

IT, , , , , , , , , , , , ,

blogenist

Author: blogenist