Introduction aux Progressives Web App

Présentation fait le 19 mars 2016 à l'occasion de l'IWD 16 (Internatinal Women' Day)

Transcript

1. Progressive Web Une nouvelle approche pour un Web vraiment universel Amen AMOUZOU, @amenophis1er
2. Progressive Web App Pourquoi le Progressive Web Nouvelle approche pour des applications Web combinant les meilleurs de la technologies Web et des applications natives. 10 critères 1. Progressif 2. Responsif 3. Indépendant de la connectivité 4. App-Like 5. Toujours à jour 6. Sécurisé 7. Discoverable 8. Re-engageable 9. Installable 10. Linkable
3. Progressive Web App Critère 1 : amélioration progressive Consiste en 1. la prise en compte des principes d'accessibilité, de sémantique et de référencement. 2. séparation stricte entre le fond & la forme Objectif : proposer un contenu simple et rendre un service minimum à tous, tout en améliorant progressivement l'affichage proposé en fonction de l'équipement de l'internaute.
4. Progressive Web App Encore appelé Responsive Web Design (RWD) Objectif : offrir une expérience d’utilisation confortable quelque soit le support de consultation. Critère 2 : appli web adaptif
5. Progressive Web App Grâce à l’utilisation des Services Worker, il est possible aujourd’hui de gérer depuis son application Web, les situations de mauvaises connexions ou d’environnement hors-ligne. Critère 3 : pour tout type de connexion
6. Progressive Web App Critère 4 : UI d’appli native Proposer une interface d’utilisation proche des applications natives grâce au modèle “application shell”. L’App Shell Model, fourni un ensemble de fichiers CSS, HTML pour servir de modèle et de contenant tout en offrant : 1. chargement rapide 2. peut être mise en cache 3. affiche dynamiquement les contenus
7. Progressive Web App Critère 5 : toujours à jour ! Toujours grâce au Service Worker, il est facile de mettre à jour les données du site en arrière plan, de façon continue.
8. Progressive Web App Critère 6 : sécurisé Les applications Web progressives doivent impérativement être servies via HTTPS pour empêcher les interceptions et s’ assurer que les contenus échangés n’ont pas été altérés.
9. Progressive Web App Critère 7 : identifiable comme appli Avec les récents travaux du W3C sur le sujet, et le support progressif des navigateurs du “Manifest”, il est possible - d’indiquer si son site est une application (pour les navigateurs et les moteurs de recherches) - de contrôler comment son application peut-elle s’ installer - et surtout comment peut t-on la lancer. Dans l’avenir, d’autres options seront offertes aux développeurs à travers le manifest !
10. Progressive Web App Critère 8 : (re)-engageable Avec les nouvelles possibilités offertes par le Service Worker, il est recommander de doter les appl web progressif des fonctionnalités engage l’utilisateur et à le maintenir connecté : notification push.
11. Progressive Web App Critère 9 : installable L’utilisation du fichier manifest, donne la possibilité de proposer l’installation automatique de l’application Web. L’utilisateur peut à tout moment choisir d’installer l’ application Web.
12. Progressive Web App Critère 10 : “linkable” Les applications Web progressives doivent permettre le partage facile de contenu par l’URL.
13. Progressive Web App 1. Amélioration progressive : https://fr.wikipedia. org/wiki/Amélioration_progressive 2. Site Web adaptif : https://fr.wikipedia.org/wiki/Site_web_adaptatif 3. Application Shell : https://github.com/GoogleChrome/application-shell 4. Service Worker : https://slightlyoff.github. io/ServiceWorker/spec/service_worker/ 5. Installation d’application Web : https://developers.google. com/web/fundamentals/engage-and-retain/app-install-banners/?hl=en Documentation