Упрощение установки Discourse как PWA

Внести вклад Функция
38

Я просто добавил кнопку, создав компонент темы.

Просто создайте новый компонент темы…

Добавьте следующий код JS, например, в заголовок:

<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 лайков