Rendere più facile l'installazione di Discourse come PWA

Contribuisci Funzionalità
38

Ho semplicemente aggiunto il pulsante creando un componente del tema.

Basta creare un nuovo componente del tema..

aggiungi il seguente codice JS, ad esempio nell’header

<script>
    let deferredPrompt; // Consente di mostrare il prompt di installazione
const installButton = document.getElementById("install_button");

window.addEventListener("beforeinstallprompt", e => {
  console.log("beforeinstallprompt attivato");
  // Previene la visualizzazione automatica del prompt in Chrome 76 e versioni precedenti
  e.preventDefault();
  // Salva l'evento per poterlo attivare in seguito.
  deferredPrompt = e;
  // Mostra il pulsante di installazione
  installButton.hidden = false;
  installButton.addEventListener("click", installApp);
});
function installApp() {
  // Mostra il prompt
  deferredPrompt.prompt();
  installButton.disabled = true;

  // Attendi che l'utente risponda al prompt
  deferredPrompt.userChoice.then(choiceResult => {
    if (choiceResult.outcome === "accepted") {
      console.log("Configurazione PWA accettata");
      installButton.hidden = true;
    } else {
      console.log("Configurazione PWA rifiutata");
    }
    installButton.disabled = false;
    deferredPrompt = null;
  });
}
window.addEventListener("appinstalled", evt => {
  console.log("appinstalled attivato", evt);
});
</script>

E inserisci il seguente HTML ovunque desideri il pulsante di installazione

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

è nascosto per impostazione predefinita e apparirà se la PWA non è installata.

L’ho testato su Chrome.

6 Mi Piace