Frontend Presentation API Display-Management: Multi-Display-Konfiguration für globale Anwendungen

In der heutigen vernetzten Welt sind Webanwendungen nicht mehr auf ein einziges Browserfenster beschränkt. Die Frontend Presentation API bietet Entwicklern die leistungsstarke Möglichkeit, ihre Anwendungen auf mehrere Bildschirme auszudehnen, was eine Fülle von Möglichkeiten für verbesserte Benutzererfahrungen eröffnet. Dieser Leitfaden wird die Feinheiten der Presentation API untersuchen, sich speziell auf die Multi-Display-Konfiguration konzentrieren und praktische Beispiele liefern, die für ein globales Publikum relevant sind.

Verständnis der Presentation API

Die Presentation API ist ein Webstandard, der es Webanwendungen ermöglicht, einen sekundären Bildschirm oder Präsentationsbildschirm zu verwenden, um Inhalte anzuzeigen, die sich vom primären Bildschirm unterscheiden. Dies ist besonders nützlich in Szenarien wie:

• Konferenzräume: Teilen von Präsentationen von einem Laptop auf einen Projektor.
• Einzelhandelskioske: Anzeige von Produktinformationen auf einem großen Bildschirm, während ein Benutzer mit einem kleineren Touchscreen interagiert.
• Digital Signage: Übertragung dynamischer Inhalte über mehrere Bildschirme im öffentlichen Raum.
• Gaming: Erweiterung des Spielerlebnisses auf einen zweiten Bildschirm für eine verbesserte Immersion oder die Bereitstellung zusätzlicher Informationen.
• Bildungseinrichtungen: Anzeige von Lernmaterialien auf einem großen Bildschirm, während Schüler an einzelnen Geräten arbeiten.

Die API dreht sich um die folgenden Schlüsselkonzepte:

• PresentationRequest: Ein Objekt, das zum Initiieren einer Präsentationssitzung verwendet wird.
• PresentationConnection: Ein Objekt, das die Verbindung zwischen der steuernden Seite und der präsentierenden Seite darstellt.
• PresentationReceiver: Ein Objekt auf der präsentierenden Seite, das Nachrichten von der steuernden Seite empfängt.

Einrichten der Multi-Display-Konfiguration

Der erste Schritt zur Nutzung der Presentation API ist die Erkennung verfügbarer Bildschirme und die Initiierung einer Präsentationssitzung. Hier ist eine Aufschlüsselung des Prozesses:

1. Erkennen verfügbarer Displays

Die Methode navigator.presentation.getAvailability() gibt ein Promise zurück, das mit einem PresentationAvailability-Objekt aufgelöst wird. Dieses Objekt gibt an, ob ein Präsentationsbildschirm derzeit verfügbar ist.

            
navigator.presentation.getAvailability()
  .then(function(availability) {
    if (availability.value) {
      console.log('Ein Präsentationsbildschirm ist verfügbar.');
    } else {
      console.log('Kein Präsentationsbildschirm verfügbar.');
    }

    availability.onchange = function() {
      if (availability.value) {
        console.log('Ein Präsentationsbildschirm wurde verfügbar.');
      } else {
        console.log('Ein Präsentationsbildschirm wurde nicht mehr verfügbar.');
      }
    };
  });

            

              
                Copy
              
            
          

Dieser Codeausschnitt prüft, ob ein Präsentationsbildschirm verfügbar ist, und lauscht auf Änderungen seiner Verfügbarkeit. Es ist wichtig, das onchange-Ereignis zu behandeln, um dynamisch auf Änderungen der Verfügbarkeit von Präsentationsbildschirmen zu reagieren.

2. Initiieren einer Präsentationssitzung

Um eine Präsentation zu starten, erstellen Sie ein PresentationRequest-Objekt und geben die URL der Präsentationsseite an.

            
let presentationRequest = new PresentationRequest(['presentation.html']);

presentationRequest.start()
  .then(function(connection) {
    console.log('Präsentation erfolgreich gestartet.');
    // Die Präsentationsverbindung handhaben
    connection.onmessage = function(event) {
      console.log('Nachricht empfangen:', event.data);
    };
    connection.onclose = function() {
      console.log('Präsentation geschlossen.');
    };
    connection.onerror = function(event) {
      console.error('Präsentationsfehler:', event.error);
    };
  })
  .catch(function(error) {
    console.error('Fehler beim Starten der Präsentation:', error);
  });

            

              
                Copy
              
            
          

Dieser Code initialisiert eine Präsentationssitzung mit presentation.html als Inhalt, der auf dem sekundären Bildschirm angezeigt werden soll. Er stellt dann eine Verbindung her und richtet Event-Listener für Nachrichten, das Schließen und Fehler ein.

3. Die Präsentationsseite (PresentationReceiver)

Die Präsentationsseite muss darauf vorbereitet sein, Nachrichten von der steuernden Seite zu empfangen. Dies wird mit dem PresentationReceiver-Objekt erreicht.

            
navigator.presentation.receiver.connectionList.then(function(connectionList) {
  connectionList.connections.forEach(function(connection) {
    console.log('Verbindung empfangen:', connection);
    connection.onmessage = function(event) {
      document.body.innerHTML = '
' + event.data + '
';
    };
  });

  connectionList.onconnectionavailable = function(event) {
    let connection = event.connection;
    console.log('Neue Verbindung verfügbar:', connection);
    connection.onmessage = function(event) {
      document.body.innerHTML = '
' + event.data + '
';
    };
  };
});

            

              
                Copy
              
            
          

Dieser Codeausschnitt lauscht auf eingehende Verbindungen auf der Präsentationsempfängerseite und verarbeitet Nachrichten, die von der steuernden Seite empfangen werden, wobei der Inhalt des Präsentationsbildschirms entsprechend aktualisiert wird.

Erweiterte Multi-Display-Konfiguration

Über die grundlegende Präsentationsfunktionalität hinaus ermöglicht die Presentation API komplexere Multi-Display-Konfigurationen. Hier sind einige fortgeschrittene Techniken:

1. Auswahl eines bestimmten Displays

Die Presentation API bietet keine direkte Möglichkeit, verfügbare Bildschirme aufzulisten und einen bestimmten auszuwählen. Sie können jedoch den PresentationRequest-Konstruktor mit einem Array von URLs verwenden. Der User-Agent zeigt dem Benutzer dann eine Auswahl an, die es ihm ermöglicht, den zu verwendenden Bildschirm auszuwählen.

2. Dynamische Inhaltsaktualisierungen

Die Methode PresentationConnection.postMessage() ermöglicht die Echtzeitkommunikation zwischen der steuernden Seite und der Präsentationsseite. Dies ermöglicht dynamische Aktualisierungen des Präsentationsinhalts basierend auf Benutzerinteraktionen oder Datenänderungen.

            
// Senden einer Nachricht von der steuernden Seite
connection.postMessage('Hallo, Präsentationsbildschirm!');

// Empfangen der Nachricht auf der Präsentationsseite
navigator.presentation.receiver.connectionList.then(function(connectionList) {
  connectionList.connections.forEach(function(connection) {
    connection.onmessage = function(event) {
      document.body.innerHTML = '
' + event.data + '
';
    };
  });
});

            

              
                Copy
              
            
          

Dieses Beispiel demonstriert das Senden einer einfachen Textnachricht von der steuernden Seite zur Präsentationsseite, die dann ihren Inhalt aktualisiert.

3. Umgang mit unterschiedlichen Bildschirmauflösungen und Seitenverhältnissen

Bei der Präsentation von Inhalten auf mehreren Bildschirmen ist es entscheidend, die unterschiedlichen Auflösungen und Seitenverhältnisse der Bildschirme zu berücksichtigen. Verwenden Sie CSS Media Queries und flexible Layouts, um sicherzustellen, dass sich Ihre Inhalte an verschiedene Bildschirmgrößen anpassen. Erwägen Sie die Verwendung von Viewport-Einheiten (vw, vh, vmin, vmax), um Elemente proportional zur Bildschirmgröße zu skalieren.

            
/* Beispiel-CSS für den Umgang mit verschiedenen Bildschirmgrößen */
@media (min-aspect-ratio: 16/9) {
  .content {
    width: 80vw;
    height: 90vh;
  }
}

@media (max-aspect-ratio: 4/3) {
  .content {
    width: 90vw;
    height: 75vh;
  }
}

            

              
                Copy
              
            
          

Dieses CSS-Beispiel verwendet Media Queries, um die Abmessungen eines Inhaltselements basierend auf dem Seitenverhältnis des Bildschirms anzupassen.

4. Internationalisierung und Lokalisierung

Für globale Anwendungen ist es unerlässlich, Internationalisierung (i18n) und Lokalisierung (l10n) zu berücksichtigen. Verwenden Sie entsprechende Sprach-Tags in Ihrem HTML, stellen Sie Übersetzungen für alle Textinhalte bereit und formatieren Sie Daten, Zahlen und Währungen entsprechend der Ländereinstellung des Benutzers. Die Internationalization API (Intl) in JavaScript kann hierbei sehr hilfreich sein.

            
// Formatierung einer Zahl nach einer bestimmten Ländereinstellung
let number = 1234567.89;
let formattedNumber = new Intl.NumberFormat('de-DE').format(number); // Ausgabe: 1.234.567,89

// Formatierung eines Datums nach einer bestimmten Ländereinstellung
let date = new Date();
let formattedDate = new Intl.DateTimeFormat('ja-JP').format(date); // Ausgabe: 2023/10/27

            

              
                Copy
              
            
          

Diese Beispiele zeigen, wie Zahlen und Daten mit der Intl API für verschiedene Ländereinstellungen formatiert werden.

5. Überlegungen zur Barrierefreiheit

Stellen Sie sicher, dass Ihre Multi-Display-Anwendungen für Benutzer mit Behinderungen zugänglich sind. Stellen Sie Alternativtexte für Bilder bereit, verwenden Sie semantisches HTML und stellen Sie sicher, dass Ihre Anwendung über die Tastatur navigierbar ist. Erwägen Sie die Verwendung von ARIA-Attributen, um die Zugänglichkeit dynamischer Inhalte zu verbessern.

Praktische Beispiele für globale Anwendungen

Hier sind einige praktische Beispiele, wie die Presentation API in globalen Anwendungen eingesetzt werden kann:

• Internationale Konferenzpräsentationen: Eine Webanwendung, die es Präsentatoren ermöglicht, Folien auf einem Projektor zu teilen, während sie auf ihrem Laptop Sprechernotizen einsehen und die Präsentation verwalten. Die Anwendung sollte mehrere Sprachen unterstützen und es den Präsentatoren ermöglichen, das Präsentationslayout für verschiedene Bildschirmgrößen anzupassen.
• Globale Einzelhandelskioske: Eine Kioskanwendung, die Produktinformationen auf einem großen Bildschirm anzeigt, während Benutzer auf einem Touchscreen Produkte durchsuchen und Käufe tätigen können. Die Anwendung sollte mehrere Währungen, Sprachen und Zahlungsmethoden unterstützen.
• Mehrsprachiges Digital Signage: Ein Digital Signage-System, das dynamische Inhalte wie Schlagzeilen, Wetter-Updates und Werbung auf mehreren Bildschirmen im öffentlichen Raum anzeigt. Der Inhalt sollte automatisch in die Landessprache jedes Displays übersetzt werden.
• Kollaboratives Whiteboarding für Remote-Teams: Eine webbasierte Whiteboard-Anwendung, die es geografisch verteilten Teams ermöglicht, in Echtzeit zusammenzuarbeiten. Ein zweiter Bildschirm könnte eine vergrößerte Ansicht eines bestimmten Bereichs zeigen oder zusätzliches Referenzmaterial präsentieren.

Codebeispiel: Eine einfache Präsentation mit dynamischen Updates

Hier ist ein vollständiges Codebeispiel, das eine einfache Präsentation mit dynamischen Updates demonstriert:

Steuernde Seite (index.html):

            
<!DOCTYPE html>
<html>
<head>
  <title>Presentation API Beispiel</title>
</head>
<body>
  <h1>Steuernde Seite</h1>
  <button id="startButton">Präsentation starten</button>
  <input type="text" id="messageInput" placeholder="Nachricht eingeben">
  <button id="sendMessageButton">Nachricht senden</button>

  <script>
    let connection;
    let presentationRequest = new PresentationRequest(['presentation.html']);

    document.getElementById('startButton').addEventListener('click', function() {
      presentationRequest.start()
        .then(function(conn) {
          connection = conn;
          console.log('Präsentation erfolgreich gestartet.');
          connection.onmessage = function(event) {
            console.log('Nachricht empfangen:', event.data);
          };
          connection.onclose = function() {
            console.log('Präsentation geschlossen.');
          };
          connection.onerror = function(event) {
            console.error('Präsentationsfehler:', event.error);
          };
        })
        .catch(function(error) {
          console.error('Fehler beim Starten der Präsentation:', error);
        });
    });

    document.getElementById('sendMessageButton').addEventListener('click', function() {
      if (connection) {
        let message = document.getElementById('messageInput').value;
        connection.postMessage(message);
      } else {
        alert('Präsentation nicht gestartet.');
      }
    });
  </script>
</body>
</html>

            

              
                Copy
              
            
          

Präsentationsseite (presentation.html):

            
<!DOCTYPE html>
<html>
<head>
  <title>Präsentationsanzeige</title>
  <style>
    body {
      font-size: 2em;
      text-align: center;
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <h1>Präsentationsanzeige</h1>
  <div id="content"></div>

  <script>
    navigator.presentation.receiver.connectionList.then(function(connectionList) {
      connectionList.connections.forEach(function(connection) {
        console.log('Verbindung empfangen:', connection);
        connection.onmessage = function(event) {
          document.getElementById('content').innerText = event.data;
        };
      });

      connectionList.onconnectionavailable = function(event) {
        let connection = event.connection;
        console.log('Neue Verbindung verfügbar:', connection);
        connection.onmessage = function(event) {
          document.getElementById('content').innerText = event.data;
        };
      };
    });
  </script>
</body>
</html>

            

              
                Copy
              
            
          

Dieses Beispiel erstellt eine einfache steuernde Seite mit einer Schaltfläche zum Starten der Präsentation sowie einem Texteingabefeld und einer Schaltfläche zum Senden von Nachrichten an den Präsentationsbildschirm. Der Präsentationsbildschirm empfängt die Nachrichten und aktualisiert seinen Inhalt entsprechend.

Fehlerbehebung bei häufigen Problemen

• Präsentationsbildschirm nicht erkannt: Stellen Sie sicher, dass ein zweiter Bildschirm angeschlossen und in den Betriebssystemeinstellungen aktiviert ist. Überprüfen Sie die Browserkompatibilität und aktualisieren Sie auf die neueste Version.
• Präsentation startet nicht: Überprüfen Sie, ob die Präsentations-URL korrekt und erreichbar ist. Suchen Sie in der JavaScript-Konsole nach Fehlern.
• Nachrichten werden nicht empfangen: Stellen Sie sicher, dass die PresentationConnection ordnungsgemäß hergestellt wurde und der onmessage-Event-Listener sowohl auf der steuernden Seite als auch auf der Präsentationsseite korrekt konfiguriert ist.
• Cross-Origin-Probleme: Wenn die steuernde Seite und die Präsentationsseite auf verschiedenen Domains gehostet werden, stellen Sie sicher, dass CORS (Cross-Origin Resource Sharing) ordnungsgemäß konfiguriert ist, um die Kommunikation zwischen den Ursprüngen zu ermöglichen.

Die Zukunft der Presentation API

Die Presentation API ist eine sich ständig weiterentwickelnde Technologie. Zukünftige Erweiterungen könnten umfassen:

• Verbesserte Auflistung und Auswahl von Bildschirmen.
• Umfangreichere Kontrolle über das Präsentationslayout und -styling.
• Erweiterte Sicherheitsfunktionen.
• Integration mit anderen Web-APIs, wie z.B. WebXR für Augmented- und Virtual-Reality-Erlebnisse.

Fazit

Die Frontend Presentation API bietet einen leistungsstarken Mechanismus zur Erweiterung von Webanwendungen über mehrere Bildschirme hinweg und ermöglicht eine breite Palette innovativer Benutzererfahrungen. Indem Entwickler die Kernkonzepte der API verstehen und die in diesem Leitfaden beschriebenen Best Practices befolgen, können sie ansprechende und effektive Multi-Display-Anwendungen für ein globales Publikum erstellen. Von internationalen Konferenzpräsentationen bis hin zu mehrsprachigem Digital Signage sind die Möglichkeiten endlos. Nutzen Sie die Kraft der Presentation API und erschließen Sie das Potenzial von Multi-Display-Webanwendungen.