Slide 1

Slide 1 text

Le futur du web Dans le navigateur mobile Stéphanie Walter - Confoo 2016 - @WalterStephanie

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Julie, mon utilisatrice.

Slide 4

Slide 4 text

Chapitre 1. Accéder aux flux vidéos et audio de l’appareil directement dans le navigateur

Slide 5

Slide 5 text

Conversation vidéo directement dans le navigateur Pas besoin d’installer (ni de maintenir) le moindre plugin navigateur ou application native.

Slide 6

Slide 6 text

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.

Slide 7

Slide 7 text

getUserMedia/Stream API 3 valeurs pour accept : image, video, audio

Slide 8

Slide 8 text

getUserMedia/Stream API Démo: codepen.io/stephaniewalter/pen/xZoxOb

Slide 9

Slide 9 text

getUserMedia/Stream API Donne accès à la camera et au micro de l’utilisateur

Slide 10

Slide 10 text

Accordeur de guitare dans le navigateur guitar-tuner.appspot.com

Slide 11

Slide 11 text

Support WebRTC getUserMedia/Stream API

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Installation et lancement sous forme de web app

Slide 14

Slide 14 text

W3C Web App Manifest Un fichier manifest.json qui va nous permettre de déclarer notre site comme une web app. manifest.json

Slide 15

Slide 15 text

"theme_color": "#cccccc" Adapter la couleur du navigateur à son site

Slide 16

Slide 16 text

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)

Slide 17

Slide 17 text

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.

Slide 18

Slide 18 text

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.

Slide 19

Slide 19 text

Exemple avec mon portfolio sur 3 OS Le site pourra alors être lancé directement depuis l’écran d’accueil.

Slide 20

Slide 20 text

"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.

Slide 21

Slide 21 text

"display": "standalone" Exemples de sites en mode web app

Slide 22

Slide 22 text

Attention à

Slide 23

Slide 23 text

À 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 »

Slide 24

Slide 24 text

Un outil pour les générer tous realfavicongenerator.net

Slide 25

Slide 25 text

Accès aux notifications

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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.

Slide 29

Slide 29 text

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.

Slide 30

Slide 30 text

Support Service Worker Push API

Slide 31

Slide 31 text

Tester les notifications notification-generator

Slide 32

Slide 32 text

Accès au programme hors ligne

Slide 33

Slide 33 text

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.

Slide 34

Slide 34 text

Exemples de web app fonctionnant hors ligne https://www.pokedex.org/ https://2048-opera-pwa.surge.sh/

Slide 35

Slide 35 text

De la vélotypie en temps réel grâce à Web Socket Image Romy Tetue

Slide 36

Slide 36 text

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.

Slide 37

Slide 37 text

Web Sockets Web Sockets permet d’ouvrir une connexion permanente entre le navigateur et le serveur

Slide 38

Slide 38 text

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.

Slide 39

Slide 39 text

Support Ambient Light API Environment Media Features @media (light-level: dim | normal | washed) Working Draft, Aucun support

Slide 40

Slide 40 text

Chapitre 3. Image michael davis-burchat Adapter son site à la situation de l’utilisateur

Slide 41

Slide 41 text

Géolocalisation et statut de la batterie

Slide 42

Slide 42 text

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.

Slide 43

Slide 43 text

Geolocation API Support Pensez au fallback !

Slide 44

Slide 44 text

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.).

Slide 45

Slide 45 text

Battery Status API Une API qui permet d’accéder au niveau de la batterie de l’appareil de l’utilisateur.

Slide 46

Slide 46 text

Découverte d’URL en Bluetooth

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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.

Slide 49

Slide 49 text

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.

Slide 50

Slide 50 text

Bluetooth API Dans le futur, connecter directement des objets (montres, capteurs Nest, etc.) au navigateur directement en Bluetooth ?

Slide 51

Slide 51 text

Google et le Physical Web

Slide 52

Slide 52 text

Des sondages connectés ? Diffuser devant chaque salle une url avec le formulaire de sondage de la conférence.

Slide 53

Slide 53 text

À vous de jouer ! Parce que ce n’est que le début d’un web dans le navigateur mobile très prometteur.

Slide 54

Slide 54 text

• 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.

Slide 55

Slide 55 text

• 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

Slide 56

Slide 56 text

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