Signatur
Beschreibung
Die Eigenschaft PresentationConnection.id gehört zur Presentation API. Sie gibt einen DOMString zurück, der die Präsentation eindeutig kennzeichnet, zu der die Verbindung gehört. Der Browser (User Agent) vergibt diese Kennung beim Start einer Präsentation über PresentationRequest.start(). Die Eigenschaft ist schreibgeschützt.
Wichtig ist die Kennung vor allem für das Wiederverbinden. Wenn die steuernde Seite neu geladen wird oder die Verbindung abbricht, kann man mit PresentationRequest.reconnect(id) wieder mit einer laufenden Präsentation verbinden. Dafür speichert man die id zusammen mit der url zum Beispiel in localStorage oder sessionStorage.
Auf der Seite, die präsentiert wird (dem Empfänger), haben alle Verbindungen in navigator.presentation.receiver.connectionList dieselbe Präsentations-id, wenn sie zur selben Präsentation gehören. Damit lassen sich Verbindungen zuordnen und in Protokollen unterscheiden.
Rückgabewert
DOMString. Sie wird vom Browser erzeugt und kann nicht geändert werden.Beispiele
Präsentation starten und ID auslesen
const request = new PresentationRequest(['https://example.com/praesentation.html']);
const starteButton = document.querySelector('#starten');
starteButton.addEventListener('click', async () => {
try {
// start() muss durch eine Benutzeraktion ausgelöst werden
const connection = await request.start();
console.log('Präsentations-ID:', connection.id);
console.log('Zustand:', connection.state);
} catch (err) {
console.error('Start fehlgeschlagen:', err.name, err.message);
}
});ID speichern und nach dem Neuladen wieder verbinden
const url = 'https://example.com/praesentation.html';
const request = new PresentationRequest([url]);
const merkeVerbindung = (connection) => {
localStorage.setItem('presentationId', connection.id);
connection.addEventListener('terminate', () => {
localStorage.removeItem('presentationId');
});
};
// Nach dem Laden der Seite prüfen, ob eine Präsentation noch läuft
const gespeicherteId = localStorage.getItem('presentationId');
if (gespeicherteId) {
request.reconnect(gespeicherteId)
.then((connection) => {
console.log('Wieder verbunden mit', connection.id);
merkeVerbindung(connection);
})
.catch(() => localStorage.removeItem('presentationId'));
}
document.querySelector('#starten').addEventListener('click', async () => {
const connection = await request.start();
merkeVerbindung(connection);
});Empfängerseite: Verbindungen nach ID protokollieren
// Läuft in der präsentierten Seite (Empfänger)
if (navigator.presentation?.receiver) {
const list = await navigator.presentation.receiver.connectionList;
const protokolliere = (connection) => {
console.log(`Verbindung ${connection.id}: ${connection.state}`);
connection.addEventListener('message', (event) => {
console.log(`[${connection.id}] Nachricht:`, event.data);
});
};
list.connections.forEach(protokolliere);
list.addEventListener('connectionavailable', (event) => {
protokolliere(event.connection);
});
}// Wichtig · Fallstricke
- Kompatibilität: Die Presentation API ist experimentell. Sie wird im Wesentlichen nur von Chromium-basierten Browsern unterstützt (teilweise nur auf Desktop oder Android). Firefox und Safari unterstützen sie nicht. Prüfe vorher, ob sie verfügbar ist, zum Beispiel mit
'PresentationRequest' in window. - Sicherer Kontext: Die API steht nur über HTTPS zur Verfügung.
- Das Format der
idlegt der Browser fest (häufig eine UUID). Werte sie nicht inhaltlich aus, sondern nutze sie nur als undurchsichtige Kennung. - Nach dem Ereignis
terminateist die ID wertlos.reconnect()schlägt dann mitNotFoundErrorfehl. Gespeicherte IDs solltest du deshalb aufräumen. - Ein
reconnect()funktioniert nur mit derselben Präsentations-URL, mit der die Präsentation gestartet wurde. Speichere deshalb die ID und die URL zusammen.