Progressive Web Apps Florian BAUTRY Seymour VASSAULT DEROUIN Loïc BOUSQUET
Progressive Web Apps
Florian BAUTRY
Seymour VASSAULT DEROUIN
Loïc BOUSQUET
Plan● Qu’est-ce que c’est ?
● Pourquoi ?
● Service workers
● Manifest.json
● Lighthouse
● Conclusion
● Demonstration
2
Qu’est-ce que c’est ?Mix entre les applications web et les applications natives
● Pas une application native donc pas d’installation
● Responsive
● Nécessite un navigateur
● Hors-ligne grâce aux service-workers
● Manifest.json pour définir les méta données
3
Qu’est-ce que c’est ?● Fiable : HTTPS, disponible n’importe où, y compris hors ligne
● Rapide : Au bout de 3s, on perd 50% des utilisateurs
● Immersif : Animations 60FPS, au plus proche d’une application native
Si les critères sont réunis Chrome propose d’ajouter l’application à l’écran d’accueil
4
Pourquoi ?Temps de chargement réduit grâce entre autres au cache
Application légère, fichiers JavaScript de ~150ko
20 fois plus de temps passé sur des applis que sur le navigateur
Mises à jour plus facile
Facebook : 75Mo -> 40minutes en 2G
5
Service workersScript qui s'exécute en arrière-plan
Proxy entre l’application et internet
Utilise les promesses
6
Service workersIndex.html
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/service-worker.js');
});
}
service-worker.js
console.log("hello world!");
7
Service workersMise en cache de l’app shell
this.addEventListener('install', function(event) {
event.waitUntil(
caches.open('v1').then(function(cache) {
return cache.addAll([
'/css/style.css',
'/js/app.js',
'/index.html',
]);
})
);
});
8
App shell Contenu
Service workersProxy entre l’application et internet
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request)
.then(function(response) {
if (response) {
return response;
}
return fetch(event.request);
}
)
);
});
9
Manifest.json <link rel="manifest" href="/manifest.json">
{
"short_name": "NASA OSS",
"start_url": "/",
"display": "standalone",
"theme_color": "#212121",
"background_color": "#212121",
"icons": [
{
"src": "images/logos/nasa-192.png",
"sizes": "192x192",
"type": "image/png"
} ],
"name": "NASA Open Source Software",
}
10
LighthouseExtension chrome pour analyser les applications web
Génère un rapport en expliquant les points qui vont pas
Propose des solutions
Note sur 100
Basé sur les critères définis par Google
Open source
11
ConclusionTrès récent et pas supporté par tous les navigateurs
En pleine évolution, discussions en cours entre les plus gros acteurs (Google I/O)
Surtout utile dans des cas avec des connexions limitées
Performant mais dépendant des évolutions technologiques mobiles
Mêmes limites qu’un site internet
12
Pour aller plus loinInstant Loading: Building offline-first Progressive Web Apps
Progressive Web App Summit 2016
Google I/O 2017 - Playlist youtube
13
Démonstration
https://github.com/Ob-La-Di/edtpwa
https://edtlyon1.herokuapp.com/
14