Installation aus Ihrer PWA heraus auslösen

Fügen Sie zunächst Ihrer App eine Benutzeroberfläche hinzu, die anzeigt, dass der Benutzer sie installieren kann. Zum Beispiel:

<button id="install" hidden>Install</button>

Wir setzen das hidden-Attribut des Buttons, weil die Installationsoberfläche nicht sichtbar sein soll, wenn der Benutzer die App mit einem Browser besucht, der sie nicht installieren kann. Als Nächstes sehen wir, wie der Button nur in Browsern sichtbar gemacht wird, die die lokale Installation von PWAs unterstützen.

Sobald der Browser festgestellt hat, dass er die App installieren kann, löst er das beforeinstallprompt-Ereignis im globalen Window-Scope aus.

In unserem Haupt-App-Code werden wir auf dieses Ereignis lauschen:

// main.js

let installPrompt = null;
const installButton = document.querySelector("#install");

window.addEventListener("beforeinstallprompt", (event) => {
  event.preventDefault();
  installPrompt = event;
  installButton.removeAttribute("hidden");
});

Der Event-Handler führt hier drei Dinge aus:

• Ruft preventDefault() auf dem Ereignis auf. Dies verhindert, dass der Browser seine eigene Installationsoberfläche anzeigt.
• Nimmt eine Referenz auf das Ereignisobjekt, das an den Handler übergeben wurde. Dies ist eine Instanz von BeforeInstallPromptEvent und ermöglicht es uns, den Benutzer zur Installation der App aufzufordern.
• Zeigt unsere In-App-Installationsoberfläche an, indem das hidden-Attribut am Button entfernt wird.

Beachten Sie, dass das Ereignis nicht ausgelöst wird, wenn:

• Die PWA bereits installiert ist.
• Die App nicht die PWA-Installationskriterien erfüllt.
• Die PWA auf dem aktuellen Gerät nicht installierbar ist (zum Beispiel wegen fehlender Berechtigungen).

Als Nächstes müssen wir einen Klick-Handler zu unserem In-App-Installationsbutton hinzufügen:

// main.js

installButton.addEventListener("click", async () => {
  if (!installPrompt) {
    return;
  }
  const result = await installPrompt.prompt();
  console.log(`Install prompt was: ${result.outcome}`);
  disableInAppInstallPrompt();
});

function disableInAppInstallPrompt() {
  installPrompt = null;
  installButton.setAttribute("hidden", "");
}

Die Variable installPrompt wurde im beforeinstallprompt-Ereignishandler mit dem BeforeInstallPromptEvent-Objekt initialisiert. Wenn installPrompt aus irgendeinem Grund nicht initialisiert wurde, tun wir nichts.

Andernfalls rufen wir seine prompt()-Methode auf. Diese zeigt das Installations-Prompt an und gibt ein Promise zurück, das mit einem Objekt aufgelöst wird, das anzeigt, ob die App installiert wurde oder nicht. Insbesondere ist die Eigenschaft outcome "accepted", wenn der Benutzer sich für die Installation der App entschieden hat, oder "dismissed", wenn er das Prompt abgelehnt hat.

In jedem Fall müssen wir unseren Zustand nach dem Aufruf von prompt() zurücksetzen, da wir es nur einmal für jedes BeforeInstallPromptEvent-Exemplar aufrufen können. Daher setzen wir unsere installPrompt-Variable zurück und blenden den Installationsbutton wieder aus.

Je nach Browser und Plattform kann der Browser weiterhin seine eigene Benutzeroberfläche zur Installation der App anbieten. Das bedeutet, dass die App möglicherweise installiert wird, ohne dass unsere In-App-Installationsoberfläche verwendet wird. Wenn dies geschieht, möchten wir die In-App-Installationsoberfläche deaktivieren, da wir sie sonst in einer bereits installierten App anzeigen werden.

Dazu können wir auf das appinstalled-Ereignis lauschen, das im globalen Window-Scope ausgelöst wird, wenn die App installiert wurde:

// main.js

window.addEventListener("appinstalled", () => {
  disableInAppInstallPrompt();
});

function disableInAppInstallPrompt() {
  installPrompt = null;
  installButton.setAttribute("hidden", "");
}

Wenn Sie sowohl eine plattform-spezifische Version der App als auch eine Web-App haben und Sie die Benutzererfahrung der Web-App personalisieren möchten, abhängig davon, ob die plattform-spezifische App bereits installiert ist. Möglicherweise möchten Sie die Benutzer nicht einladen, die PWA zu installieren, wenn sie bereits die plattform-spezifische App installiert haben, und/oder Sie möchten sie vielleicht einladen, zur plattform-spezifischen App zu wechseln, um Inhalte dort anzusehen.

Dies kann mit der Methode Navigator.getInstalledRelatedApps() gehandhabt werden, die es ermöglicht, installierte verwandte plattform-spezifische Apps (oder PWAs) zu erkennen und entsprechend zu reagieren.

Beispielsweise:

const relatedApps = await navigator.getInstalledRelatedApps();

// Search for a specific installed platform-specific app
const psApp = relatedApps.find((app) => app.id === "com.example.myapp");

if (psApp) {
  // Update UI as appropriate
}

Diese Methode könnte auch mit beforeinstallprompt kombiniert werden, um die Installationsoberfläche des Browsers basierend auf der Verfügbarkeit einer plattform-spezifischen App zu unterdrücken:

window.addEventListener("beforeinstallprompt", async (event) => {
  const relatedApps = await navigator.getInstalledRelatedApps();

  // Search for a specific installed platform-specific app
  const psApp = relatedApps.find((app) => app.id === "com.example.myapp");

  if (psApp) {
    event.preventDefault();
    // Update UI as appropriate
  }
});

• PWA installierbar machen
• beforeinstallprompt-Ereignis
• Wie Sie ein eigenes In-App-Installationserlebnis anbieten auf web.dev (2021)
• Installationsaufforderung auf web.dev (2022)