Launch Handler API
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig, bevor Sie diese produktiv verwenden.
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:
"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 ObjektsLaunchParams
einfügen, das in die Rückruffunktion vonwindow.launchQueue.setConsumer()
übergeben wird. Wie Sie unten sehen werden, erlaubt dies Ihnen, benutzerdefinierte Start-Funktionalität für Ihre App einzurichten. -
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. -
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ährendnavigate-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 vonsetConsumer()
eineLaunchParams
-Objektinstanz übergeben. LaunchQueue
-
Wenn eine progressive Web-App (PWA) mit einem
launch_handler
client_mode
-Wert vonfocus-existing
,navigate-new
odernavigate-existing
gestartet wird, bietetLaunchQueue
Zugriff auf Funktionen, die die Implementierung von benutzerdefinierten Start-Navigationsprozessen in der PWA ermöglichen. Diese Funktionalität wird gesteuert durch die Eigenschaften desLaunchParams
-Objekts, das in die Rückruffunktion vonsetConsumer()
ü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 denlaunch_handler
-Manifestfeldwertclient_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