イメージ
- デフォルトのポップアップデザイン
- ポップアップを制御して(表示されないようにして)任意のデザインを充てたい
参考:Add to Home Screen
参考:Patterns for Promoting PWA Installation (mobile)
コード
example.js
function promptA2hs() {
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
let btnAdd = $('#promptPwa');
e.preventDefault();
deferredPrompt = e;
btnAdd.css('display', 'block');
btnAdd.click(function (e) {
deferredPrompt.prompt(e);
deferredPrompt.userChoice
.then((choiceResult) => {
if (choiceResult.outcome === 'accepted') {
console.log('User accepted the A2HS prompt');
} else {
console.log('User dismissed the A2HS prompt');
}
deferredPrompt = null;
})
})
});
}
この関数をサービスワーカーインストール後に記述
window.addEventListener('load', function () {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register("sw.js")
.then(function (registration) {
console.log("sw registed.");
}).catch(function (error) {
console.warn("sw error.", error);
});
}
});
promptA2hs()
やっていること
-
beforeinstallpromptイベントを使います。
-
ボタンデザインのhtmlとcssは別途用意。該当箇所はcssで
display: none
にしておく -
本来ホーム画面追加のポップアップが発火するタイミングで、
- イベント(e)を
deferredPrompt
という変数に入れておく(スタッシュさせておく)。 - 該当箇所を
display: block
に変更 - 該当箇所をクリックしたときに
prompt
でdeferredPrompt
にスタッシュさせていたイベント発火させる。
- イベント(e)を
-
追加 or キャンセルで任意のイベントを記載。
deferredPrompt.userChoice
以下。(GAで追加とキャンセルの数を計りたいとき等)