progressive web apps · progressive web apps florian bautry seymour vassault derouin loïc...
TRANSCRIPT
![Page 1: Progressive Web Apps · Progressive Web Apps Florian BAUTRY Seymour VASSAULT DEROUIN Loïc BOUSQUET. Plan Qu’est-ce que c’est ? Pourquoi ? Service workers Manifest.json Lighthouse](https://reader036.vdocuments.site/reader036/viewer/2022070710/5ec568180e30496ba645876b/html5/thumbnails/1.jpg)
Progressive Web Apps
Florian BAUTRY
Seymour VASSAULT DEROUIN
Loïc BOUSQUET
![Page 2: Progressive Web Apps · Progressive Web Apps Florian BAUTRY Seymour VASSAULT DEROUIN Loïc BOUSQUET. Plan Qu’est-ce que c’est ? Pourquoi ? Service workers Manifest.json Lighthouse](https://reader036.vdocuments.site/reader036/viewer/2022070710/5ec568180e30496ba645876b/html5/thumbnails/2.jpg)
Plan● Qu’est-ce que c’est ?
● Pourquoi ?
● Service workers
● Manifest.json
● Lighthouse
● Conclusion
● Demonstration
2
![Page 3: Progressive Web Apps · Progressive Web Apps Florian BAUTRY Seymour VASSAULT DEROUIN Loïc BOUSQUET. Plan Qu’est-ce que c’est ? Pourquoi ? Service workers Manifest.json Lighthouse](https://reader036.vdocuments.site/reader036/viewer/2022070710/5ec568180e30496ba645876b/html5/thumbnails/3.jpg)
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
![Page 4: Progressive Web Apps · Progressive Web Apps Florian BAUTRY Seymour VASSAULT DEROUIN Loïc BOUSQUET. Plan Qu’est-ce que c’est ? Pourquoi ? Service workers Manifest.json Lighthouse](https://reader036.vdocuments.site/reader036/viewer/2022070710/5ec568180e30496ba645876b/html5/thumbnails/4.jpg)
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
![Page 5: Progressive Web Apps · Progressive Web Apps Florian BAUTRY Seymour VASSAULT DEROUIN Loïc BOUSQUET. Plan Qu’est-ce que c’est ? Pourquoi ? Service workers Manifest.json Lighthouse](https://reader036.vdocuments.site/reader036/viewer/2022070710/5ec568180e30496ba645876b/html5/thumbnails/5.jpg)
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
![Page 6: Progressive Web Apps · Progressive Web Apps Florian BAUTRY Seymour VASSAULT DEROUIN Loïc BOUSQUET. Plan Qu’est-ce que c’est ? Pourquoi ? Service workers Manifest.json Lighthouse](https://reader036.vdocuments.site/reader036/viewer/2022070710/5ec568180e30496ba645876b/html5/thumbnails/6.jpg)
Service workersScript qui s'exécute en arrière-plan
Proxy entre l’application et internet
Utilise les promesses
6
![Page 7: Progressive Web Apps · Progressive Web Apps Florian BAUTRY Seymour VASSAULT DEROUIN Loïc BOUSQUET. Plan Qu’est-ce que c’est ? Pourquoi ? Service workers Manifest.json Lighthouse](https://reader036.vdocuments.site/reader036/viewer/2022070710/5ec568180e30496ba645876b/html5/thumbnails/7.jpg)
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
![Page 8: Progressive Web Apps · Progressive Web Apps Florian BAUTRY Seymour VASSAULT DEROUIN Loïc BOUSQUET. Plan Qu’est-ce que c’est ? Pourquoi ? Service workers Manifest.json Lighthouse](https://reader036.vdocuments.site/reader036/viewer/2022070710/5ec568180e30496ba645876b/html5/thumbnails/8.jpg)
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
![Page 9: Progressive Web Apps · Progressive Web Apps Florian BAUTRY Seymour VASSAULT DEROUIN Loïc BOUSQUET. Plan Qu’est-ce que c’est ? Pourquoi ? Service workers Manifest.json Lighthouse](https://reader036.vdocuments.site/reader036/viewer/2022070710/5ec568180e30496ba645876b/html5/thumbnails/9.jpg)
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
![Page 10: Progressive Web Apps · Progressive Web Apps Florian BAUTRY Seymour VASSAULT DEROUIN Loïc BOUSQUET. Plan Qu’est-ce que c’est ? Pourquoi ? Service workers Manifest.json Lighthouse](https://reader036.vdocuments.site/reader036/viewer/2022070710/5ec568180e30496ba645876b/html5/thumbnails/10.jpg)
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
![Page 11: Progressive Web Apps · Progressive Web Apps Florian BAUTRY Seymour VASSAULT DEROUIN Loïc BOUSQUET. Plan Qu’est-ce que c’est ? Pourquoi ? Service workers Manifest.json Lighthouse](https://reader036.vdocuments.site/reader036/viewer/2022070710/5ec568180e30496ba645876b/html5/thumbnails/11.jpg)
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
![Page 12: Progressive Web Apps · Progressive Web Apps Florian BAUTRY Seymour VASSAULT DEROUIN Loïc BOUSQUET. Plan Qu’est-ce que c’est ? Pourquoi ? Service workers Manifest.json Lighthouse](https://reader036.vdocuments.site/reader036/viewer/2022070710/5ec568180e30496ba645876b/html5/thumbnails/12.jpg)
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
![Page 13: Progressive Web Apps · Progressive Web Apps Florian BAUTRY Seymour VASSAULT DEROUIN Loïc BOUSQUET. Plan Qu’est-ce que c’est ? Pourquoi ? Service workers Manifest.json Lighthouse](https://reader036.vdocuments.site/reader036/viewer/2022070710/5ec568180e30496ba645876b/html5/thumbnails/13.jpg)
Pour aller plus loinInstant Loading: Building offline-first Progressive Web Apps
Progressive Web App Summit 2016
Google I/O 2017 - Playlist youtube
13
![Page 14: Progressive Web Apps · Progressive Web Apps Florian BAUTRY Seymour VASSAULT DEROUIN Loïc BOUSQUET. Plan Qu’est-ce que c’est ? Pourquoi ? Service workers Manifest.json Lighthouse](https://reader036.vdocuments.site/reader036/viewer/2022070710/5ec568180e30496ba645876b/html5/thumbnails/14.jpg)
Démonstration
https://github.com/Ob-La-Di/edtpwa
https://edtlyon1.herokuapp.com/
14