DieLaunch Handler API ermöglicht es Entwicklern, zu kontrollieren, wie eineprogressive Web-App (PWA) gestartet wird — zum Beispiel, ob sie ein bestehendes Fenster verwendet oder ein neues erstellt, und wie die Ziel-Start-URL der App behandelt wird.

Konzepte und Verwendung

Sie können das Startverhalten Ihrer App festlegen, indem Sie das Feldlaunch_handler zu Ihrer Web-App-Manifestdatei hinzufügen. Dieses hat ein Unterfeld,client_mode, das einen Zeichenfolgenwert enthält, der angibt, wie die App gestartet und navigiert werden soll. Zum Beispiel:

{  "launch_handler": {    "client_mode": "focus-existing"  }}

Falls nicht angegeben, ist der Standardwert fürclient_modeauto. Verfügbare Werte sind:

focus-existing

Der zuletzt interagierte Browsing-Kontext in einem Web-App-Fenster wird ausgewählt, um den Start zu behandeln. Dies wird die Ziel-Start-URL in dertargetURL Eigenschaft desLaunchParams Objekts füllen, das in die Rückruffunktion vonwindow.launchQueue.setConsumer() übergeben wird. Wie unten zu sehen ist, ermöglicht dies, die Startbehandlung Ihrer App individuell anzupassen.

navigate-existing

Der zuletzt interagierte Browsing-Kontext in einem Web-App-Fenster wird zur Ziel-Start-URL navigiert. Die Ziel-URL wird weiterhin überwindow.launchQueue.setConsumer() verfügbar gemacht, um zusätzliche individuelle Startnavigationsbehandlungen zu implementieren.

navigate-new

Ein neuer Browsing-Kontext wird in einem Web-App-Fenster erstellt, um die Ziel-Start-URL zu laden. Die Ziel-URL wird weiterhin überwindow.launchQueue.setConsumer() verfügbar gemacht, um zusätzliche individuelle Startnavigationsbehandlungen zu implementieren.

auto

Der User-Agent entscheidet, was am besten für die Plattform funktioniert. Zum Beispiel könntenavigate-existing auf Mobilgeräten mehr Sinn machen, wo einzelne App-Instanzen üblich sind, währendnavigate-new in einem Desktop-Kontext mehr Sinn machen könnte. Dies ist der Standardwert, falls angegebene Werte ungültig sind.

Wennfocus-existing verwendet wird, können Sie Code innerhalb der Rückruffunktion vonwindow.launchQueue.setConsumer() einfügen, um eine individuelle Behandlung dertargetURL bereitzustellen.

window.launchQueue.setConsumer((launchParams) => {  // Do something with launchParams.targetURL});

Schnittstellen

LaunchParams

Wird bei der Implementierung individueller Startnavigationsbehandlung in einer PWA verwendet. Wennwindow.launchQueue.setConsumer() aufgerufen wird, um die Startnavigations-Behandlungsfunktionalität einzurichten, wird die Rückruffunktion innerhalb vonsetConsumer() eine Instanz desLaunchParams Objekts übergeben.

LaunchQueue

Wenn eineprogressive Web-App (PWA) mit einemlaunch_handlerclient_mode Wert vonfocus-existing,navigate-new odernavigate-existing gestartet wird, ermöglichtLaunchQueue den Zugriff auf Funktionen, die eine individuelle Startnavigationsbehandlung in der PWA implementieren. Diese Funktionalität wird durch die Eigenschaften desLaunchParams Objekts gesteuert, das in die Rückruffunktion vonsetConsumer() übergeben wird.

Erweiterungen zu anderen Schnittstellen

window.launchQueue

Bietet Zugriff auf dieLaunchQueue Klasse, die es ermöglicht, eine individuelle Startnavigationsbehandlung in einerprogressiven Web-App (PWA) zu implementieren, wobei der Behandlungskontext durch denlaunch_handler Manifest-Feldclient_mode Wert angezeigt wird.

Beispiele

if ("launchQueue" in window) {  window.launchQueue.setConsumer((launchParams) => {    if (launchParams.targetURL) {      const params = new URL(launchParams.targetURL).searchParams;      // Assuming a music player app that gets a track passed to it to be played      const track = params.get("track");      if (track) {        audio.src = track;        title.textContent = new URL(track).pathname.slice(1);        audio.play();      }    }  });}

Dieser Code wird in der PWA eingebunden und bei jedem Start der App ausgeführt. Die Rückruffunktion vonwindow.launchQueue.setConsumer() extrahiert das Such-Param aus derLaunchParams.targetURL und, falls sie einentrack Parameter findet, verwendet sie diesen, um dassrc des<audio> Elements zu füllen und den Audiotrack abzuspielen, auf den dies verweist.

Sehen Sie sich die Demo-AppMusicr 2.0 für vollständigen funktionierenden Code an.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Launch Handler API: Control how your app is launched