Nous pouvons facilement créer des sites Web et des applications immersifs en plein écran, mais comme pour tout ce qui se trouve sur le Web, il existe plusieurs façons de procéder. Cela est particulièrement important maintenant que de plus en plus de navigateurs prennent en charge une expérience "application Web installée" qui se lance en plein écran.
Afficher votre application ou votre site en plein écran
Un utilisateur ou un développeur peut afficher une application Web en plein écran de plusieurs façons.
- Demander au navigateur de passer en plein écran en réponse à un geste de l'utilisateur.
- Installez l'application sur l'écran d'accueil.
- Faire semblant: masquez automatiquement la barre d'adresse.
Demander au navigateur de passer en plein écran en réponse à un geste de l'utilisateur
Toutes les plates-formes ne sont pas égales. iOS Safari ne dispose pas d'API plein écran, mais nous en avons une sur Chrome sur Android, Firefox et IE 11 et versions ultérieures. La plupart des applications que vous créez utilisent une combinaison de l'API JS et des sélecteurs CSS fournis par la spécification plein écran. Voici les principales API JS que vous devez prendre en compte lors de la création d'une expérience en plein écran:
element.requestFullscreen()
(actuellement préfixé dans Chrome, Firefox et IE) affiche l'élément en mode plein écran.document.exitFullscreen()
(préfixe actuellement utilisé dans Chrome, Firefox et IE) Firefox utilisecancelFullScreen()
à la place) annule le mode plein écran.document.fullscreenElement
(actuellement préfixé dans Chrome, Firefox et IE) renvoie "true" si l'un des éléments est en mode plein écran.
Lorsque votre application est en plein écran, les commandes de l'UI du navigateur ne sont plus disponibles. Cela modifie la façon dont les utilisateurs interagissent avec votre expérience. Elles ne disposent pas des commandes de navigation standards telles que les boutons "Suivant" et "Précédent". Elles ne disposent pas de leur échappatoire, à savoir le bouton "Actualiser". Il est important de tenir compte de ce scénario. Vous pouvez utiliser certains sélecteurs CSS pour 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 du 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 plein écran. Comme vous pouvez le constater, la situation du préfixe du fournisseur est complexe et lourde 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, les développeurs Web, détestons la complexité. Une API abstraite de haut niveau que vous pouvez utiliser est le module Screenfull.js de Sindre Sorhus, qui unifie les deux API JS et les préfixes de fournisseurs légèrement différents en une API cohérente.
Conseils concernant l'API en plein écran
Afficher le document en plein écran
Il est naturel de penser que vous prenez l'élément body en plein écran, mais si vous utilisez un moteur de rendu basé sur WebKit ou Blink, vous constaterez qu'il a un effet étrange qui réduit la largeur du corps à la plus petite taille possible qui contiendra tout le contenu. (Mozilla Gecko est acceptable.)
Pour résoudre ce problème, utilisez l'élément "document" au lieu de l'élément "body" :
document.documentElement.requestFullscreen();
Afficher un élément vidéo en plein écran
Pour afficher un élément vidéo en plein écran, procédez exactement comme pour tout autre élément. Vous appelez la méthode requestFullscreen
sur 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 "controls" n'est pas défini pour votre élément <video>
, l'utilisateur ne peut pas contrôler la vidéo une fois en plein écran. La méthode recommandée consiste à utiliser un conteneur de base qui encapsule la vidéo et les commandes que vous souhaitez que l'utilisateur voit.
<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 une flexibilité beaucoup plus grande, 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>
À l'aide de ces modèles, vous pouvez détecter quand le mode plein écran est en cours d'exécution et adapter votre interface utilisateur en conséquence, par exemple:
- En fournissant un lien vers la page de démarrage
- En fournissant un mécanisme permettant de fermer les boîtes de dialogue ou de revenir en arrière
Lancer 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 sont très conscients qu'une expérience en plein écran à chaque chargement de page est très gênante. Par conséquent, un geste utilisateur est requis pour passer en plein écran. Toutefois, les fournisseurs autorisent les utilisateurs à "installer" des applications, et l'acte d'installation est un signal envoyé au système d'exploitation que l'utilisateur souhaite lancer en tant qu'application sur la plate-forme.
Sur les principales plates-formes mobiles, il est assez facile de l'implémenter à l'aide de métabalises 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 mode plein écran.
<meta name="apple-mobile-web-app-capable" content="yes" />
Si la valeur du contenu est définie sur "yes", l'application Web s'exécute en mode plein écran. Sinon, elle ne s'exécute pas en plein écran. 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 en lecture seule window.navigator.standalone.
Apple
Chrome pour Android
L'équipe Chrome a récemment implémenté une fonctionnalité qui indique 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 Safari iOS.
<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 se lance en mode "application" plein écran à l'aide de 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 d'application Web.
Fichier manifeste d'application Web (Chrome, Opera, Firefox, Samsung)
Le fichier manifeste pour les applications Web est un fichier JSON simple qui vous permet, en tant que développeur, de contrôler l'apparence de votre application auprès de l'utilisateur dans les zones où il s'attend à voir des applications (par exemple, l'écran d'accueil d'un mobile), de diriger ce que l'utilisateur peut lancer et, plus important encore, de déterminer comment il peut le lancer. À l'avenir, le fichier manifeste vous permettra de contrôler encore plus votre application, mais pour le moment, nous nous concentrons uniquement sur la façon dont votre application peut être lancée. Plus spécifiquement :
- Informer le navigateur de votre fichier manifeste
- Décrire le lancement
Une fois le fichier manifeste créé et hébergé sur votre site, il vous suffit d'ajouter une balise de lien à toutes les pages qui englobent votre application, comme suit:
<link rel="manifest" href="/manifest.json" />
Chrome est compatible avec les fichiers manifestes depuis la version 38 pour Android (octobre 2014). Ils vous permettent de contrôler l'apparence de votre application Web lorsqu'elle est installée sur l'écran d'accueil (via les propriétés short_name
, name
et icons
) et la façon dont elle doit être lancée lorsque l'utilisateur clique sur l'icône de lancement (via start_url
, display
et orientation
).
Voici un exemple de fichier manifeste. Il 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 meilleures et plus intégrées 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 le traiter comme une application. Par conséquent, vous devez viser à rediriger l'utilisateur vers les fonctionnalités de votre application plutôt que vers une page de destination de produit. Par exemple, si l'utilisateur doit se connecter à votre application, il s'agit d'une bonne page à lancer.
Applications utilitaires
La plupart des applications utilitaires en bénéficieront immédiatement. Pour ces applications, vous voudrez probablement les lancer 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-la au fichier manifeste d'application Web:
"display": "standalone"
Jeux
La plupart des jeux bénéficieront immédiatement d'un fichier manifeste. La grande majorité des jeux doivent se lancer en plein écran et forcer une orientation spécifique.
Si vous développez un défilement vertical ou un jeu comme Flappy Birds, vous voudrez probablement que votre jeu soit toujours en mode portrait.
"display": "fullscreen",
"orientation": "portrait"
Si vous créez un jeu de puzzle ou un jeu comme X-Com, vous voudrez probablement que le jeu utilise toujours l'orientation paysage.
"display": "fullscreen",
"orientation": "landscape"
Sites d'actualités
Dans la plupart des cas, les sites d'actualités sont des expériences purement basées sur le contenu. La plupart des développeurs n'auraient pas naturellement l'idée d'ajouter un fichier manifeste à un site d'actualités. Le fichier manifeste vous permet de définir ce que vous souhaitez lancer (la page d'accueil de votre site d'actualités) et comment le lancer (en plein écran ou dans un onglet de navigateur normal).
Le choix vous appartient et dépend de la façon dont vous pensez que vos utilisateurs aimeraient accéder à votre expérience. Si vous souhaitez que votre site dispose de tous les éléments du navigateur que vous attendez d'un site, vous pouvez définir l'affichage sur browser
.
"display": "browser"
Si vous souhaitez que votre site d'actualités ressemble à la majorité des applications axées sur l'actualité qui traitent leurs expériences comme des applications et supprimez tout chrome semblable au Web de l'interface utilisateur, vous pouvez définir l'affichage sur standalone
.
"display": "standalone"
Faire semblant: masquer automatiquement la barre d'adresse
Vous pouvez simuler un 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 la barre du navigateur est invitée à se dégager. Malheureusement, il n'est pas normalisé et n'est pas bien pris en charge. Vous devez également contourner un certain nombre de bizarreries.
Par exemple, les navigateurs restaurent souvent la position sur la page lorsque l'utilisateur y revient. L'utilisation de window.scrollTo
remplace cela, ce qui agace 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 tenir compte d'un certain nombre de modifications potentielles de l'expérience utilisateur pour pouvoir créer un service qui plaira à vos utilisateurs.
Ne pas se fier aux commandes de navigation
iOS ne dispose pas de bouton Retour physique ni de geste d'actualisation. Vous devez donc vous assurer que les utilisateurs peuvent naviguer dans l'application sans être bloqués.
Vous pouvez facilement détecter si vous exécutez une application en mode plein écran ou en mode installé sur toutes les principales plates-formes.
iOS
Sur iOS, vous pouvez utiliser le booléen navigator.standalone
pour savoir si l'utilisateur a lancé l'application depuis l'écran d'accueil ou non.
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 n'est pas exécuté en mode plein écran. document.fullscreenElement
renvoie donc la valeur nulle et les sélecteurs CSS ne fonctionnent pas.
Lorsque l'utilisateur demande un plein écran via un geste sur votre site, les API plein écran standards sont disponibles, y compris le pseudo-sélecteur CSS qui vous permet d'adapter votre UI pour qu'elle réagisse à l'état 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 depuis l'écran d'accueil, la requête multimédia display-mode
sera définie sur ce qui a été défini dans le fichier manifeste d'application Web. En mode plein écran pur, il s'agit de:
@media (display-mode: fullscreen) {
}
Si l'utilisateur lance l'application en mode autonome, la requête multimédia display-mode
sera standalone
:
@media (display-mode: standalone) {
}
Firefox
Lorsque l'utilisateur demande un plein écran via votre site ou lance l'application en mode plein écran, toutes les API plein écran standards sont disponibles, y compris le pseudo-sélecteur CSS, qui vous permet d'adapter votre UI pour qu'elle réagisse à 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 IE, la pseudo-classe CSS ne comporte pas de trait d'union, mais fonctionne de la même manière que 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
}
Maintenir l'utilisateur dans l'expérience en plein écran
L'API plein écran peut parfois être un peu capricieuse. Les fournisseurs de navigateurs ne souhaitent pas verrouiller les utilisateurs sur une page en plein écran. Ils ont donc développé des mécanismes pour sortir du plein écran dès que possible. Cela signifie que vous ne pouvez pas créer de site Web en plein écran couvrant plusieurs pages, car:
- Modifier l'URL de manière programmatique à l'aide de
window.location = "http://example.com"
permet de quitter le mode plein écran. - Lorsqu'un utilisateur clique sur un lien externe sur votre page, il quitte le mode plein écran.
- Modifier l'URL via l'API
navigator.pushState
interrompt également l'expérience en plein écran.
Vous avez deux options si vous souhaitez que l'utilisateur reste dans une expérience en plein écran:
- Utilisez les mécanismes d'application Web installable pour passer en plein écran.
- Gérez votre UI et l'état de votre application à l'aide du fragment #.
En utilisant la syntaxe # pour mettre à jour l'URL (window.location = "#somestate") et en écoutant l'événement window.onhashchange
, vous pouvez utiliser la propre pile d'historique du navigateur pour gérer les modifications de l'état de l'application, autoriser l'utilisateur à utiliser ses boutons physiques de retour ou proposer une expérience de bouton de retour programmatique simple à l'aide de l'API history comme suit:
window.history.go(-1);
Laisser l'utilisateur choisir quand passer en plein écran
Rien n'est plus agaçant pour l'utilisateur qu'un site Web qui fait quelque chose d'inattendu. Lorsqu'un utilisateur accède à votre site, n'essayez pas de le tromper pour qu'il passe en plein écran.
N'interceptez pas le premier événement tactile et n'appelez pas requestFullscreen()
.
- C'est agaçant.
- Les navigateurs peuvent décider d'inviter l'utilisateur à autoriser l'application à occuper l'écran en plein écran à un moment donné.
Si vous souhaitez lancer des applications en plein écran, envisagez d'utiliser les expériences d'installation pour chaque plate-forme.
Ne spammez pas l'utilisateur pour qu'il installe 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 respectueux envers l'utilisateur.
- Soyez discret. Utilisez une bannière ou un pied de page pour leur indiquer qu'ils peuvent installer l'application.
- S'il ignore l'invite, ne la lui montrez plus.
- Lors de la première visite d'un utilisateur, il est peu probable qu'il souhaite installer l'application, sauf s'il est satisfait de votre service. Pensez à les inviter à l'installer après une interaction positive sur votre site.
- Si un utilisateur visite régulièrement votre site et qu'il n'installe pas l'application, il est peu probable qu'il l'installe à l'avenir. N'envoyez pas de spam.
Conclusion
Bien que nous n'ayons pas d'API entièrement standardisée et implémentée, en suivant certains des conseils présentés dans cet article, vous pouvez facilement créer des expériences qui exploitent l'intégralité de l'écran de l'utilisateur, quel que soit le client.