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

**URL:** <https://meta.discourse.org/t/making-it-easier-to-install-discourse-as-a-pwa/158034>\
**Category:** Feature\
**Created:** [2020 年 7 月 17 日午後 1:24 UTC](https://meta.discourse.org/t/making-it-easier-to-install-discourse-as-a-pwa/158034 "2020-07-17T13:24:54Z")\
**Posts on this page:** 1\
**Showing post:** 38

<div class="post-metadata">

**Author:** ![surajmpatel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/surajmpatel/32/205724_2.png) [@surajmpatel](https://meta.discourse.org/u/surajmpatel)\
**Post date:** [2021 年 5 月 16 日午前 3:47 UTC](https://meta.discourse.org/t/making-it-easier-to-install-discourse-as-a-pwa/158034/38 "2021-05-16T03:47:48Z")

</div>

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

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

```html
<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 上でテスト済みです。

---

_[View the full topic](https://meta.discourse.org/t/making-it-easier-to-install-discourse-as-a-pwa/158034)._