Einfachere Installation von Discourse als PWA

Beitragen Merkmal
38

Ich habe den Button einfach durch Erstellen eines Theme-Komponenten hinzugefügt.

Erstellen Sie einfach eine neue Theme-Komponente.

Fügen Sie den folgenden JS-Code beispielsweise im Header hinzu:

<script>
    let deferredPrompt; // Ermöglicht das Anzeigen der Installationsaufforderung
const installButton = document.getElementById("install_button");

window.addEventListener("beforeinstallprompt", e => {
  console.log("beforeinstallprompt ausgelöst");
  // Verhindert, dass Chrome 76 und älter automatisch eine Aufforderung anzeigen
  e.preventDefault();
  // Speichern des Ereignisses, damit es später ausgelöst werden kann.
  deferredPrompt = e;
  // Installationsbutton anzeigen
  installButton.hidden = false;
  installButton.addEventListener("click", installApp);
});
function installApp() {
  // Aufforderung anzeigen
  deferredPrompt.prompt();
  installButton.disabled = true;

  // Auf die Antwort des Benutzers auf die Aufforderung warten
  deferredPrompt.userChoice.then(choiceResult => {
    if (choiceResult.outcome === "accepted") {
      console.log("PWA-Setup akzeptiert");
      installButton.hidden = true;
    } else {
      console.log("PWA-Setup abgelehnt");
    }
    installButton.disabled = false;
    deferredPrompt = null;
  });
}
window.addEventListener("appinstalled", evt => {
  console.log("appinstalled ausgelöst", evt);
});
</script>

Platzieren Sie den folgenden HTML-Code dort, wo Sie den Installationsbutton benötigen:

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

Er ist standardmäßig ausgeblendet und erscheint, wenn die PWA nicht installiert ist.

Ich habe es für Chrome getestet.

6 „Gefällt mir“