Installation von Ihrer PWA auslösen

Fügen Sie zuerst der 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 wir nicht möchten, dass die Installations-Benutzeroberfläche sichtbar ist, wenn der Benutzer die App mit einem Browser besucht, der sie nicht installieren kann. Als Nächstes wird gezeigt, 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 Kontext aus.

In unserem Haupt-App-Code werden wir auf dieses Ereignis hören:

// main.js

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

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

Der Ereignishandler hier tut drei Dinge:

• Er ruft preventDefault() am Ereignis auf. Dies verhindert, dass der Browser seine eigene Installations-Benutzeroberfläche anzeigt.
• Er nimmt eine Referenz auf das Ereignisobjekt, das in den Handler übergeben wird. Dies ist eine Instanz von BeforeInstallPromptEvent und ermöglicht es uns, den Benutzer aufzufordern, die App zu installieren.
• Er zeigt unsere In-App-Installations-Benutzeroberfläche an, indem er das hidden Attribut vom Button entfernt.

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. Dies zeigt die Installationsaufforderung an und gibt ein Promise zurück, das sich mit einem Objekt auflöst, das angibt, ob die App installiert wurde oder nicht. Insbesondere ist seine outcome Eigenschaft "accepted", wenn der Benutzer sich entschieden hat, die App zu installieren, oder "dismissed", wenn er die Aufforderung abgelehnt hat.

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

Je nach Browser und Plattform kann der Browser weiterhin seine eigene Benutzeroberfläche anbieten, um die App zu installieren. Das bedeutet, dass die App möglicherweise installiert wird, ohne dass unsere In-App-Installations-Benutzeroberfläche durchlaufen wird. Wenn dies geschieht, möchten wir die In-App-Installations-Benutzeroberfläche deaktivieren, oder wir zeigen sie in einer App an, die bereits installiert ist.

Dazu können wir auf das appinstalled Ereignis hören, das im globalen Window Kontext ausgelöst wird, wenn die App installiert wurde:

// main.js

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

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

Ein Fall, der durch die obigen Beispiele nicht abgedeckt wird, ist, wenn Sie eine plattformspezifische Version der App sowie eine Web-App haben und die Web-App-Erfahrung anpassen möchten, abhängig davon, ob die plattformspezifische App bereits installiert ist. Sie möchten Benutzer möglicherweise nicht dazu einladen, die PWA zu installieren, wenn sie die plattformspezifische App bereits installiert haben, und/oder Sie möchten sie dazu einladen, sich an die plattformspezifische App zu wenden, um Inhalte anzusehen.

Dies kann mit der Methode Navigator.getInstalledRelatedApps() bewältigt werden, die es Ihnen ermöglicht, installierte verwandte plattformspezifische Apps (oder PWAs) zu erkennen und entsprechend zu reagieren.

Zum Beispiel:

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 Installations-Benutzeroberfläche des Browsers basierend auf der Verfügbarkeit einer plattformspezifischen 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
  }
});

• PWAs installierbar machen
• beforeinstallprompt Ereignis
• How to provide your own in-app install experience auf web.dev (2021)