Launch Handler API

Limited availability

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

We'd love to hear more about your role and the company you work for
Please help us by answering a few questions.

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
launchQueue
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.

Siehe auch