PWAのインストールダイアログをJavaScriptで制御する方法

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

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

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

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

手順

beforeinstallpromptイベントの制御

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

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

[adsense-responsive]

index.htlm

< head >
    ...
    (略)
    ...
    // イベントを発火させずに保持
window.addEventListener('beforeinstallprompt', function(event) {
    event.preventDefault();
    defferedPrompt = event;
    return false;
})

// イベントを意図的に発火
function pwaInstall() {
    console.log('pwaInstall Click.');
    if (defferedPrompt) {
        defferedPrompt.prompt();
        defferedPrompt.userChoice.then(function(choiceResult) {
            if (choiceResult.outcome === 'dismissed') {
                console.log('pwaInstall Click.');
            } else {
                window.alert('Thank You!');
            }
        });
        defferedPrompt = null;
    }
}
...
(略)
...

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

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

確認

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

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

終わりに

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

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