Nous pouvons créer facilement des applications et des sites Web en plein écran immersifs, mais comme pour toute activité sur le Web, il existe plusieurs façons de le faire. Cela est particulièrement important maintenant qu'un plus grand nombre de navigateurs prennent en charge une expérience de type "application Web installée" qui s'ouvre en plein écran.
Affichage de votre application ou de votre site en plein écran
Un utilisateur ou un développeur peut afficher une application Web en plein écran de plusieurs façons.
- Demander le passage en plein écran du navigateur en réponse à un geste de l'utilisateur
- Installez l'application sur l'écran d'accueil.
- Faux: masquez automatiquement la barre d'adresse.
Demander le passage en plein écran du navigateur en réponse à un geste de l'utilisateur
Toutes les plates-formes ne se valent pas. iOS Safari n'a pas d'API plein écran, contrairement à Chrome sur Android, Firefox et IE 11 ou version ultérieure. La plupart des applications que vous créez utilisent une combinaison de l'API JavaScript et des sélecteurs CSS fournis par la spécification plein écran. Voici les principales API JavaScript dont vous devez vous soucier lorsque vous créez une expérience plein écran:
element.requestFullscreen()(préfixé actuellement dans Chrome, Firefox et IE) affiche l'élément en mode plein écran.document.exitFullscreen()(préfixé actuellement dans Chrome, Firefox et IE. Firefox utilisecancelFullScreen()à la place) annule le mode plein écran.document.fullscreenElement(préfixé actuellement dans Chrome, Firefox et IE) renvoie la valeur "true" si l'un des éléments est en mode plein écran.
Lorsque votre application est en plein écran, vous n'avez plus accès aux commandes d'interface utilisateur du navigateur. Cela modifie la façon dont les utilisateurs interagissent avec votre expérience. Ils ne disposent pas des commandes de navigation standards, comme Avancer et Arrière, et ne possèdent pas de mécanisme de sortie correspondant au bouton d'actualisation. Il est important de répondre à ce scénario. Certains sélecteurs CSS vous permettent de modifier le style et la présentation de votre site lorsque le navigateur passe en mode plein écran.
<button id="goFS">Go fullscreen</button>
<script>
var goFS = document.getElementById('goFS');
goFS.addEventListener(
'click',
function () {
document.body.requestFullscreen();
},
false,
);
</script>
L'exemple ci-dessus est un peu artificiel ; j'ai masqué toute la complexité liée à l'utilisation des préfixes de fournisseur.
Le code réel est beaucoup plus complexe. Mozilla a créé un script très utile que vous pouvez utiliser pour activer/désactiver le mode plein écran. Comme vous pouvez le constater, la situation du préfixe de fournisseur est complexe et fastidieuse par rapport à l'API spécifiée. Même avec le code légèrement simplifié ci-dessous, il reste complexe.
function toggleFullScreen() {
var doc = window.document;
var docEl = doc.documentElement;
var requestFullScreen =
docEl.requestFullscreen ||
docEl.mozRequestFullScreen ||
docEl.webkitRequestFullScreen ||
docEl.msRequestFullscreen;
var cancelFullScreen =
doc.exitFullscreen ||
doc.mozCancelFullScreen ||
doc.webkitExitFullscreen ||
doc.msExitFullscreen;
if (
!doc.fullscreenElement &&
!doc.mozFullScreenElement &&
!doc.webkitFullscreenElement &&
!doc.msFullscreenElement
) {
requestFullScreen.call(docEl);
} else {
cancelFullScreen.call(doc);
}
}
Nous, développeurs Web, détestons la complexité. Le module Screenfull.js de Sindre Sorhus est une API abstraite de haut niveau que vous pouvez utiliser. Il unifie les deux préfixes d'API JavaScript et de fournisseur légèrement différents en une seule API cohérente.
Conseils concernant l'API plein écran
Affichage du document en plein écran
Il est naturel de penser que vous affichez l'élément du corps en plein écran, mais si vous utilisez un moteur de rendu basé sur WebKit ou Blink, vous constaterez qu'il a un effet étrange de réduction de la largeur du corps à la plus petite taille possible pour contenir tout le contenu. (Mozilla Gecko convient parfaitement).
Pour résoudre ce problème, utilisez l'élément du document au lieu de l'élément du corps:
document.documentElement.requestFullscreen();
Afficher un élément vidéo en plein écran
Mettre un élément vidéo en plein écran revient à mettre tout autre élément en plein écran. Vous appelez la méthode requestFullscreen au niveau de l'élément vidéo.
<video id="videoElement"></video>
<button id="goFS">Go Fullscreen</button>
<script>
var goFS = document.getElementById('goFS');
goFS.addEventListener(
'click',
function () {
var videoElement = document.getElementById('videoElement');
videoElement.requestFullscreen();
},
false,
);
</script>
Si l'attribut de commandes n'est pas défini pour votre élément <video>, l'utilisateur n'a aucun moyen de contrôler la vidéo une fois qu'elle est en plein écran. Pour ce faire, nous vous recommandons de disposer d'un conteneur de base qui encapsule la vidéo et les commandes que vous souhaitez montrer à l'utilisateur.
<div id="container">
<video></video>
<div>
<button>Play</button>
<button>Stop</button>
<button id="goFS">Go fullscreen</button>
</div>
</div>
<script>
var goFS = document.getElementById('goFS');
goFS.addEventListener(
'click',
function () {
var container = document.getElementById('container');
container.requestFullscreen();
},
false,
);
</script>
Cela vous offre beaucoup plus de flexibilité, car vous pouvez combiner l'objet conteneur avec le pseudo-sélecteur CSS (par exemple, pour masquer le bouton "goFS").
<style>
#goFS:-webkit-full-screen #goFS {
display: none;
}
#goFS:-moz-full-screen #goFS {
display: none;
}
#goFS:-ms-fullscreen #goFS {
display: none;
}
#goFS:fullscreen #goFS {
display: none;
}
</style>
Ces modèles vous permettent de détecter l'exécution du mode plein écran et d'adapter votre interface utilisateur en conséquence, par exemple:
- En fournissant un lien vers la page d'accueil
- En fournissant un mécanisme pour fermer les boîtes de dialogue ou revenir en arrière
Lancement d'une page en plein écran depuis l'écran d'accueil
Il n'est pas possible de lancer une page Web en plein écran lorsque l'utilisateur y accède. Les fournisseurs de navigateurs savent très bien qu'une expérience en plein écran à chaque chargement de page est gênante. L'utilisateur doit donc passer en mode plein écran. Les fournisseurs autorisent toutefois les utilisateurs à "installer" des applications, et cette installation indique au système d'exploitation que l'utilisateur souhaite lancer une application sur la plate-forme.
Sur les principales plates-formes mobiles, il est assez facile à implémenter à l'aide de balises Meta ou de fichiers manifestes, comme suit.
iOS
Depuis le lancement de l'iPhone, les utilisateurs peuvent installer des applications Web sur l'écran d'accueil et les lancer en tant qu'applications Web en plein écran.
<meta name="apple-mobile-web-app-capable" content="yes" />
Si le contenu est défini sur "yes", l'application Web s'exécute en mode plein écran. Sinon, ce n'est pas le cas. Par défaut, Safari est utilisé pour afficher le contenu Web. Vous pouvez déterminer si une page Web s'affiche en mode plein écran à l'aide de la propriété JavaScript booléenne window.navigator.standalone.
Apple
Chrome pour Android
L'équipe Chrome a récemment implémenté une fonctionnalité qui demande au navigateur de lancer la page en plein écran lorsque l'utilisateur l'a ajoutée à l'écran d'accueil. Il est semblable au modèle iOS pour Safari.
<meta name="mobile-web-app-capable" content="yes" />
Vous pouvez configurer votre application Web pour qu'une icône de raccourci d'application soit ajoutée à l'écran d'accueil d'un appareil et que l'application s'ouvre en "mode application" en plein écran via l'élément de menu "Ajouter à l'écran d'accueil" de Chrome pour Android.
Google Chrome
Il est préférable d'utiliser le fichier manifeste de l'application Web.
Fichier manifeste d'application Web (Chrome, Opera, Firefox, Samsung)
Le fichier manifeste pour les applications Web est un simple fichier JSON qui vous permet, en tant que développeur, de contrôler la manière dont votre application apparaît à l'utilisateur dans les zones où il s'attend à voir des applications (par exemple, l'écran d'accueil mobile), qui indique ce que l'utilisateur peut lancer et, surtout, comment il peut le faire. À l'avenir, le fichier manifeste vous donnera encore plus de contrôle sur votre application. Pour le moment, nous nous concentrons uniquement sur le lancement de votre application. Notamment :
- Indiquer au navigateur votre fichier manifeste
- Décrire le lancement
Une fois que le fichier manifeste a été créé et qu'il est hébergé sur votre site, il vous suffit d'ajouter une balise de lien depuis toutes les pages qui englobent votre application, comme suit:
<link rel="manifest" href="/manifest.json" />
Chrome accepte les fichiers manifestes depuis la version 38 pour Android (octobre 2014). Cela vous permet de contrôler comment votre application Web s'affiche lorsqu'elle est installée sur l'écran d'accueil (via les propriétés short_name, name et icons) et comment elle doit être lancée lorsque l'utilisateur clique sur l'icône de lancement (via start_url, display et orientation).
Vous trouverez un exemple de fichier manifeste ci-dessous. Elle n'affiche pas tout ce qui peut se trouver dans un fichier manifeste.
{
"short_name": "Kinlan's Amaze App",
"name": "Kinlan's Amazing Application ++",
"icons": [
{
"src": "launcher-icon-4x.png",
"sizes": "192x192",
"type": "image/png"
}
],
"start_url": "/index.html",
"display": "standalone",
"orientation": "landscape"
}
Cette fonctionnalité est entièrement progressive et vous permet de créer des expériences plus intégrées et de meilleure qualité pour les utilisateurs d'un navigateur compatible.
Lorsqu'un utilisateur ajoute votre site ou votre application à l'écran d'accueil, il a l'intention de les traiter comme une application. Cela signifie que vous devez rediriger l'utilisateur vers les fonctionnalités de votre application plutôt que vers la page de destination du produit. Par exemple, si l'utilisateur doit se connecter à votre application, il s'agit d'une bonne page à lancer.
Applications utilitaires
La majorité des applications utilitaires en bénéficieront immédiatement. Vous souhaiterez probablement lancer ces applications de manière autonome, comme toutes les autres applications sur une plate-forme mobile. Pour indiquer à une application de se lancer de manière autonome, ajoutez le fichier manifeste de l'application Web comme suit:
"display": "standalone"
Jeux
La plupart des jeux bénéficieront immédiatement d'un fichier manifeste. La grande majorité des jeux voudront être lancés en plein écran et imposeront une orientation spécifique.
Si vous développez un conteneur de défilement vertical ou un jeu comme Flappy Birds, il est très probable que votre jeu soit toujours en mode Portrait.
"display": "fullscreen",
"orientation": "portrait"
En revanche, si vous créez un jeu de réflexion ou un jeu comme X-Com, vous souhaiterez probablement que le jeu utilise toujours le mode paysage.
"display": "fullscreen",
"orientation": "landscape"
Sites d'actualités
Dans la plupart des cas, les sites d'actualités sont essentiellement axés sur le contenu. Naturellement, la plupart des développeurs n'envisageraient pas d'ajouter un fichier manifeste à un site d'actualités. Le fichier manifeste vous permet de définir ce que vous souhaitez lancer (page d'accueil de votre site d'actualités) et comment le lancer (plein écran ou onglet standard du navigateur).
C'est vous qui choisissez la manière dont vous souhaitez que les utilisateurs accèdent à votre expérience. Si vous souhaitez que votre site dispose de tout le navigateur Chrome comme vous le souhaiteriez, vous pouvez définir l'affichage sur browser.
"display": "browser"
Si vous souhaitez que votre site d'actualités ait l'impression que la majorité des applications axées sur l'actualité traitent leurs expériences comme des applications et suppriment de l'UI tout Chrome Web, définissez l'affichage sur standalone.
"display": "standalone"
Faux: masquer automatiquement la barre d'adresse
Vous pouvez simuler un mode plein écran en masquant automatiquement la barre d'adresse, comme suit:
window.scrollTo(0, 1);
Il s'agit d'une méthode assez simple : la page se charge et on demande à la barre du navigateur de disparaître. Malheureusement, il n'est pas standardisé ni bien pris en charge. Vous devez également contourner un tas d’anomalies.
Par exemple, les navigateurs restaurent souvent la position sur la page lorsque l'utilisateur y retourne. L'utilisation de window.scrollTo permet de le remplacer, ce qui gêne l'utilisateur. Pour contourner ce problème, vous devez stocker la dernière position dans localStorage et gérer les cas particuliers (par exemple, si l'utilisateur a ouvert la page dans plusieurs fenêtres).
Consignes relatives à l'expérience utilisateur
Lorsque vous créez un site qui exploite le plein écran, vous devez prendre en compte un certain nombre de changements potentiels au niveau de l'expérience utilisateur pour pouvoir créer un service qui plaira à vos utilisateurs.
Ne pas compter sur les commandes de navigation
iOS n'a pas de bouton "Retour" ni de geste d'actualisation. Vous devez donc vous assurer que les utilisateurs peuvent naviguer dans l'application sans être bloqués.
Vous pouvez détecter facilement si vous utilisez le mode plein écran ou le mode installé sur toutes les principales plates-formes.
iOS
Sur iOS, vous pouvez utiliser la valeur booléenne navigator.standalone pour voir si l'utilisateur a lancé l'application depuis l'écran d'accueil.
if (navigator.standalone == true) {
// My app is installed and therefore fullscreen
}
Fichier manifeste d'application Web (Chrome, Opera, Samsung)
Lors du lancement en tant qu'application installée, Chrome ne s'exécute pas en plein écran. document.fullscreenElement renvoie donc la valeur "null", et les sélecteurs CSS ne fonctionnent pas.
Lorsque l'utilisateur demande l'affichage en plein écran via un geste sur votre site, les API standards en plein écran sont disponibles, y compris le sélecteur de pseudo-CSS qui vous permet d'adapter votre interface utilisateur à l'état du plein écran, comme suit :
selector:-webkit-full-screen {
display: block; // displays the element only when in fullscreen
}
selector {
display: none; // hides the element when not in fullscreen mode
}
Si les utilisateurs lancent votre site à partir de l'écran d'accueil, la requête média display-mode sera définie sur ce qui a été défini dans le fichier manifeste de l'application Web. En plein écran, le résultat est le suivant:
@media (display-mode: fullscreen) {
}
Si l'utilisateur lance l'application en mode autonome, la requête média display-mode sera standalone:
@media (display-mode: standalone) {
}
Firefox
Lorsque l'utilisateur demande le plein écran via votre site ou lance l'application en mode plein écran, toutes les API standards en plein écran sont disponibles, y compris le pseudo-sélecteur CSS, qui vous permet d'adapter votre UI à l'état plein écran comme suit:
selector:-moz-full-screen {
display: block; // hides the element when not in fullscreen mode
}
selector {
display: none; // hides the element when not in fullscreen mode
}
Internet Explorer
Dans Internet Explorer, la pseudo-classe CSS ne comporte pas de trait d'union, mais fonctionne de la même manière que dans Chrome et Firefox.
selector:-ms-fullscreen {
display: block;
}
selector {
display: none; // hides the element when not in fullscreen mode
}
Spécification
L'orthographe de la spécification correspond à la syntaxe utilisée par IE.
selector:fullscreen {
display: block;
}
selector {
display: none; // hides the element when not in fullscreen mode
}
Laisser l'utilisateur en plein écran
L'API plein écran peut parfois être un peu difficile. Les fournisseurs de navigateurs ne souhaitent pas verrouiller les utilisateurs sur une page en plein écran. Ils ont donc mis au point des mécanismes permettant de sortir du mode plein écran dès que possible. Cela signifie que vous ne pouvez pas créer un site Web en plein écran couvrant plusieurs pages pour les raisons suivantes:
- Si vous modifiez l'URL par programmation à l'aide de
window.location = "http://example.com", elle disparaît du mode plein écran. - Lorsqu'un utilisateur clique sur un lien externe depuis votre page, vous quittez le mode plein écran.
- Si vous modifiez l'URL via l'API
navigator.pushState, l'interface en plein écran sera également supprimée.
Deux options s'offrent à vous pour que l'utilisateur reste en plein écran:
- Utilisez les mécanismes des applications Web installables pour passer en plein écran.
- Gérez l'état de l'interface utilisateur et de l'application à l'aide du fragment #.
En utilisant la syntaxe #syntax pour mettre à jour l'URL (window.location = "#somestate"), et en écoutant l'événement window.onhashchange, vous pouvez utiliser la pile d'historique du navigateur pour gérer les modifications apportées à l'état de l'application, permettre à l'utilisateur d'utiliser ses boutons "Retour" matériels ou proposer une expérience programmatique simple de bouton "Retour" à l'aide de l'API History:
window.history.go(-1);
Laisser l'utilisateur choisir quand passer en plein écran
Il n'y a rien de plus ennuyeux pour l'utilisateur qu'un site Web faisant quelque chose d'inattendu. Lorsqu'un utilisateur accède à votre site, n'essayez pas de le faire passer en plein écran.
N'interceptez pas le premier événement tactile et n'appelez pas requestFullscreen().
- C'est agaçant.
- À un moment donné, les navigateurs peuvent décider d'inviter l'utilisateur à autoriser l'application à occuper le plein écran.
Si vous souhaitez lancer des applications en plein écran, pensez à utiliser les expériences d'installation pour chaque plate-forme.
N'envoyez pas de spam à l'utilisateur pour l'inciter à installer votre application sur un écran d'accueil
Si vous prévoyez d'offrir une expérience en plein écran via les mécanismes d'application installés, soyez particulièrement attentif à l'utilisateur.
- Soyez discret. Utilisez une bannière ou un pied de page pour indiquer aux utilisateurs qu'ils peuvent installer l'application.
- S'il ignore l'invite, ne l'affiche plus.
- Lors d'une première visite, il est peu probable qu'un utilisateur veuille installer l'application, sauf s'il est satisfait de votre service. Incitez-les à l'installer après une interaction positive sur votre site.
- Si un utilisateur visite régulièrement votre site et n'installe pas l'application, il est peu probable qu'il installe votre application par la suite. Évitez de les envoyer du spam.
Conclusion
Bien que nous ne disposions pas d'une API entièrement standardisée et implémentée, certains des conseils présentés dans cet article vous permettent de créer facilement des expériences qui exploitent l'ensemble de l'écran de l'utilisateur, quel que soit le client.