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

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