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.

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