Installation von Ihrer PWA auslösen

Fügen Sie zuerst der App eine Benutzeroberfläche hinzu, die darauf hinweist, dass der Benutzer sie installieren kann. Zum Beispiel:

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

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

Sobald der Browser festgestellt hat, dass er die App installieren kann, wird im globalen Window Bereich das beforeinstallprompt Event ausgelöst.

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 tut hier drei Dinge:

• Ruft preventDefault() auf das Ereignis auf. Dies verhindert, dass der Browser seine eigene Installationsoberfläche anzeigt.
• 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 zur Installation der App aufzufordern.
• Zeigt unsere in-App-Installationsoberfläche an, indem das hidden Attribut des Buttons entfernt wird.

Als nächstes müssen wir einen Klick-Handler für unseren 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 installPrompt Variable wurde mit dem BeforeInstallPromptEvent Objekt in unserem beforeinstallprompt Ereignishandler initialisiert. Wenn installPrompt aus irgendeinem Grund nicht initialisiert wurde, tun wir nichts.

Andernfalls rufen wir seine prompt() Methode auf. Dies zeigt das Installationsfenster an und gibt ein Promise zurück, welches mit einem Objekt aufgelöst wird, 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 das Fenster abgelehnt hat.

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

Je nach Browser und Plattform kann der Browser weiterhin seine eigene Oberflä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, um sie nicht in einer bereits installierten App anzuzeigen.

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

// main.js

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

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

Ein Fall, der in den obigen Beispielen nicht abgedeckt ist, ist, dass Sie eine plattformspezifische Version der App sowie eine Web-App haben, und Sie die Web-App-Erfahrung personalisieren möchten, abhängig davon, ob die plattformspezifische App bereits installiert ist. Sie möchten den Benutzer möglicherweise nicht einladen, die PWA zu installieren, wenn er bereits die plattformspezifische App installiert hat, und/oder Sie möchten ihn möglicherweise einladen, zur plattformspezifischen App zu wechseln, um Inhalte anzusehen.

Dies kann mit der Navigator.getInstalledRelatedApps() Methode gehandhabt 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 Installationsoberflä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
  }
});

• Making PWAs installable
• beforeinstallprompt Event
• How to provide your own in-app install experience auf web.dev (2021)