Launch Handler API

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Die Launch Handler API ermöglicht Entwicklern, zu steuern, wie eine progressive Web-App (PWA) gestartet wird — zum Beispiel, ob sie ein vorhandenes Fenster verwendet oder ein neues erstellt, und wie die Zielstart-URL der App gehandhabt wird.

Konzepte und Verwendung

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

json

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

Wenn nicht angegeben, ist der Standardwert für client_mode auto. Verfügbare Werte sind:

focus-existing: Der zuletzt interagierte Browserkontext in einem Web-App-Fenster wird gewählt, um den Start zu handhaben. Dies wird die Zielstart-URL in die Eigenschaft targetURL des Objekts LaunchParams einfügen, das in die Rückruffunktion von window.launchQueue.setConsumer() übergeben wird. Wie Sie unten sehen werden, erlaubt dies Ihnen, benutzerdefinierte Start-Funktionalität für Ihre App einzurichten.
navigate-existing: Der zuletzt interagierte Browserkontext in einem Web-App-Fenster wird zur Zielstart-URL navigiert. Die Ziel-URL ist immer noch über window.launchQueue.setConsumer() verfügbar, um zusätzliche benutzerdefinierte Start-Navigationsprozesse zu implementieren.
navigate-new: Ein neuer Browserkontext wird in einem Web-App-Fenster erstellt, um die Zielstart-URL zu laden. Die Ziel-URL ist immer noch über window.launchQueue.setConsumer() verfügbar, um zusätzliche benutzerdefinierte Start-Navigationsprozesse zu implementieren.
auto: Der User-Agent entscheidet, was für die Plattform am besten geeignet ist. Zum Beispiel könnte navigate-existing auf mobilen Geräten mehr Sinn machen, wo einzelne App-Instanzen üblich sind, während navigate-new in einem Desktop-Kontext mehr Sinn machen könnte. Dies ist der Standardwert, der verwendet wird, wenn die angegebenen Werte ungültig sind.

Wenn focus-existing verwendet wird, können Sie Code innerhalb der Rückruffunktion von window.launchQueue.setConsumer() einschließen, um das targetURL benutzerdefiniert zu handhaben.

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

Hinweis: LaunchParams hat auch eine Eigenschaft LaunchParams.files, die ein schreibgeschütztes Array von FileSystemHandle-Objekten zurückgibt, die alle Dateien darstellen, die zusammen mit der Startnavigation über die POST-Methode übergeben wurden. Dies ermöglicht die Implementierung von benutzerdefiniertem Datei-Handling.

Schnittstellen

LaunchParams: Wird bei der Implementierung von benutzerdefiniertem Start-Navigation-Handling in einer PWA verwendet. Wenn window.launchQueue.setConsumer() aufgerufen wird, um die Funktionalität des Startnavigation-Handlings einzurichten, wird der Rückruffunktion innerhalb von setConsumer() eine LaunchParams-Objektinstanz übergeben.
LaunchQueue: Wenn eine progressive Web-App (PWA) mit einem launch_handler client_mode-Wert von focus-existing, navigate-new oder navigate-existing gestartet wird, bietet LaunchQueue Zugriff auf Funktionen, die die Implementierung von benutzerdefinierten Start-Navigationsprozessen in der PWA ermöglichen. Diese Funktionalität wird gesteuert durch die Eigenschaften des LaunchParams-Objekts, das in die Rückruffunktion von setConsumer() übergeben wird.

Erweiterungen zu anderen Schnittstellen

window.launchQueue: Bietet Zugriff auf die LaunchQueue-Klasse, die es ermöglicht, benutzerdefinierte Start-Navigationsprozesse in einer progressive Web-App (PWA) zu implementieren, wobei der Handhabungskontext durch den launch_handler-Manifestfeldwert client_mode gekennzeichnet ist.

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.substr(1);
        audio.play();
      }
    }
  });
}

Dieser Code wird in die PWA integriert und beim Laden der App ausgeführt, wenn sie gestartet wird. Die Rückruffunktion von window.launchQueue.setConsumer() extrahiert den Suchparameter aus der LaunchParams.targetURL und verwendet ihn, falls ein track-Parameter gefunden wird, um ein <audio>-Element's src zu füllen und den Audiotrack abzuspielen, auf den er verweist.

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

Spezifikationen

Specification
Web App Launch Handler API # launchqueue-interface

Browser-Kompatibilität

BCD tables only load in the browser