Post on 16-Apr-2017
Le futur du web
Dans le navigateur mobile
Stéphanie Walter - Confoo 2016 - @WalterStephanie
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
Julie, mon utilisatrice.
Chapitre 1.
Accéder aux flux vidéos et audio de l’appareil directement dans le navigateur
Conversation vidéo directement dans le navigateur
Pas besoin d’installer (ni de maintenir) le moindre plugin navigateur ou application native.
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.
getUserMedia/Stream API
3 valeurs pour accept : image, video, audio
<input type="file" id="take-picture" accept="image/*">
getUserMedia/Stream API
Démo: codepen.io/stephaniewalter/pen/xZoxOb
<input type="file" id="take-picture" accept="image/*">
<input type="file" id="take-picture" accept="image/*">
getUserMedia/Stream API
Donne accès à la camera et au micro de l’utilisateur
Support
WebRTC getUserMedia/Stream API
Chapitre 2.
Transformer son site de conférence en web app
Installation et lancement sous forme de web app
W3C Web App Manifest
Un fichier manifest.json qui va nous permettre de déclarer notre site comme une web app.
manifest.json
"theme_color": "#cccccc"
Adapter la couleur du navigateur à son site
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)
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.
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.
Exemple avec mon portfolio sur 3 OS
Le site pourra alors être lancé directement depuis l’écran d’accueil.
"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.
"display": "standalone"
Exemples de sites en mode web app
Attention à <meta name="apple-mobile-web-app-capable”>
En mode wep-app-capable les liens sont ouverts dans de nouveaux onglets.
À 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 »
Un outil pour les générer tous
realfavicongenerator.net
Accès aux notifications
Demander l’accès aux notifications
Pensez à expliquer pourquoi vous demandez à vos utilisateurs l'accès aux notifications
Demander l’accès aux notifications
Pensez à expliquer pourquoi vous demandez à vos utilisateurs l'accès aux notifications
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.
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.
Support
Service Worker Push API
Tester les notifications
notification-generator
Accès au programme hors ligne
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.
Exemples de web app fonctionnant hors ligne
https://www.pokedex.org/ https://2048-opera-pwa.surge.sh/
De la vélotypie en temps réel grâce à Web Socket
Image Romy Tetue
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.
Web Sockets
Web Sockets permet d’ouvrir une connexion permanente entre le navigateur et le serveur
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.
Support
Ambient Light API Environment Media Features
@media (light-level: dim | normal
| washed)
Working Draft, Aucun support
Chapitre 3.
Image michael davis-burchat
Adapter son site à la situation de l’utilisateur
Géolocalisation et statut de la batterie
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.
Geolocation API
Support
Pensez au fallback !
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.).
Battery Status API
Une API qui permet d’accéder au niveau de la batterie de l’appareil de l’utilisateur.
Découverte d’URL en Bluetooth
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
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.
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.
Bluetooth API
Dans le futur, connecter directement des objets (montres, capteurs Nest, etc.) au navigateur directement en Bluetooth ?
Des sondages connectés ?
Diffuser devant chaque salle une url avec le formulaire de sondage de la conférence.
À vous de jouer !
Parce que ce n’est que le début d’un web dans le navigateur mobile très prometteur.
• 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.
• 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
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