{"id":6074,"date":"2016-12-21T14:15:35","date_gmt":"2016-12-21T13:15:35","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=6074"},"modified":"2019-05-20T22:14:39","modified_gmt":"2019-05-20T20:14:39","slug":"super-pouvoirs-navigateurs-mobiles","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/super-pouvoirs-navigateurs-mobiles\/","title":{"rendered":"Les super pouvoirs des navigateurs mobiles"},"content":{"rendered":"
Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 9 ans. Il se peut qu'il ne soit plus \u00e0 jour.<\/div>

Cet article est une traduction de\u00a0The (not so) secret powers of the mobile browser <\/strong><\/a>publi\u00e9 sur Smashing Magazine et est une sorte de transcription un peu plus long de ma conf\u00e9rence Forget about apps, could the future be in the mobile browser?<\/a><\/p>\n

En 2009, Apple nous vendait ses t\u00e9l\u00e9phones avec un slogan simple : \u201cThere\u2019s an app for that\u201d (il y a une application pour \u00e7a). Et bien s\u00fbr nous y avons cru. Comment aurait-il pu en \u00eatre autrement ? Mais de l\u2019eau a coul\u00e9 sous les ponts depuis 2009. Nos utilisatrices mobiles ont acquis en maturit\u00e9, et lorsque vient le choix entre t\u00e9l\u00e9charger et installer votre grosse application e-commerce ou conserver de l\u2019espace de stockage pour prendre plus de photos, l’int\u00e9r\u00eat envers l\u2019application commence \u00e0 \u00eatre remis en question. Les navigateurs ont de leur c\u00f4t\u00e9 pendant ce temps \u00e9galement bien \u00e9volu\u00e9 et permettent le support de plus en plus de fonctionnalit\u00e9s r\u00e9serv\u00e9es jusque-l\u00e0 aux applications natives gr\u00e2ce \u00e0 de nouvelles APIs.<\/p>\n

Nous pouvons d\u00e9sormais acc\u00e9der directement depuis le navigateur \u00e0 l\u2019appareil photo, prendre des vid\u00e9os, capturer de l\u2019audio et utiliser WebRTC pour construire un syst\u00e8me de messagerie dans le navigateur sans avoir besoin d\u2019installer le moindre plugin. Il est \u00e9galement possible de construire des Progressive Web Apps qui, gr\u00e2ces \u00e0 une ic\u00f4ne de lancement, des notifications ou encore des fonctionnalit\u00e9s disponibles hors connexion, etc., permettront de reproduire une exp\u00e9rience proche de ce qu’offraient jusque-l\u00e0 les applications natives. Et pourquoi s\u2019arr\u00eater en si bon chemin ? Il est possible d\u2019aller bien au-del\u00e0 du Responsive Web Design et construire des sites qui s\u2019adapteront auto-magiquement aux besoins et contexte des utilisatrices en utilisant de la g\u00e9olocalisation, en d\u00e9tectant le niveau de batterie et la lumi\u00e8re ambiante, en tirant partie du Bluetooth et de ce que Google appelle The Physical Web.<\/p>\n

Pour nous aider \u00e0 plonger dans ce nouveau monde et ces nouvelles (et pas si nouvelles) fonctionnalit\u00e9s, nous guider dans notre voyage dans le monde de \u201cTout est possible dans un navigateur mobile\u201d, je vais illustrer cet article avec des exemples fictifs mais r\u00e9alistes. Ch\u00e8res lectrices et lecteurs, je vous pr\u00e9sente Zoe, mon utilisatrice. \u00c2g\u00e9e de 30 ans, elle est d\u00e9veloppeuse dans un futur pas tr\u00e8s \u00e9loign\u00e9. Elle passe sa journ\u00e9e de boulot sur un ordinateur et ne souhaite pas en avoir un \u00e0 la maison. Elle utilise donc son Smartphone comme principal moyen d\u2019acc\u00e8s \u00e0 internet.<\/em><\/p>\n

Acc\u00e9der et utiliser des images, de la vid\u00e9o et de l\u2019audio directement dans le navigateur<\/h2>\n

Un syst\u00e8me de conf\u00e9rence audio et vid\u00e9o dans le navigateur avec WebRTC.<\/h3>\n

Zoe a \u00e9t\u00e9 invit\u00e9e \u00e0 donner une conf\u00e9rence \u00e0 Super Conf, la plus grande conf\u00e9rence de son pays. Souvent les organisatrices souhaitent discuter un peu du sujet avant de vive voix. Au lieu d\u2019ajouter Zoe sur Skype comme la plupart des gens font g\u00e9n\u00e9ralement, les organisateurs de Super Conf lui envoient un lien vers un syst\u00e8me de visio-conf\u00e9rence en ligne : Apprtc<\/a><\/em><\/p>\n

Zoe entre le num\u00e9ro de salle donn\u00e9 par les organisateurs. Le navigateur demande alors la permission d\u2019acc\u00e9der \u00e0 l\u2019appareil photo et au microphone, elle accepte et la voil\u00e0 connect\u00e9e directement avec son interlocutrice. Zoe n\u2019a rien eu besoin d\u2019installer, ni plugin, ni application. Tout s\u2019est directement pass\u00e9 dans le navigateur de mani\u00e8re totalement transparente ou presque pour elle.<\/em><\/p>\n

Zoe n\u2019a rien besoin d\u2019installer pour faire une visio conf\u00e9rence dans le navigateur :<\/em>\"\"<\/p>\n

Les applications natives demandent \u00e0 leurs utilisatrices toutes les permissions dont elles vont avoir besoin au moment de l\u2019installation. Le navigateur fonctionne diff\u00e9remment : les utilisatrices vont devoir autoriser l’acc\u00e8s API par API (donc fonctionnalit\u00e9 par fonctionnalit\u00e9).<\/p>\n

\"\"<\/p>\n

Et donc, comment \u00e7a fonctionne ? En utilisant WebRTC<\/a>, il est possible d\u2019ouvrir un canal de communication directe et en temps r\u00e9el (Peer to Peer) entre deux clients. Ensuite vous pouvez envoyer du son, de la vid\u00e9o ou m\u00eame des donn\u00e9es entre les deux clients.<\/p>\n

C\u2019est plut\u00f4t puissant mais pour le moment uniquement support\u00e9 dans Firefox et Chrome et en cours de d\u00e9veloppement pour MS Edge et Safari<\/a>. Il vous faudra \u00e9galement utiliser l\u2019API getUserMedia\/Stream<\/a> (pas support\u00e9e sous IE et Safari<\/a>) pour avoir acc\u00e8s aux flux audio et vid\u00e9o de l\u2019appareil.<\/p>\n

Ce genre de technologies pourrait servir \u00e0 re-cr\u00e9er une web app Google Hangout ou un Facebook Messenger directement dans le navigateur. Pour \u00e9galer l\u2019application, il manquerait cependant l\u2019acc\u00e8s au r\u00e9pertoire t\u00e9l\u00e9phonique de l\u2019utilisatrice. Pour le moment aucune API ne permet h\u00e9las cela.<\/p>\n

Ajouter une photo de profil directement depuis son appareil photo<\/h3>\n

Apr\u00e8s avoir discut\u00e9 du sujet, les organisatrices demandent \u00e0 Zoe de bien pouvoir remplir son profil sur le site de la conf\u00e9rence. Elle se connecte, se rend sur son compte et trouve le bon endroit o\u00f9 le faire. Lorsqu\u2019elle appuie sur le bouton \u201cupdate my picture\u201d, elle peut choisir entre prendre une photo directement avec son t\u00e9l\u00e9phone ou acc\u00e9der \u00e0 ses documents pour utiliser une photo d\u00e9j\u00e0 stock\u00e9e. Elle choisit la premi\u00e8re option et remplit son profile.<\/em><\/p>\n

Zoe choisit de prendre la photo directement avec son t\u00e9l\u00e9phone :<\/em>\"\"L\u2019input HTML5 de type file accepte d\u00e9sormais un attribute appel\u00e9 \u201caccept\u201d<\/a> dans lequel on peut lister les diff\u00e9rents types de fichiers accept\u00e9s en les s\u00e9parant par des virgules. Sur mobile, ce champ ouvre une bo\u00eete de dialogue native qui permet \u00e0 l\u2019utilisatrice de choisir la source du contenu (documents) ou acc\u00e9der directement \u00e0 l\u2019appareil photo :
\n <\/code><\/p>\n

Si vous souhaitez \u00e9viter la bo\u00eete de dialogue et ouvrir directement l\u2019appareil de photo il suffit d\u2019ajouter l\u2019attribut capture comme ceci :<\/p>\n

<\/code><\/p>\n

Et \u00e7a fonctionne aussi avec la capture de vid\u00e9o ou de son :<\/p>\n

<\/code><\/p>\n

<\/code><\/p>\n

Si vous voulez vous amuser j\u2019ai fait une petite d\u00e9mo des diff\u00e9rents cas possibles<\/a>.<\/p>\n

Un nouveau monde des possibles s\u2019ouvre \u00e0 nous maintenant que l\u2019on peut acc\u00e9der aux m\u00e9dias (vid\u00e9os, images et audio) directement dans le navigateur. On peut imaginer changer directement son avatar sur n\u2019importe quel site Responsive ou r\u00e9seau social en prenant directement une photo depuis le navigateur, prendre des photos ou des vid\u00e9os depuis le navigateur pour les mettre dans sa timeline. Plus besoin de prendre en avance les photos de son v\u00e9lo et les transf\u00e9rer sur son pc pour le vendre sur Leboncoin, il suffirait de les prendre \u00e0 la vol\u00e9e directement dans le navigateur au fur et \u00e0 mesure de la compl\u00e9tion de l\u2019annonce.<\/p>\n

S\u2019amuser avec les champs de m\u00e9dias<\/h3>\n

Si on va un cran plus loin, on peut imaginer combiner un champ qui prend une photo avec des filtres CSS3 pour recr\u00e9er Instagram directement dans le navigateur mobile.<\/p>\n

C\u2019est ce que Una s\u2019est amus\u00e9e \u00e0 faire avec\u00a0CSS gram<\/a>\u00a0:<\/p>\n

\"\"<\/p>\n

Guitar-tuner<\/a> est une web app plut\u00f4t fun qui demande l\u2019acc\u00e8s \u00e0 votre microphone pour ensuite vous aider \u00e0 accorder votre guitare. Le tout directement dans le navigateur sans la moindre applications \u00e0 installer. Plut\u00f4t pratique non ?\"\"<\/p>\n

Am\u00e9liorer son site de conf\u00e9rence pour en faire une Web App fonctionnelle<\/h2>\n

Dans cette seconde partie, je souhaite vous montrer comment il est possible de partir d\u2019un site responsive de conf\u00e9rence pour en am\u00e9liorer l\u2019exp\u00e9rience utilisateur et le transformer en Web App. Le concept d\u2019am\u00e9lioration est sans doute, du moins je le souhaite, assez familier pour vous. Je ne peux que vous encourager \u00e0 traiter ce qui va suivre comme des am\u00e9liorations progressives \u00e0 appliquer par-dessus un site existant d\u00e9j\u00e0 fonctionnel. Assurez-vous avant tout que les fonctionnalit\u00e9s principales qui font le c\u0153ur de votre site soient accessibles et fonctionnent sur le plus grand nombre d\u2019appareils possibles. Et ensuite seulement, am\u00e9liorez progressivement votre site avec une ic\u00f4ne de lancement, des notifications, du support hors ligne pour construire une exp\u00e9rience enrichie pour les navigateurs qui supportent ces APIs.<\/p>\n

Installer et lancer son site en tant que Progressive Web App<\/h3>\n

Pour acc\u00e9der \u00e0 vos sites, la plupart des utilisatrices l\u2019ont soit d\u00e9j\u00e0 perdu au milieu d\u2019un oc\u00e9an de favoris plus ou moins bien rang\u00e9s et vont cliquer dessus, vont taper l\u2019url dans la barre du haut (s\u2019ils ont r\u00e9ussi \u00e0 la m\u00e9moriser ou viennent souvent) ou alors vont tout simplement le chercher dans leur moteur de recherche favoris. Un des gros avantages des applications natives est leur ic\u00f4ne de lancement : elles sont pr\u00e9sentes, l\u00e0, \u00e0 attendre sagement les utilisatrices sur l\u2019\u00e9cran d\u2019accueil du mobile, pr\u00eates \u00e0 \u00eatre lanc\u00e9es directement \u00e0 tout instant.<\/p>\n

Un favicon sur l\u2019\u00e9cran d\u2019accueil<\/h4>\n

Imaginez maintenant que l\u2019on puisse faire la m\u00eame chose avec un site web et le lancer depuis l\u2019\u00e9cran d\u2019accueil de son mobile comme n\u2019importe quelle application native. Cette option est en faite d\u00e9j\u00e0 pr\u00e9sente dans la plupart des navigateurs mobiles modernes.<\/p>\n

Ajouter son site \u00e0 l\u2019\u00e9cran d\u2019accueil depuis Firefox, Safari et dans le menu de Chrome :<\/p>\n

<\/p>\n

Il vous faudra cependant cr\u00e9er plusieurs ic\u00f4nes de diff\u00e9rentes tailles pour satisfaire tous les navigateurs du march\u00e9, mais \u00e7a fonctionnera sur iOS, Android et Edge Mobile.<\/p>\n

Le favicon de mon portfolio sur diff\u00e9rents OS mobiles :\"\"<\/p>\n

Chrome 42+ et sa banni\u00e8re d\u2019installation<\/h4>\n

Toutes les utilisatrices sont h\u00e9las loin de se douter que cette fonctionnalit\u00e9 existe dans leur navigateur. Pour les aider, Chrome propose depuis sa version 42 une petite banni\u00e8re en bas sobrement appel\u00e9e \u201cApp Install Banner<\/a>\u201d. Elle permet aux utilisatrices d\u2019ajouter directement le site \u00e0 l\u2019\u00e9crans d\u2019accueil sans avoir \u00e0 aller chercher l\u2019option dans les menus du navigateur. Pour le moment la banni\u00e8re appara\u00eet si l\u2019utilisatrice a visit\u00e9 le site au moins deux fois avec une intervalle d\u2019au moins 5 minutes entre les visites. Mais Chrome affine souvent son algorithme donc c\u2019est susceptible de changer.<\/p>\n

En pr\u00e9parant sa conf\u00e9rence, Zoe visite plusieurs fois le site. Apr\u00e8s plusieurs visites, une petite banni\u00e8re appara\u00eet en bas de l\u2019\u00e9cran et lui permet d\u2019ajouter le site directement \u00e0 son \u00e9cran d\u2019accueil.<\/p>\n

Il y a \u00e9galement quelques crit\u00e8res techniques suppl\u00e9mentaires \u00e0 respecter pour avoir la banni\u00e8re sur son site parmi lesquels avoir un Service Worker d\u00e9clar\u00e9 et \u00eatre en HTTPS (j\u2019y reviendrai en d\u00e9tails dans la suite de l\u2019article) et avoir un fichier de manifest.json valide.<\/p>\n

Le fichier de Manifest pour les Web Apps<\/h4>\n

Le W3C Web App Manifest<\/a> est un simple fichier JSON qui va permettre \u00e0 la d\u00e9veloppeuse de contr\u00f4ler diff\u00e9rents aspects de sa Web App : son nom, l\u2019ic\u00f4ne de lancement, l\u2019\u00e9cran de lancement, la couleur du th\u00e8me et comment elle souhaite que son application soit lanc\u00e9e. Il existe un outil en ligne qui vous permet de v\u00e9rifier la validit\u00e9 de votre manifest<\/a>. Une fois le fichier cr\u00e9\u00e9, il faudra encore le lier \u00e0 votre site web avec la balise link<\/a>.
\n{
\n\"short_name\" : \"SuperConf\",
\n\"name\": \"SuperConf, an amazing conference\",
\n\/\/ Defines a default URL to launch
\n\"start_url\": \"\/index.html\",
\n\"icons\": [
\n{
\n\"src\": \"launchicon.png\",
\n\"sizes\": \"96x96\",
\n\"type\": \"image\/png\"
\n}
\n\/\/ Other icons go here
\n],
\n\/\/ Launches the website without a URL bar
\n\"display\": \"standalone\",
\n\/\/ Provides a site-wide theme color
\n\"theme_color\": \"#fa9c00\",
\n\/\/ Provides a background color for the launch screen
\n\"background_color\":\"#ffffff\"
\n}
\n<\/code><\/p>\n

Le Manifest est actuellement support\u00e9 sur Android Webview, Opera Mobile et Chrome pour Android<\/a> ainsi que sur Firefox<\/a>.<\/p>\n

Ecran de lancement<\/h4>\n

A partir de Chrome 47, les navigateurs vont r\u00e9cup\u00e9rer dans le fichier de manifest theme_color<\/strong>, background_color<\/strong>, name<\/strong> et votre favicon<\/strong> pour g\u00e9n\u00e9rer automatiquement un \u00e9cran de lancement qui sera affich\u00e9 pendant que le site se charge.<\/p>\n

Quand la connexion de Zoe est lente, elle verra durant le chargement un \u00e9cran de lancement compos\u00e9 de l\u2019ic\u00f4ne du site de la conf\u00e9rence avec une barre orange en haut et un fond blanc :\u00a0<\/em><\/p>\n

\"\"<\/p>\n

Personnaliser le mode d\u2019affichage du site<\/h4>\n

Avec la propri\u00e9t\u00e9 display mode<\/a> du manifest, les d\u00e9veloppeuses peuvent choisir comment le site se lancera depuis l\u2019\u00e9cran d\u2019accueil :<\/p>\n