Facilitar la instalación de Discourse como PWA

Contribuir Característica
38

Simplemente he añadido el botón creando un componente de tema.

Crea un nuevo componente de tema…

Añade el siguiente código JS, por ejemplo, en el encabezado:

<script>
    let deferredPrompt; // Permite mostrar el mensaje de instalación
const installButton = document.getElementById("install_button");

window.addEventListener("beforeinstallprompt", e => {
  console.log("beforeinstallprompt disparado");
  // Evita que Chrome 76 y versiones anteriores muestren automáticamente un mensaje
  e.preventDefault();
  // Guarda el evento para poder activarlo más tarde.
  deferredPrompt = e;
  // Muestra el botón de instalación
  installButton.hidden = false;
  installButton.addEventListener("click", installApp);
});
function installApp() {
  // Muestra el mensaje
  deferredPrompt.prompt();
  installButton.disabled = true;

  // Espera a que el usuario responda al mensaje
  deferredPrompt.userChoice.then(choiceResult => {
    if (choiceResult.outcome === "accepted") {
      console.log("Configuración de PWA aceptada");
      installButton.hidden = true;
    } else {
      console.log("Configuración de PWA rechazada");
    }
    installButton.disabled = false;
    deferredPrompt = null;
  });
}
window.addEventListener("appinstalled", evt => {
  console.log("appinstalled disparado", evt);
});
</script>

Y coloca el siguiente HTML donde necesites el botón de instalación:

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

Está oculto por defecto y aparecerá si la PWA no está instalada.

Lo he probado en Chrome.

6 Me gusta