Facilitando a instalação do Discourse como um PWA

Contribuir Funcionalidade
38

Eu simplesmente adicionei o botão criando um componente de tema.

Basta criar um novo componente de tema.

Adicione o seguinte código JS, por exemplo, no cabeçalho:

<script>
    let deferredPrompt; // Permite mostrar o prompt de instalação
const installButton = document.getElementById("install_button");

window.addEventListener("beforeinstallprompt", e => {
  console.log("beforeinstallprompt disparado");
  // Impede que o Chrome 76 e anteriores mostrem automaticamente um prompt
  e.preventDefault();
  // Armazena o evento para que possa ser acionado posteriormente.
  deferredPrompt = e;
  // Mostra o botão de instalação
  installButton.hidden = false;
  installButton.addEventListener("click", installApp);
});
function installApp() {
  // Mostra o prompt
  deferredPrompt.prompt();
  installButton.disabled = true;

  // Aguarda a resposta do usuário ao prompt
  deferredPrompt.userChoice.then(choiceResult => {
    if (choiceResult.outcome === "accepted") {
      console.log("Configuração do PWA aceita");
      installButton.hidden = true;
    } else {
      console.log("Configuração do PWA rejeitada");
    }
    installButton.disabled = false;
    deferredPrompt = null;
  });
}
window.addEventListener("appinstalled", evt => {
  console.log("appinstalled disparado", evt);
});
</script>

E coloque o seguinte HTML onde desejar que o botão de instalação apareça:

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

Ele está oculto por padrão e aparecerá se o PWA não estiver instalado.

Testei no Chrome.

6 curtidas