Launch Handler API

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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 es Entwicklern, zu steuern, wie eine progressive Web-App (PWA) gestartet wird – beispielsweise, ob sie ein bestehendes Fenster verwendet oder ein neues erstellt und wie die Ziel-Launch-URL der App behandelt wird.

Konzepte und Verwendung

Sie können das Startverhalten Ihrer App festlegen, indem Sie das Feld launch_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 zu welchem Ziel navigiert werden soll. Zum Beispiel:

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

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

focus-existing

Der zuletzt interagierte Browsing-Kontext in einem Web-App-Fenster wird gewählt, um den Start zu handhaben. Dies wird die Ziel-Launch-URL in der targetURL-Eigenschaft des LaunchParams-Objekts füllen, das in die Callback-Funktion von window.launchQueue.setConsumer() übergeben wird. Wie Sie unten sehen werden, können Sie damit eine benutzerdefinierte Start-Handhabungsfunktionalität für Ihre App festlegen.

Der zuletzt interagierte Browsing-Kontext in einem Web-App-Fenster wird zur Ziel-Launch-URL navigiert. Die Ziel-URL bleibt über window.launchQueue.setConsumer() verfügbar, um die Implementierung zusätzlicher benutzerdefinierter Starts und Navigations-Handhabung zu ermöglichen.

Ein neuer Browsing-Kontext wird in einem Web-App-Fenster erstellt, um die Ziel-Launch-URL zu laden. Die Ziel-URL bleibt über window.launchQueue.setConsumer() verfügbar, um die Implementierung zusätzlicher benutzerdefinierter Starts und Navigations-Handhabung zu ermöglichen.

auto

Die Benutzer-Agent entscheidet, was am besten für die Plattform 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 mehr Sinn in einem Desktop-Kontext machen könnte. Dies ist der Standardwert, der verwendet wird, wenn angegebene Werte ungültig sind.

Wenn focus-existing verwendet wird, können Sie Code innerhalb der Callback-Funktion von window.launchQueue.setConsumer() einschließen, um eine benutzerdefinierte Handhabung der targetURL zu ermöglichen.

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

Note: LaunchParams hat auch eine LaunchParams.files-Eigenschaft, die ein schreibgeschütztes Array von FileSystemHandle-Objekten zurückgibt, welche alle Dateien repräsentieren, die zusammen mit der Start-Navigation über die POST-Methode übergeben wurden. Dies ermöglicht die Implementierung einer benutzerdefinierten Dateihandhabung.

Schnittstellen

LaunchParams

Wird verwendet, wenn benutzerdefinierte Starts und Navigations-Handhabung in einer PWA implementiert werden. Wenn window.launchQueue.setConsumer() aufgerufen wird, um die Start- und Navigations-Handhabungsfunktionalität einzurichten, wird der Callback-Funktion 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 Funktionalitäten, die die Implementierung benutzerdefinierter Start- und Navigations-Handhabung in der PWA ermöglichen. Diese Funktionalität wird durch die Eigenschaften des LaunchParams-Objekts gesteuert, das an die Callback-Funktion setConsumer() übergeben wird.

Erweiterungen zu anderen Schnittstellen

window.launchQueue

Bietet Zugriff auf die LaunchQueue-Klasse, die es ermöglicht, eine benutzerdefinierte Start- und Navigations-Handhabung in einer progressiven Web-App (PWA) zu implementieren, wobei der Handhabungskontext durch den client_mode-Wert des launch_handler-Felds im Manifest signalisiert wird.

Beispiele

js
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 ist in der PWA enthalten und wird ausgeführt, wenn die App beim Start geladen wird. Die Callback-Funktion von window.launchQueue.setConsumer() extrahiert das Suchparameter aus der LaunchParams.targetURL und verwendet es, falls sie einen track-Parameter findet, um ein <audio>-Element mit src zu füllen und den Audio-Track abzuspielen, auf den dieser zeigt.

Siehe die Musicr 2.0 Demo-App für vollständigen, funktionierenden Code.

Spezifikationen

Specification
Web App Launch Handler API
# launchqueue-interface

Browser-Kompatibilität

Siehe auch