Créer des expériences plein écran

Nous pouvons créer facilement des sites Web immersifs en plein écran et applications, mais comme pour tout ce qui est disponible sur le Web, il existe plusieurs façons de le faire. C'est d'autant plus important que de plus en plus de navigateurs prennent en charge une version application Web" qui s'ouvre en plein écran.

Afficher votre application ou votre site en plein écran

Il existe plusieurs façons pour un utilisateur ou un développeur d'afficher une application Web en plein écran.

  • Demander au navigateur de passer en plein écran en réponse à un geste de l'utilisateur
  • Installez l'application sur l'écran d'accueil.
  • Faux: 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 se valent pas. iOS Safari n'a pas d'API plein écran, mais nous le faisons sur Chrome sur Android, Firefox et Internet Explorer 11 ou version ultérieure. La plupart des applications que vous créez utilisent une combinaison des API JavaScript et sélecteurs CSS fournis par la spécification plein écran. La principale Voici les API JavaScript dont vous devez vous soucier lors de la création d'une expérience plein écran:

  • element.requestFullscreen() (préfixe actuellement dans Chrome, Firefox et IE) affiche l'élément en mode plein écran.
  • document.exitFullscreen() (actuellement préfixé dans Chrome, Firefox et IE. Firefox utilise cancelFullScreen() à la place) annule le mode plein écran.
  • document.fullscreenElement (préfixe actuellement 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, vous n'avez plus les commandes de l'interface utilisateur du navigateur à votre disposition. Cela modifie la façon dont les utilisateurs interagissent avec votre expérience. Ils ne disposent pas des commandes de navigation standards, comme "Transférer", et en arrière ; il n'a pas de mécanisme de secours à savoir le bouton Actualiser. Il est important pour ce scénario. Vous pouvez utiliser certains sélecteurs CSS pour vous aider vous modifiez le style et la présentation de votre site lorsque le navigateur 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 caché toute la complexité l'utilisation des préfixes de fournisseur.

Le code proprement dit est beaucoup plus complexe. Mozilla a créé un script très utile que vous pouvez utiliser pour activer/désactiver le mode plein écran. En tant que la situation du préfixe du fournisseur est complexe, fastidieux par rapport à l'API spécifiée. Même avec un 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 fournisseur JS légèrement différents en un seul une API cohérente.

Conseils sur l'API Fullscreen

Affichage du document en plein écran
<ph type="x-smartling-placeholder">
</ph> Plein écran sur l&#39;élément du corps
Figure 1: Plein écran sur l'élément "body"

Il est naturel de penser que vous affichez l'élément « body » en plein écran, mais si vous sur un moteur de rendu basé sur WebKit ou Blink, vous verrez qu'il a un effet étrange réduire la largeur du corps à la taille la plus petite possible qui contiendra tous les contenus. (Mozilla Gecko est accepté.)

<ph type="x-smartling-placeholder">
</ph> Plein écran sur l&#39;élément de document
Figure 2: Plein écran sur l'élément du document

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

Afficher un élément vidéo en plein écran revient à afficher n'importe quelle autre en plein écran. Vous appelez la méthode requestFullscreen sur la 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 dans votre élément <video>, l'utilisateur n'a aucun moyen de contrôler la vidéo une fois qu'elle est affichée en plein écran. La il est recommandé d'avoir un conteneur de base qui encapsule la vidéo et les commandes que vous voulez que l'utilisateur voie.

<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>

Vous bénéficiez ainsi d'une plus grande flexibilité, car vous pouvez combiner à l'aide du pseudo-sélecteur CSS (pour masquer le bouton "goFS", par exemple).

<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 schémas vous permettent de détecter si le mode plein écran est activé et d'adapter votre l'interface utilisateur de manière appropriée. Par exemple:

  • En fournissant un lien vers la page d'accueil
  • En fournissant un mécanisme permettant de fermer les dialogues ou de 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 plein écran à chaque chargement de page est très ennuyeux, c'est pourquoi un geste de l'utilisateur est nécessaire pour activer le mode plein écran. Les fournisseurs autorisent les utilisateurs à « installer » des applications, et l'installation est une pour signaler au système d'exploitation que l'utilisateur souhaite lancer une application sur le Google Cloud.

Sur les principales plates-formes mobiles, il est assez facile de mettre en œuvre l'un ou l'autre des balises Meta ou des fichiers manifestes comme indiqué ci-dessous.

iOS

Depuis le lancement de l'iPhone, les utilisateurs ont la possibilité d'installer des applications Web pour l’écran d’accueil et qu’ils se lancent en tant qu’applications web en plein écran.

<meta name="apple-mobile-web-app-capable" content="yes" />

Si la valeur du contenu est "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 Web contenus. Vous pouvez déterminer si une page Web s'affiche en mode plein écran. à l'aide de la propriété window.navigator.standalone JavaScript booléenne en lecture seule.

<ph type="x-smartling-placeholder"></ph> Apple
.

Chrome pour Android

L'équipe Chrome a récemment implémenté une fonctionnalité qui indique au navigateur lancer la page en plein écran lorsque l'utilisateur l'a ajoutée à l'écran d'accueil. Il est similaire au modèle Safari pour iOS.

<meta name="mobile-web-app-capable" content="yes" />

Vous pouvez configurer votre application Web pour qu'une icône de raccourci vers l'application soit ajoutée à l'écran d'accueil de l'appareil et lancer l'application en "mode Application" plein écran avec Ajout à l'écran d'accueil de Chrome pour Android l'élément de menu.

<ph type="x-smartling-placeholder"></ph> 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 simple fichier JSON qui vous donne vous pouvez contrôler la façon dont votre application est présentée à l'utilisateur dans les zones géographiques qu'ils s'attendent à voir des applications (par exemple, l'écran d'accueil mobile), directement ce que l'utilisateur peut lancer et, surtout, comment il peut le lancer. Dans le fichier manifeste vous donnera encore plus de contrôle sur votre application, mais pour l'instant, nous nous concentrons simplement sur la façon dont votre application peut être lancée. Plus spécifiquement :

  1. Informer le navigateur de votre fichier manifeste
  2. Décrire comment lancer

Une fois le fichier manifeste créé et hébergé sur votre site, tout ce dont vous avez besoin il vous suffit d'ajouter une balise "link" à 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) et vous permet de contrôler l'affichage de votre application Web lorsqu'elle est installée à l'écran d'accueil (via les propriétés short_name, name et icons) et comment il doit être lancé lorsque l'utilisateur clique sur l'icône de lancement (via start_url, display et orientation).

Vous trouverez ci-dessous un exemple de fichier manifeste. Elle n'affiche pas tous les éléments pouvant se trouver dans une 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 intégrées pour les utilisateurs d'un navigateur prenant en charge la fonctionnalité.

Lorsqu'un utilisateur ajoute votre site ou votre application à l'écran d'accueil, l'intention à l'utilisateur de le traiter comme une application. Cela signifie que vous devez chercher à diriger l'utilisateur vers la fonctionnalité de votre application plutôt que la page de destination d'un produit. Par exemple : si l'utilisateur doit se connecter à votre application, il s'agit d'une bonne page pour lancement.

Applis utilitaires

La majorité des utilitaires en bénéficieront immédiatement. Pour ceux applications qui devraient être disponibles en version autonome, comme toutes les autres sur une plate-forme mobile. Pour indiquer à une application de se lancer en mode autonome, ajoutez ceci Fichier manifeste d'application:

    "display": "standalone"
Jeux

La majorité des jeux bénéficieront immédiatement d'un fichier manifeste. Le vaste la majorité des jeux doivent s'activer en plein écran et doivent forcer une l'orientation.

Si vous développez un conteneur à défilement vertical ou un jeu comme Flappy Birds, voudront probablement que votre jeu soit toujours en mode Portrait.

    "display": "fullscreen",
    "orientation": "portrait"

En revanche, si vous créez un casse-tête ou un jeu comme X-Com, il est préférable 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 purement axés sur le contenu. La plupart des développeurs naturellement ne penseraient pas à ajouter un fichier manifeste à un site d'actualités. Fichier manifeste vous permet de définir ce que vous souhaitez publier (la page d'accueil de votre site d'actualités) et comment le lancer (en plein écran ou dans un onglet normal du navigateur).

Le choix vous appartient et c'est vous qui décidez de la manière dont les utilisateurs aimeront accéder à votre expérience. Si vous voulez que votre site ait le navigateur Chrome s'attendent à ce qu'un site ait un site, vous pouvez définir l'affichage sur browser.

    "display": "browser"

Si vous voulez que votre site d'actualités ait l'impression que la majorité des applications leurs expériences en tant qu'applications et supprimer de l'interface utilisateur tous les chromes similaires au Web, vous pouvez le faire en définissant l'affichage sur standalone.

    "display": "standalone"

Faux: masquez automatiquement la barre d'adresse

Vous pouvez activer le mode plein écran factice en masquant automatiquement la barre d'adresse comme suit:

window.scrollTo(0, 1);

C'est une méthode assez simple : la page se charge et la barre du navigateur est invitée vous éloigner. Malheureusement, il n'est pas standardisé compatibles. Vous devez également éviter un tas de bizarreries.

Par exemple, les navigateurs restaurent souvent la position sur la page lorsque l'utilisateur y retourne. L'utilisation de window.scrollTo remplace cela, ce qui est agaçant l'utilisateur. Pour contourner ce problème, vous devez stocker la dernière position dans localStorage et de gérer les cas limites (par exemple, si l'utilisateur dispose s'ouvre dans plusieurs fenêtres).

Consignes relatives à l'expérience utilisateur

Lorsque vous créez un site qui exploite le plein écran, le nombre de changements potentiels de l’expérience utilisateur dont vous devez être conscient pour être en mesure de créer un service que vos utilisateurs apprécieront.

Ne pas compter sur les commandes de navigation

iOS ne propose pas de bouton "Retour" ni de geste d'actualisation. Vous devez donc permettent aux utilisateurs de naviguer dans l'application sans s'enfermer dans leur compte.

Vous pouvez détecter si vous êtes en mode plein écran ou installé facilement 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é 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 ne s'exécute pas en plein écran. Ainsi, document.fullscreenElement renvoie une valeur nulle et les sélecteurs CSS ne fonctionnent pas.

Lorsque l'utilisateur demande le plein écran via un geste sur votre site, le des API plein écran sont disponibles, dont le sélecteur de pseudo CSS, qui vous permet adapter votre UI à 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, le contenu multimédia display-mode sera définie sur celle définie dans le fichier manifeste d'application Web. Dans le cas d'une le mode plein écran s'affiche:

@media (display-mode: fullscreen) {
}

Si l'utilisateur lance l'application en mode autonome, display-mode requête média sera standalone:

@media (display-mode: standalone) {
}

Firefox

Lorsque l'utilisateur demande le plein écran via votre site ou lance l'application dans mode plein écran. Toutes les API de plein écran standard 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 IE, la pseudo-classe CSS ne comporte pas de trait d'union, mais elle 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 dans 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'expérience utilisateur en plein écran

L'API plein écran peut parfois être un peu délicate. Les fournisseurs de navigateurs ne veulent pas pour verrouiller les utilisateurs dans une page plein écran afin qu'ils aient mis au point des mécanismes permettant en plein écran dès que possible. Vous ne pouvez donc pas créer un site Web plein écran qui s'étend sur plusieurs pages pour les raisons suivantes:

  • La modification de l'URL par programmation à l'aide de window.location = "http://example.com" sort du plein écran.
  • Un utilisateur qui clique sur un lien externe à l'intérieur de votre page quitte le mode plein écran.
  • La modification de l'URL via l'API navigator.pushState entraîne également la suppression du en plein écran.

Si vous souhaitez que l'utilisateur reste affiché en plein écran, deux options s'offrent à vous:

  1. Utilisez les mécanismes de l'application Web installable pour passer en plein écran.
  2. Gérez l'état de l'UI et de l'application à l'aide du fragment #.

En utilisant la syntaxe #syntax pour mettre à jour l'URL (window.location = "#somestate") en écoutant l'événement window.onhashchange. Vous pouvez utiliser pour gérer les changements d'état de l'application, permettre à l'utilisateur d'utiliser leurs boutons retour matériels, ou proposent un simple bouton de retour programmatique. à l'aide de l'API History comme suit:

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 qui fait quelque chose inattendu. Lorsqu'un utilisateur accède à votre site, n'essayez pas de le tromper plein écran.

N'interceptez pas le premier événement tactile et appelez requestFullscreen().

  1. C'est agaçant.
  2. Les navigateurs peuvent décider à un moment d’inviter l’utilisateur à permettant à l'application d'occuper tout l'écran.

Pour lancer des applications en plein écran, envisagez d'utiliser le bouton d'installation pour chaque plate-forme.

N'envoyez pas de spam à l'utilisateur pour qu'il installe votre application sur un écran d'accueil

Si vous prévoyez d'offrir une expérience plein écran via les mécanismes d'application installée être attentionné envers l’utilisateur.

  • Soyez discret. Utilisez une bannière ou un pied de page pour les informer qu'ils peuvent installer l'application.
  • S'il ignore l'invite, ne l'affichez plus.
  • Lors de la première visite d'un utilisateur, il est peu probable qu'il veuille installer l'application, à moins que qu'ils soient satisfaits 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 n'installe pas votre application, il est peu susceptible d'installer votre application à l'avenir. Ne les envoyez pas tout le temps.

Conclusion

Bien que nous ne disposions pas d'une API entièrement standardisée et implémentée, nous utilisons certains des les conseils présentés dans cet article vous permettent de créer facilement des expériences profite de l'intégralité de l'écran de l'utilisateur, quel que soit le client.

Commentaires