PWAのホーム画面追加ポップアップを任意のデザインに変更する方法

7624 ワード
PWA PWA テキストリンク

イメージ

  • デフォルトのポップアップデザイン

  • ポップアップを制御して（表示されないようにして）任意のデザインを充てたい

参考：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にスタッシュさせていたイベント発火させる。

  • 追加 or キャンセルで任意のイベントを記載。deferredPrompt.userChoice以下。（GAで追加とキャンセルの数を計りたいとき等）

参考