Save 37% off PRO during our Black Friday Sale! »

Le futur du web dans le navigateur mobile ?

F383c6a4dc55e331bbe2987b622cee6b?s=47 Stéphanie Walter
February 26, 2016

Le futur du web dans le navigateur mobile ?

Vous rêvez de pousser des informations sous forme de notifications en fonction de la localisation géographique de vos utilisateurs mobiles ? D'un système de chat 100% dans le navigateur avec vidéo et audio intégré sans la moindre application mobile à installer ? Je vous propose un petit tour d’horizon illustré de cas réels et concrets de ce que les APIs HTML5 et CSS3 pourraient nous réserver pour le futur du web dans nos navigateurs mobiles.

F383c6a4dc55e331bbe2987b622cee6b?s=128

Stéphanie Walter

February 26, 2016
Tweet

Transcript

  1. Le futur du web Dans le navigateur mobile Stéphanie Walter

    - Confoo 2016 - @WalterStephanie
  2. Designer web & mobile. Spécialisée en design d’interface et expérience

    utilisateur. Je suis une designer qui adore mettre les mains et les neurones dans le code. www.stephaniewalter.fr @WalterStephanie Disponible en freelance et chez Alsacréations
  3. Julie, mon utilisatrice.

  4. Chapitre 1. Accéder aux flux vidéos et audio de l’appareil

    directement dans le navigateur
  5. Conversation vidéo directement dans le navigateur Pas besoin d’installer (ni

    de maintenir) le moindre plugin navigateur ou application native.
  6. WebRTC Ouvrir un canal de communication en temps réel directement

    entre clients sans passer par le serveur pour partager du son, de la vidéo et des données.
  7. getUserMedia/Stream API 3 valeurs pour accept : image, video, audio

    <input type="file" id="take-picture" accept="image/*">
  8. getUserMedia/Stream API Démo: codepen.io/stephaniewalter/pen/xZoxOb <input type="file" id="take-picture" accept="image/*">

  9. <input type="file" id="take-picture" accept="image/*"> getUserMedia/Stream API Donne accès à la

    camera et au micro de l’utilisateur
  10. Accordeur de guitare dans le navigateur guitar-tuner.appspot.com

  11. Support WebRTC getUserMedia/Stream API

  12. Chapitre 2. Transformer son site de conférence en web app

  13. Installation et lancement sous forme de web app

  14. W3C Web App Manifest Un fichier manifest.json qui va nous

    permettre de déclarer notre site comme une web app. manifest.json
  15. "theme_color": "#cccccc" Adapter la couleur du navigateur à son site

  16. Ajouter le favicon à l’écran d’accueil Une bannière encourage l’utilisateur

    à ajouter le site à l’écran d’accueil de son téléphone. (Chrome 42+ Android)
  17. Ajouter le favicon à l’écran d’accueil Même sans la bannière

    Chrome, il est possible d’ajouter ce favicon depuis n’importe quel navigateur. Hélas peu d’utilisateurs le savent.
  18. Ajouter le favicon à l’écran d’accueil Le favicon s’ajoute à

    l’écran d’accueil au même niveau que les icône des applications natives.
  19. Exemple avec mon portfolio sur 3 OS Le site pourra

    alors être lancé directement depuis l’écran d’accueil.
  20. "display": "standalone" Lancer un site en mode web app Avec

    le manifest, il est possible de lancer le site en plein écran sans barre navigateur, comme si c’était une application.
  21. "display": "standalone" Exemples de sites en mode web app

  22. Attention à <meta name="apple-mobile-web-app-capable”> En mode wep-app-capable les liens sont

    ouverts dans de nouveaux onglets.
  23. À partir de Chrome 47 Android : un écran de

    chargement est automatiquement généré à partir de la couleur de fond, l’icône et le nom du site déclarés dans le manifest. « Splashscreen »
  24. Un outil pour les générer tous realfavicongenerator.net

  25. Accès aux notifications

  26. Demander l’accès aux notifications Pensez à expliquer pourquoi vous demandez

    à vos utilisateurs l'accès aux notifications
  27. Demander l’accès aux notifications Pensez à expliquer pourquoi vous demandez

    à vos utilisateurs l'accès aux notifications
  28. Des notifications intégrées au système d’exploitation Les notifications sont disponibles

    même si l’utilisateur a quitté le site. Elles utilisent le centre de notifications natives de l’appareil.
  29. Service Worker (+ Push API) Un petit JavaScript qui tourne

    en tâche de fond, s’exécute même si le site / la web app sont fermés pour faire le relais, intercepter les requêtes, etc. C’est une sorte de mini proxy.
  30. Support Service Worker Push API

  31. Tester les notifications notification-generator

  32. Accès au programme hors ligne

  33. Un programme réactif et disponible hors ligne On récupère localement

    les fichiers nécessaires à l’affichage du programme (réactivité) et on vérifie en arrière plan qu’il n’y a pas eu de modifications depuis.
  34. Exemples de web app fonctionnant hors ligne https://www.pokedex.org/ https://2048-opera-pwa.surge.sh/

  35. De la vélotypie en temps réel grâce à Web Socket

    Image Romy Tetue
  36. Vélotypie et Web Sockets Une connexion est ouverte entre les

    appareils des utilisateurs et le service. La transcription écrite est ensuite poussée en temps réel directement dans le navigateur.
  37. Web Sockets Web Sockets permet d’ouvrir une connexion permanente entre

    le navigateur et le serveur
  38. Détecter la luminosité ambiante Grâce aux capteurs sur nos téléphones,

    imaginons adapter les contrastes d’un site en fonction de la luminosité ambiante.
  39. Support Ambient Light API Environment Media Features @media (light-level: dim

    | normal | washed) Working Draft, Aucun support
  40. Chapitre 3. Image michael davis-burchat Adapter son site à la

    situation de l’utilisateur
  41. Géolocalisation et statut de la batterie

  42. Se géolocaliser pour trouver un vélo On peut demander l’accès

    à la localisation de l’utilisateur mais également surveiller les déplacements.
  43. Geolocation API Support Pensez au fallback !

  44. S’adapter au niveau de batterie Proposons des ressources moins gourmandes

    en fonction du niveau de batterie de l’utilisateur ! Surtout sur des fonctionnalités qui consomment beaucoup (GPS, P2P, etc.).
  45. Battery Status API Une API qui permet d’accéder au niveau

    de la batterie de l’appareil de l’utilisateur.
  46. Découverte d’URL en Bluetooth

  47. Détecter et se connecter à une borne en Bluetooth Se

    connecter et échanger depuis le navigateur avec des appareils aux alentours sera possible grâce au Bluetooth
  48. Récupérer une URL en Bluetooth Une fois connectée, la borne

    envoie une url unique et sécurisée qui s’ouvre dans le navigateur de l’utilisateur.
  49. Déblocage du vélo Une fois la transaction effectuée, le serveur

    renvoie l’information à la borne en Web Socket, qui débloque alors le cadenas du vélo.
  50. Bluetooth API Dans le futur, connecter directement des objets (montres,

    capteurs Nest, etc.) au navigateur directement en Bluetooth ?
  51. Google et le Physical Web

  52. Des sondages connectés ? Diffuser devant chaque salle une url

    avec le formulaire de sondage de la conférence.
  53. À vous de jouer ! Parce que ce n’est que

    le début d’un web dans le navigateur mobile très prometteur.
  54. • Demain tout passera par mon navigateur mobile ! •

    Média, vidéo, audio : – Liste des APIs HTML5 : https://whatwebcando.today/ – Compatibilité navigateur mobile : http://mobilehtml5.org/ – Tutoriel : Getting Started with WebRTC – Une démo de vidéo conférence 100% dans le navigateur – Une démo de camera API • Transformer son site en webapp : – Pour se lancer dans les web apps progressives : Getting started with Progressive Web Apps , Installable Web Apps with the Web App Manifest in Chrome for Android et Progressive Web App: A New Way to Experience Mobile – Bannière d’ajout à l’écran d’accueil (chrome 42) – Ajouter un splashscreen (chrome 47) Crédits & Bibliographie Merci Jean-Pierre pour l’aide sur la relecture et les APIs, Marie et Hubert pour la relecture.
  55. • Devenir un professionnel des notifications – Guidelines UX pour

    les notifications Push – Pour jouer avec des notifications push : https://tests.peter.sh/notification- generator, https://simple-push-demo.appspot.com/ et http://goroost.com/try- web-push • Introduction to Service Worker pour se lancer dans les Service Workers et Beyond Offline pour découvrir d’autres choses qu’on peut faire avec des Service Workers • Pour connaître le statut des Service Workers : isserviceworkerready Crédits & Bibliographie
  56. Partagés sous licence Attribution - Pas d’Utilisation Commerciale - Pas

    de Modification 3.0 France Designer web & mobile. Spécialisée en interface et expérience utilisateur. www.stephaniewalter.fr @WalterStephanie inpx.it/futur-web-mobile-confoo-2016