Installation von Ihrer PWA auslösen

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

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

Wir setzen das hidden Attribut des Buttons, da wir nicht möchten, dass die Installations-UI sichtbar ist, wenn der Benutzer die App mit einem Browser besucht, der sie nicht installieren kann. Als nächstes erfahren Sie, wie der Button nur in Browsern sichtbar gemacht werden kann, die die Installation von PWAs lokal unterstützen.

Sobald der Browser ermittelt hat, dass er die App installieren kann, löst er das beforeinstallprompt Ereignis im globalen Window Geltungsbereich 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 tut hier drei Dinge:

• Er ruft preventDefault() für das Ereignis auf. Dies hindert den Browser daran, seine eigene Installations-UI anzuzeigen.
• Er nimmt eine Referenz auf das Ereignisobjekt, das an den Handler übergeben wird. Dies ist eine Instanz von BeforeInstallPromptEvent und ermöglicht es uns, den Benutzer zur Installation der App aufzufordern.
• Er zeigt unsere In-App-Installations-UI an, indem das hidden Attribut des Buttons entfernt wird.

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 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 die prompt() Methode auf. Dies zeigt die Installationsaufforderung an und gibt ein Promise zurück, das sich mit einem Objekt löst, das angibt, ob die App installiert wurde oder nicht. Insbesondere ist die outcome Eigenschaft "accepted", wenn der Benutzer die Installation der App ausgewählt hat, oder "dismissed", wenn er die Aufforderung abgelehnt hat.

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

Abhängig vom Browser und der Plattform kann der Browser weiterhin seine eigene Benutzeroberfläche zur Installation der App anbieten. Das bedeutet, dass die App möglicherweise ohne unsere In-App-Installations-UI installiert wird. Wenn dies geschieht, möchten wir die In-App-Installations-UI deaktivieren, oder wir zeigen sie in einer App an, die bereits installiert wurde.

Um dies zu erreichen, können wir das appinstalled Ereignis anhören, das im globalen Window Geltungsbereich ausgelöst wird, wenn die App installiert wurde:

// main.js

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

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

Ein Fall, der von den obigen Beispielen nicht abgedeckt wird, ist, wenn Sie eine plattform-spezifische Version der App zusätzlich zu einer Web-App haben und das Erlebnis der Web-App personalisieren möchten, je nachdem, ob die plattform-spezifische App bereits installiert ist. Möglicherweise möchten Sie Benutzer nicht einladen, die PWA zu installieren, wenn sie bereits die plattform-spezifische App installiert haben, und/oder Sie möchten sie möglicherweise einladen, zur plattform-spezifischen App zu wechseln, um Inhalte anzusehen.

Dies kann mit der Navigator.getInstalledRelatedApps() Methode gehandhabt werden, die es Ihnen ermöglicht, installierte verwandte plattform-spezifische 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-UI 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
  }
});

• PWAs installierbar machen
• beforeinstallprompt Ereignis
• Anleitung zur Bereitstellung eines eigenen In-App-Installationserlebnisses auf web.dev (2021)