Construire une application web mobile en plein écran.

L’un des points les plus sympas lorsque l’on compare une application web à une application native c’est d’abord le plein écran.

Cela nous permet de capter entièrement l’attention de l’utilisateur mais aussi un espace d’affichage plus grand, qui nous permet d’afficher plus d’informations ou de proposer un plus grand confort de lecture.

Présenter votre application ou votre site en plein écran

Nous avons la possibilité dans la plupart des cas d’offrir à nos utilisateurs une immersion totale, voyons quels sont les outils à notre disposition.

• Offrir la possibilité d’activer le plein écran à l’utilisateur.
• Placer l’application sur l’écran d’accueil de l’appareil.

Offrir la possibilité à l’utilisateur de passer la page en fullscreen

Tous les navigateurs n’ont évidemment pas encore une API fullscreen identique (c’eut été trop facile). Safari sur iOS n’en a pas mais Chrome et Firefox sur Android (et sûrement sur Firefox OS) nous permettent déjà de l’exploiter.

Les fonction de l’API dont vous devrez vous soucier sont les suivantes:

• element.requestFullscreen() Affiche l’élément en plein écran
• document.cancelFullscreen() Annule le mode plein écran
• document.fullscreenElement() Retourne true si un élément est en plein écran.

Pour faire simple, nous pouvons utiliser:

  document.body.requestFullScreen();

Mais l’API n’étant pas encore vraiment définie, le code pour passer une page en plein écran ressemble plutôt à :

  function toggleFullScreen() {
    var doc = window.document;
    var docEl = doc.documentElement;

    var requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen;
    var cancelFullScreen = doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen;

    if(!doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement) {
      requestFullScreen.call(docEl);
    }
    else {
      cancelFullScreen.call(doc);
    }
  }

Il existe aussi un script javascript nommé screenfull.js qui vous permettra de ne pas avoir à vous inquiéter des différences entre navigateurs.

Après une rapide recherche, et histoire de ne pas l’oublier, voici la documentation pour Internet Explorer qui prend bien en compte l’API dans ses dernières versions.

Ouvrir la page en plein écran

Forcer une page en plein écran quand l’utilisateur y accède n’est pas possible. Cela pourrait devenir rapidement gênant pour l’utilisateur.

Heureusement pour nous, il est possible d’“installer” un site à la manière d’une application. Nous faisons donc comprendre au navigateur que cette adresse doit être vue en plein écran et générons une icône sur l’accueil de l’appareil de l’utilisateur.

Depuis un moment disponible sur Safari, nous pouvons ajouter la méta:

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

et plus récemment sur Chrome en parallèle de l’option “Add to Homescreen”

meta name="mobile-web-app-capable" content="yes"

Ces 2 méta indiquent au navigateur comment utiliser ces pages comme des applications, et donc : en fullscreen.

Mozilla a choisit une méthode différente pour Firefox OS qui consiste en un fichier de configuration utilisé pour l’installation d’un web application.

  {
    "name": "My App",
    "description": "That's an awesome app",
    "launch_path": "/",
    "icons": {
      "128": "/img/icon-128.png"
    },
    "fullscreen": true
  }

Quelques problème à éviter

Du fait de passer un élément de votre page (ou tout la page) en plein écran nous devons être attentif à la navigation au sein de l’application. L’utilisateur n’aura plus de bouton pour retourner en arrière ou même rafraîchir la page.

Nous pouvons détecter si notre application est en fullscreen ou non :

iOS

  if(window.navigator.standalone == true) {
    // My app is installed and therefore fullscreen
  }

Chrome

Losqu’on utilise une application installée avec Chrome (Add to Homescreen), alors document.fullscreenElement retourne null. Nous avons alors une autre solution, qui utilise les CSS:

  selector:-webkit-full-screen {
    display: block; // Affiche l'élément seulement en plein écran
  }

  selector {
    display: none; // Dans les autres cas, cache l'élément
  }

Firefox

Pour le navigateur de Mozilla nous pourrons utiliser la même solution mais le préfixe sera évidemment différent…

  selector:-moz-full-screen {
    display: block;
  }

Et enfin la spécification, qui reste encore la solution la plus logique

  selector:fullscreen {
    display: block;
  }

Laissez choisir l’utilisateur

Faire en sorte d’offrir la meilleure expérience utilisateur est une chose mais le forcer à se passer de ses habitudes de navigation n’en est pas forcément une.

Plutôt que de forcer le plein écran, autant offrir la possibilité à l’utilisateur de l’activer ou non.

Une solution encore plus efficace, tant au niveau de la transparence pour l’utilisateur que pour gérer votre application est de la proposer à l’installation.

Conclusion

Pendant que cette API n’est pas standardisé je ne conseillerais sûrement pas de l’utiliser en production, mais elle permet de voir avec un œil nouveau les applications web mobile.

Elle vous permet de vous familiariser avec les contraintes et les bonus apportés par le plein écran.

N’hésitez pas à réagir à cet article, vu l’état d’avancement du sujet j’imagine que les changement seront rapides et réguliers.

L’équipe Synbioz.

Libres d’être ensemble.