Discourse を PWA としてインストールしやすくする

貢献 特徴
38

テーマコンポーネントを作成するだけで、ボタンを追加できます。

新しいテーマコンポーネントを作成し、以下のような JavaScript コードをヘッダーなどに追加してください。

<script>
    let deferredPrompt; // インストールプロンプトを表示するための変数
    const installButton = document.getElementById("install_button");

    window.addEventListener("beforeinstallprompt", e => {
      console.log("beforeinstallprompt fired");
      // Chrome 76 以前で自動的にプロンプトが表示されるのを防ぐ
      e.preventDefault();
      // イベントを保存して後でトリガーできるようにする
      deferredPrompt = e;
      // インストールボタンを表示
      installButton.hidden = false;
      installButton.addEventListener("click", installApp);
    });

    function installApp() {
      // プロンプトを表示
      deferredPrompt.prompt();
      installButton.disabled = true;

      // ユーザーの応答を待つ
      deferredPrompt.userChoice.then(choiceResult => {
        if (choiceResult.outcome === "accepted") {
          console.log("PWA setup accepted");
          installButton.hidden = true;
        } else {
          console.log("PWA setup rejected");
        }
        installButton.disabled = false;
        deferredPrompt = null;
      });
    }

    window.addEventListener("appinstalled", evt => {
      console.log("appinstalled fired", evt);
    });
</script>

また、インストールボタンを表示したい場所に以下の HTML を配置してください。

<button id="install_button" hidden>Install</button>

このボタンはデフォルトでは非表示で、PWA がインストールされていない場合にのみ表示されます。

Chrome 上でテスト済みです。

「いいね！」 6