Introduction Progressive Web App (PWA)
Consultant Web & Mobile
CTO de l'agence Taiwa
Quand un mobinaute réussit à accéder plus facilement à l’information qu’il recherche, il y a moins de chances qu’il s'en lasse...
Application Web "Mobile-First " proposant les fonctionnalités habituelles
Utilissation la puissance d'un navigateur Web
Disponibilité en mode hors ligne
Possibilité d'ajout parmi nos applications de notre device mobile.
1. Service Workers
2. Web App Manifest
3. Web Notifications
Un site existant ne peut pas simplement se transformer en PWA (et ce serait trop beau...).
Une connexion au serveur sécurisée et vérifiée (HTTPS-SSL)
Disponible pour Android pour Chrome, Opéra et Firefox
Apple avec Safari iOS le nouveau Internet Explorer?
if (navigator.online)
or
navigator.addEventListener('online', …)
navigator.addEventListener('offline', …)
Javascript Love
{ name: "My Awesome Web App",
short_name: "Awesome App",
icons: [{ src: "images/touch/icon-96x96.png", sizes: "96x96", type: "image/png" }, { src: "images/touch/icon-128x128.png", sizes: "128x128", type: "image/png" }, { src: "images/touch/apple-touch-icon.png", sizes: "152x152", type: "image/png" }, { src: "images/touch/chrome-touch-icon-192x192.png", sizes: "192x192", type: "image/png" }], start_url: "/index.html?homescreen=1", display: "standalone", background_color: "#3E4EB8", theme_color: "#2F3BA2" }
IndexedDB est une base de données orienté objet pour JavaScript.
IndexedDB vous permet de stocker et de récupérer des objets qui sont indexés avec une clef
Démo
<img src="default.png" srcset="small.png 320w, medium.png 640w, large.png 1024w, xl.png 1920w" sizes="(min-width:20em) and (max-width:50em) 20em, (min-width:50em) and (max-width:80em) 40em, (min-width:40em) 10em" alt="Test" />
Javascript Stratégie
References
Liste des Technologies: https://fr.goodbarber.com/pwa/technology/
Documentation: https://developers.google.com/web/fundamentals/architecture/app-shell