Un guide complet sur l'API de Présentation Frontend, axé sur la gestion multi-écrans pour créer des expériences utilisateur engageantes et efficaces sur divers appareils et dans des contextes mondiaux.
Gestion de l'affichage avec l'API de Présentation Frontend : Configuration multi-écrans pour les applications globales
Dans le monde interconnecté d'aujourd'hui, les applications web ne sont plus confinées à une seule fenêtre de navigateur. L'API de Présentation Frontend offre aux développeurs la puissante capacité d'étendre leurs applications sur plusieurs écrans, ouvrant une multitude d'opportunités pour des expériences utilisateur améliorées. Ce guide explorera les subtilités de l'API de Présentation, en se concentrant spécifiquement sur la configuration multi-écrans, et en fournissant des exemples pratiques pertinents pour un public mondial.
Comprendre l'API de Présentation
L'API de Présentation est un standard du web qui permet aux applications web d'utiliser un affichage secondaire, ou écran de présentation, pour montrer un contenu différent de l'affichage principal. C'est particulièrement utile dans des scénarios tels que :
- Salles de conférence : Partager des présentations d'un ordinateur portable vers un projecteur.
- Bornes de vente : Afficher des informations sur les produits sur un grand écran pendant qu'un utilisateur interagit avec un écran tactile plus petit.
- Affichage dynamique : Diffuser du contenu dynamique sur plusieurs écrans dans les espaces publics.
- Jeux vidéo : Étendre l'expérience de jeu à un écran secondaire pour une immersion accrue ou pour fournir des informations supplémentaires.
- Contextes éducatifs : Afficher du matériel pédagogique sur un grand écran pendant que les étudiants travaillent sur des appareils individuels.
L'API s'articule autour des concepts clés suivants :
- PresentationRequest : Un objet utilisé pour initier une session de présentation.
- PresentationConnection : Un objet représentant la connexion entre la page de contrôle et la page de présentation.
- PresentationReceiver : Un objet sur la page de présentation qui reçoit les messages de la page de contrôle.
Mise en place de la configuration multi-écrans
La première étape pour utiliser l'API de Présentation est de détecter les écrans disponibles et d'initier une session de présentation. Voici une description du processus :
1. Détection des écrans disponibles
La méthode navigator.presentation.getAvailability() renvoie une promesse qui se résout avec un objet PresentationAvailability. Cet objet indique si un écran de présentation est actuellement disponible.
navigator.presentation.getAvailability()
.then(function(availability) {
if (availability.value) {
console.log('Presentation display is available.');
} else {
console.log('Presentation display is not available.');
}
availability.onchange = function() {
if (availability.value) {
console.log('Presentation display became available.');
} else {
console.log('Presentation display became unavailable.');
}
};
});
Cet extrait de code vérifie si un écran de présentation est disponible et écoute les changements de sa disponibilité. Il est important de gérer l'événement onchange pour réagir dynamiquement aux changements de disponibilité des écrans de présentation.
2. Lancement d'une session de présentation
Pour démarrer une présentation, créez un objet PresentationRequest, en fournissant l'URL de la page de présentation.
let presentationRequest = new PresentationRequest(['presentation.html']);
presentationRequest.start()
.then(function(connection) {
console.log('Presentation started successfully.');
// Handle the presentation connection
connection.onmessage = function(event) {
console.log('Received message:', event.data);
};
connection.onclose = function() {
console.log('Presentation closed.');
};
connection.onerror = function(event) {
console.error('Presentation error:', event.error);
};
})
.catch(function(error) {
console.error('Failed to start presentation:', error);
});
Ce code initialise une session de présentation en utilisant presentation.html comme contenu à afficher sur l'écran secondaire. Il établit ensuite une connexion et met en place des écouteurs d'événements pour les messages, la fermeture et les erreurs.
3. La page de présentation (PresentationReceiver)
La page de présentation doit être préparée à recevoir des messages de la page de contrôle. Ceci est réalisé à l'aide de l'objet PresentationReceiver.
navigator.presentation.receiver.connectionList.then(function(connectionList) {
connectionList.connections.forEach(function(connection) {
console.log('Received connection:', connection);
connection.onmessage = function(event) {
document.body.innerHTML = '' + event.data + '
';
};
});
connectionList.onconnectionavailable = function(event) {
let connection = event.connection;
console.log('New connection available:', connection);
connection.onmessage = function(event) {
document.body.innerHTML = '' + event.data + '
';
};
};
});
Cet extrait de code écoute les connexions entrantes sur la page du récepteur de présentation et gère les messages reçus de la page de contrôle, mettant à jour le contenu de l'écran de présentation en conséquence.
Configuration multi-écrans avancée
Au-delà des fonctionnalités de présentation de base, l'API de Présentation permet des configurations multi-écrans plus complexes. Voici quelques techniques avancées :
1. Sélection d'un écran spécifique
L'API de Présentation ne fournit pas directement un moyen d'énumérer les écrans disponibles et d'en sélectionner un spécifique. Cependant, vous pouvez utiliser le constructeur PresentationRequest avec un tableau d'URL. L'agent utilisateur présentera alors un sélecteur à l'utilisateur, lui permettant de choisir quel écran utiliser.
2. Mises à jour dynamiques du contenu
La méthode PresentationConnection.postMessage() permet une communication en temps réel entre la page de contrôle et la page de présentation. Cela permet des mises à jour dynamiques du contenu de la présentation basées sur les interactions de l'utilisateur ou les changements de données.
// Sending a message from the controlling page
connection.postMessage('Hello, presentation display!');
// Receiving the message on the presentation page
navigator.presentation.receiver.connectionList.then(function(connectionList) {
connectionList.connections.forEach(function(connection) {
connection.onmessage = function(event) {
document.body.innerHTML = '' + event.data + '
';
};
});
});
Cet exemple montre l'envoi d'un simple message texte de la page de contrôle à la page de présentation, qui met ensuite à jour son contenu.
3. Gestion des différentes résolutions et formats d'image
Lors de la présentation de contenu sur plusieurs écrans, il est crucial de tenir compte des différentes résolutions et formats d'image des écrans. Utilisez des media queries CSS et des mises en page flexibles pour vous assurer que votre contenu s'adapte avec élégance à diverses tailles d'affichage. Envisagez d'utiliser des unités de viewport (vw, vh, vmin, vmax) pour mettre à l'échelle les éléments proportionnellement à la taille de l'écran.
/* Example CSS for handling different screen sizes */
@media (min-aspect-ratio: 16/9) {
.content {
width: 80vw;
height: 90vh;
}
}
@media (max-aspect-ratio: 4/3) {
.content {
width: 90vw;
height: 75vh;
}
}
Cet exemple CSS utilise des media queries pour ajuster les dimensions d'un élément de contenu en fonction du format d'image de l'écran.
4. Internationalisation et localisation
Pour les applications globales, il est essentiel de prendre en compte l'internationalisation (i18n) et la localisation (l10n). Utilisez les balises de langue appropriées dans votre HTML, fournissez des traductions pour tout le contenu textuel et formatez les dates, les nombres et les devises en fonction des paramètres régionaux de l'utilisateur. L'API d'internationalisation (Intl) en JavaScript peut être très utile pour cela.
// Formatting a number according to a specific locale
let number = 1234567.89;
let formattedNumber = new Intl.NumberFormat('de-DE').format(number); // Output: 1.234.567,89
// Formatting a date according to a specific locale
let date = new Date();
let formattedDate = new Intl.DateTimeFormat('ja-JP').format(date); // Output: 2023/10/27
Ces exemples montrent comment formater les nombres et les dates selon différentes locales à l'aide de l'API Intl.
5. Considérations sur l'accessibilité
Assurez-vous que vos applications multi-écrans sont accessibles aux utilisateurs handicapés. Fournissez un texte alternatif pour les images, utilisez du HTML sémantique et assurez-vous que votre application est navigable au clavier. Pensez à utiliser les attributs ARIA pour améliorer l'accessibilité du contenu dynamique.
Exemples pratiques pour les applications globales
Voici quelques exemples pratiques de la manière dont l'API de Présentation peut être utilisée dans des applications globales :
- Présentations de conférences internationales : Une application web qui permet aux présentateurs de partager des diapositives sur un projecteur tout en consultant les notes du présentateur et en gérant la présentation sur leur ordinateur portable. L'application devrait prendre en charge plusieurs langues et permettre aux présentateurs de personnaliser la mise en page de la présentation pour différentes tailles d'écran.
- Bornes de vente mondiales : Une application de borne qui affiche des informations sur les produits sur un grand écran tout en permettant aux utilisateurs de parcourir les produits et d'effectuer des achats sur un écran tactile. L'application devrait prendre en charge plusieurs devises, langues et méthodes de paiement.
- Affichage dynamique multilingue : Un système d'affichage dynamique qui diffuse du contenu dynamique, tel que les titres des actualités, les mises à jour météorologiques et les publicités, sur plusieurs écrans dans les espaces publics. Le contenu devrait être automatiquement traduit dans la langue locale de chaque écran.
- Tableau blanc collaboratif pour les équipes distantes : Une application de tableau blanc basée sur le web permettant à des équipes géographiquement dispersées de collaborer en temps réel. Un écran secondaire pourrait afficher une vue agrandie d'une zone spécifique, ou présenter du matériel de référence supplémentaire.
Exemple de code : une présentation simple avec des mises à jour dynamiques
Voici un exemple de code complet montrant une présentation simple avec des mises à jour dynamiques :
Page de contrôle (index.html) :
Presentation API Example
Controlling Page
Page de présentation (presentation.html) :
Presentation Display
Presentation Display
Cet exemple crée une simple page de contrôle avec un bouton pour démarrer la présentation et une zone de saisie de texte et un bouton pour envoyer des messages à l'écran de présentation. L'écran de présentation reçoit les messages et met à jour son contenu en conséquence.
Dépannage des problèmes courants
- Écran de présentation non détecté : Assurez-vous qu'un écran secondaire est connecté et activé dans les paramètres du système d'exploitation. Vérifiez la compatibilité du navigateur et mettez-le à jour vers la dernière version.
- La présentation ne démarre pas : Vérifiez que l'URL de la présentation est correcte et accessible. Recherchez toute erreur dans la console JavaScript.
- Messages non reçus : Assurez-vous que la
PresentationConnectionest correctement établie et que l'écouteur d'événementsonmessageest correctement configuré à la fois sur la page de contrôle et sur la page de présentation. - Problèmes de Cross-Origin : Si la page de contrôle et la page de présentation sont hébergées sur des domaines différents, assurez-vous que le CORS (Cross-Origin Resource Sharing) est correctement configuré pour permettre la communication entre les origines.
L'avenir de l'API de Présentation
L'API de Présentation est une technologie en constante évolution. Les futures améliorations pourraient inclure :
- Une meilleure énumération et sélection des écrans.
- Un contrôle plus sophistiqué de la mise en page et du style de la présentation.
- Des fonctionnalités de sécurité améliorées.
- L'intégration avec d'autres API web, telles que WebXR pour des expériences de réalité augmentée et virtuelle.
Conclusion
L'API de Présentation Frontend fournit un mécanisme puissant pour étendre les applications web sur plusieurs écrans, permettant un large éventail d'expériences utilisateur innovantes. En comprenant les concepts fondamentaux de l'API et en suivant les meilleures pratiques décrites dans ce guide, les développeurs peuvent créer des applications multi-écrans engageantes et efficaces pour un public mondial. Des présentations de conférences internationales à l'affichage dynamique multilingue, les possibilités sont infinies. Adoptez la puissance de l'API de Présentation et libérez le potentiel des applications web multi-écrans.