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

Accordeur de guitare dans le navigateur

guitar-tuner.appspot.com

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 ?

Google et le Physical Web

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