Frontend Presentation API skärmhantering: Konfiguration av flera skärmar för globala applikationer

I dagens uppkopplade värld är webbapplikationer inte längre begränsade till ett enda webbläsarfönster. Frontend Presentation API ger utvecklare den kraftfulla möjligheten att utöka sina applikationer över flera skärmar, vilket öppnar upp en mängd möjligheter för förbättrade användarupplevelser. Denna guide kommer att utforska detaljerna i Presentation API, med särskilt fokus på konfiguration av flera skärmar, och ge praktiska exempel som är relevanta för en global publik.

Förstå Presentation API

Presentation API är en webbstandard som gör det möjligt för webbapplikationer att använda en sekundär skärm, eller presentationsskärm, för att visa innehåll som skiljer sig från den primära skärmen. Detta är särskilt användbart i scenarier som:

• Konferensrum: Dela presentationer från en bärbar dator till en projektor.
• Butikskiosker: Visa produktinformation på en stor skärm medan en användare interagerar med en mindre pekskärm.
• Digital skyltning: Sända dynamiskt innehåll över flera skärmar på offentliga platser.
• Spel: Utöka spelupplevelsen till en sekundär skärm för ökad inlevelse eller för att ge ytterligare information.
• Utbildningsmiljöer: Visa läromedel på en stor skärm medan elever arbetar på enskilda enheter.

API:et kretsar kring följande nyckelkoncept:

• PresentationRequest: Ett objekt som används för att initiera en presentationssession.
• PresentationConnection: Ett objekt som representerar anslutningen mellan den styrande sidan och den presenterande sidan.
• PresentationReceiver: Ett objekt på den presenterande sidan som tar emot meddelanden från den styrande sidan.

Konfigurera för flera skärmar

Det första steget för att använda Presentation API är att upptäcka tillgängliga skärmar och initiera en presentationssession. Här är en genomgång av processen:

1. Upptäcka tillgängliga skärmar

Metoden navigator.presentation.getAvailability() returnerar ett promise som löses med ett PresentationAvailability-objekt. Detta objekt indikerar om en presentationsskärm för närvarande är tillgänglig.

            
navigator.presentation.getAvailability()
  .then(function(availability) {
    if (availability.value) {
      console.log('Presentationsskärm är tillgänglig.');
    } else {
      console.log('Presentationsskärm är inte tillgänglig.');
    }

    availability.onchange = function() {
      if (availability.value) {
        console.log('Presentationsskärm blev tillgänglig.');
      } else {
        console.log('Presentationsskärm blev otillgänglig.');
      }
    };
  });

            

              
                Copy
              
            
          

Detta kodstycke kontrollerar om en presentationsskärm är tillgänglig och lyssnar efter förändringar i dess tillgänglighet. Det är viktigt att hantera onchange-händelsen för att reagera dynamiskt på förändringar i tillgängligheten av presentationsskärmar.

2. Initiera en presentationssession

För att starta en presentation, skapa ett PresentationRequest-objekt och ange URL:en till presentationssidan.

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

presentationRequest.start()
  .then(function(connection) {
    console.log('Presentationen startade framgångsrikt.');
    // Hantera presentationsanslutningen
    connection.onmessage = function(event) {
      console.log('Meddelande mottaget:', event.data);
    };
    connection.onclose = function() {
      console.log('Presentationen stängdes.');
    };
    connection.onerror = function(event) {
      console.error('Presentationsfel:', event.error);
    };
  })
  .catch(function(error) {
    console.error('Misslyckades med att starta presentationen:', error);
  });

            

              
                Copy
              
            
          

Denna kod initierar en presentationssession med presentation.html som innehåll att visa på den sekundära skärmen. Den etablerar sedan en anslutning och sätter upp händelselyssnare för meddelanden, stängning och fel.

3. Presentationssidan (PresentationReceiver)

Presentationssidan måste vara förberedd för att ta emot meddelanden från den styrande sidan. Detta uppnås med hjälp av PresentationReceiver-objektet.

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

  connectionList.onconnectionavailable = function(event) {
    let connection = event.connection;
    console.log('Ny anslutning tillgänglig:', connection);
    connection.onmessage = function(event) {
      document.body.innerHTML = '
' + event.data + '
';
    };
  };
});

            

              
                Copy
              
            
          

Detta kodstycke lyssnar efter inkommande anslutningar på presentationsmottagarsidan och hanterar meddelanden som tas emot från den styrande sidan, och uppdaterar innehållet på presentationsskärmen därefter.

Avancerad konfiguration för flera skärmar

Utöver grundläggande presentationsfunktionalitet tillåter Presentation API mer komplexa konfigurationer med flera skärmar. Här är några avancerade tekniker:

1. Välja en specifik skärm

Presentation API ger inte direkt ett sätt att räkna upp tillgängliga skärmar och välja en specifik. Du kan dock använda PresentationRequest-konstruktorn med en array av URL:er. Användaragenten kommer då att presentera en väljare för användaren, vilket låter dem välja vilken skärm som ska användas.

2. Dynamiska innehållsuppdateringar

Metoden PresentationConnection.postMessage() möjliggör realtidskommunikation mellan den styrande sidan och presentationssidan. Detta tillåter dynamiska uppdateringar av presentationsinnehållet baserat på användarinteraktioner eller dataförändringar.

            
// Skickar ett meddelande från den styrande sidan
connection.postMessage('Hej, presentationsskärm!');

// Tar emot meddelandet på presentationssidan
navigator.presentation.receiver.connectionList.then(function(connectionList) {
  connectionList.connections.forEach(function(connection) {
    connection.onmessage = function(event) {
      document.body.innerHTML = '
' + event.data + '
';
    };
  });
});

            

              
                Copy
              
            
          

Detta exempel demonstrerar hur man skickar ett enkelt textmeddelande från den styrande sidan till presentationssidan, som sedan uppdaterar sitt innehåll.

3. Hantera olika skärmupplösningar och bildförhållanden

När man presenterar innehåll på flera skärmar är det avgörande att ta hänsyn till skärmarnas olika upplösningar och bildförhållanden. Använd CSS media queries och flexibla layouter för att säkerställa att ditt innehåll anpassar sig elegant till olika skärmstorlekar. Överväg att använda viewport-enheter (vw, vh, vmin, vmax) för att skala element proportionellt mot skärmstorleken.

            
/* Exempel-CSS för att hantera olika skärmstorlekar */
@media (min-aspect-ratio: 16/9) {
  .content {
    width: 80vw;
    height: 90vh;
  }
}

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

            

              
                Copy
              
            
          

Detta CSS-exempel använder media queries för att justera dimensionerna på ett innehållselement baserat på skärmens bildförhållande.

4. Internationalisering och lokalisering

För globala applikationer är det viktigt att ta hänsyn till internationalisering (i18n) och lokalisering (l10n). Använd lämpliga språktaggar i din HTML, tillhandahåll översättningar för allt textinnehåll och formatera datum, siffror och valutor enligt användarens lokala inställningar. Internationalization API (Intl) i JavaScript kan vara mycket användbart för detta.

            
// Formaterar ett nummer enligt en specifik lokal
let number = 1234567.89;
let formattedNumber = new Intl.NumberFormat('de-DE').format(number); // Utskrift: 1.234.567,89

// Formaterar ett datum enligt en specifik lokal
let date = new Date();
let formattedDate = new Intl.DateTimeFormat('ja-JP').format(date); // Utskrift: 2023/10/27

            

              
                Copy
              
            
          

Dessa exempel visar hur man formaterar siffror och datum enligt olika lokaler med hjälp av Intl API.

5. Tillgänglighetsaspekter

Se till att dina applikationer för flera skärmar är tillgängliga för användare med funktionsnedsättningar. Tillhandahåll alternativ text för bilder, använd semantisk HTML och se till att din applikation kan navigeras med tangentbordet. Överväg att använda ARIA-attribut för att förbättra tillgängligheten för dynamiskt innehåll.

Praktiska exempel för globala applikationer

Här är några praktiska exempel på hur Presentation API kan användas i globala applikationer:

• Internationella konferenspresentationer: En webbapplikation som låter presentatörer dela bilder på en projektor medan de ser talarnoter och hanterar presentationen på sin bärbara dator. Applikationen bör stödja flera språk och låta presentatörer anpassa presentationslayouten för olika skärmstorlekar.
• Globala butikskiosker: En kioskapplikation som visar produktinformation på en stor skärm medan användare kan bläddra bland produkter och göra inköp på en pekskärm. Applikationen bör stödja flera valutor, språk och betalningsmetoder.
• Flerspråkig digital skyltning: Ett digitalt skyltsystem som visar dynamiskt innehåll, såsom nyhetsrubriker, väderuppdateringar och annonser, på flera skärmar på offentliga platser. Innehållet bör automatiskt översättas till det lokala språket för varje skärm.
• Samarbetsinriktad whiteboard för fjärrteam: En webbaserad whiteboardapplikation som låter geografiskt spridda team samarbeta i realtid. En sekundär skärm kan visa en inzoomad vy av ett specifikt område eller presentera ytterligare referensmaterial.

Kodexempel: En enkel presentation med dynamiska uppdateringar

Här är ett komplett kodexempel som demonstrerar en enkel presentation med dynamiska uppdateringar:

Styrande sida (index.html):

            
<!DOCTYPE html>
<html>
<head>
  <title>Exempel på Presentation API</title>
</head>
<body>
  <h1>Styrande sida</h1>
  <button id="startButton">Starta presentation</button>
  <input type="text" id="messageInput" placeholder="Skriv meddelande">
  <button id="sendMessageButton">Skicka meddelande</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('Presentationen startade framgångsrikt.');
          connection.onmessage = function(event) {
            console.log('Meddelande mottaget:', event.data);
          };
          connection.onclose = function() {
            console.log('Presentationen stängdes.');
          };
          connection.onerror = function(event) {
            console.error('Presentationsfel:', event.error);
          };
        })
        .catch(function(error) {
          console.error('Misslyckades med att starta presentationen:', error);
        });
    });

    document.getElementById('sendMessageButton').addEventListener('click', function() {
      if (connection) {
        let message = document.getElementById('messageInput').value;
        connection.postMessage(message);
      } else {
        alert('Presentationen är inte startad.');
      }
    });
  </script>
</body>
</html>

            

              
                Copy
              
            
          

Presentationssida (presentation.html):

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

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

      connectionList.onconnectionavailable = function(event) {
        let connection = event.connection;
        console.log('Ny anslutning tillgänglig:', connection);
        connection.onmessage = function(event) {
          document.getElementById('content').innerText = event.data;
        };
      };
    });
  </script>
</body>
</html>

            

              
                Copy
              
            
          

Detta exempel skapar en enkel styrande sida med en knapp för att starta presentationen och ett textfält och en knapp för att skicka meddelanden till presentationsskärmen. Presentationsskärmen tar emot meddelandena och uppdaterar sitt innehåll därefter.

Felsökning av vanliga problem

• Presentationsskärmen upptäcks inte: Se till att en sekundär skärm är ansluten och aktiverad i operativsystemets inställningar. Kontrollera webbläsarens kompatibilitet och uppdatera till den senaste versionen.
• Presentationen startar inte: Kontrollera att presentationens URL är korrekt och tillgänglig. Leta efter eventuella fel i JavaScript-konsolen.
• Meddelanden tas inte emot: Se till att PresentationConnection är korrekt etablerad och att onmessage-händelselyssnaren är korrekt konfigurerad på både den styrande sidan och presentationssidan.
• Cross-Origin-problem: Om den styrande sidan och presentationssidan finns på olika domäner, se till att CORS (Cross-Origin Resource Sharing) är korrekt konfigurerat för att tillåta kommunikation mellan ursprungen.

Framtiden för Presentation API

Presentation API är en teknik som ständigt utvecklas. Framtida förbättringar kan inkludera:

• Förbättrad uppräkning och val av skärmar.
• Mer sofistikerad kontroll över presentationslayout och stil.
• Förbättrade säkerhetsfunktioner.
• Integration med andra webb-API:er, såsom WebXR för förstärkt och virtuell verklighetsupplevelser.

Slutsats

Frontend Presentation API erbjuder en kraftfull mekanism för att utöka webbapplikationer över flera skärmar, vilket möjliggör ett brett spektrum av innovativa användarupplevelser. Genom att förstå API:ets kärnkoncept och följa de bästa metoderna som beskrivs i denna guide kan utvecklare skapa engagerande och effektiva applikationer för flera skärmar för en global publik. Från internationella konferenspresentationer till flerspråkig digital skyltning är möjligheterna oändliga. Omfamna kraften i Presentation API och frigör potentialen hos webbapplikationer för flera skärmar.