Post on 20-May-2020
UpUp
Tran Aman 11105634Coulibaly Vamara 10806046
Plan1. Introduction2. Appcache3. Service workers4. Fonctionnement d’UpUp5. Démonstration6. Conclusion
2
Introduction
. Accéder au site en mode offline
. Offline First
3
AppCache (1)
. Fonctionne en parallèle du cache du navigateur.
. Ressources mises en cache donc chargement plus rapide.. Réduction de la charge du serveur car le navigateur ne télécharge uniquement que les ressources qui ont été modifiées sur le serveur.
4
AppCache (2) . AppCache se base sur un fichier manifest inclu dans l’application web.. Il faudra pour cela utiliser l’attribut manifest dans une balise <html>.
<html manifest="example.appcache">
...
</html>5
AppCache (3). Ce fichier texte regroupe les ressources que le navigateur doit mettre en cache pour l’accès hors-ligne.
CACHE MANIFEST
# v1 - 2011-08-13
# Ceci est un commentaire.
http://www.example.com/index.html
http://www.example.com/header.png
http://www.example.com/blah/blah
6
AppCache (4)
. Les deux autres sections d’un fichier manifest :- Network : Regroupe les ressources nécessitant une
connexion au serveur. - Fallback : Page à utiliser par le navigateur en cas de
ressource non accessible.
7
AppCache (5)Exemple de fichier manifest plus complet :
CACHE MANIFEST
# v1 2011-08-14
# This is another comment
index.html
cache.html
style.css
image1.png
# Fallback content
FALLBACK:
/ fallback.html
# Use from network if available
NETWORK:
network.html
8
Service Workers (1)
. Script chargé parallèlement aux scripts de notre page et qui va s'exécuter en dehors du contexte de notre page web.
. Pas d’accès au DOM.
. Communication via l’API postMessage.
. Utilisation intensive de promesses.
9
Service Workers (2)
. Le script se place en proxy de notre webapp pour intercepter les requêtes du serveur.
. Réponse avec un cache ou en récupérant les données du LocalStorage.
10
Exemple de Service Workers// ServiceWorker is a progressive technology. Ignore unsupported browsersif ('serviceWorker' in navigator) {
console.log('CLIENT: service worker registration in progress.'); navigator.serviceWorker.register('/service-worker.js').then(function() { console.log('CLIENT: service worker registration complete.'); }, function() { console.log('CLIENT: service worker registration failure.'); });} else { console.log('CLIENT: service worker is not supported.');}
11
Service Workers (3)
12
UpUp
. Bibliothèque javascript légère.
. Open source
. Ajoute des fonctionnalités offline aux pages web.
. Utilisation de services workers.13
Exemple de service workers de UpUp
// upup.js
start: function(settings) { this.addSettings(settings);
// register the service worker _serviceWorker.register(_settings.script, {scope: './'}).then(function(registration) { // Registration was successful if (_debugState) { console.log('ServiceWorker registration successful with scope: %c'+registration.scope, _debugStyle); }
14
Fonctionnement d’UpUp
15
Fonctionnement d’UpUp
16
Fonctionnement d’UpUp
17
Fonctionnement d’UpUp
. A noter qu’il est important de placer les scripts à la racine du site sinon les fichiers auxquels nous devons accéder en offline ne seront pas disponibles immédiatement.
18
Fonctionnement d’UpUp// src/upup.sw.js
self.addEventListener('fetch', function(event) { event.respondWith( // try to return untouched request from network first fetch(event.request.url, { mode: 'no-cors' }).catch(function() { // if it fails, try to return request from the cache return caches.match(event.request).then(function(response) { if (response) { return response; } // if not found in cache, return default offline content if (event.request.headers.get('accept').includes('text/html')) { return caches.match('sw-offline-content'); } }) }) );})
19
Contraintes
. Afin que le script fonctionne, il faut nécessairement :- Une connexion HTTPS sur le site- Un navigateur moderne ( Chrome 40+, Opera 27+,
Firefox 41+) , IE n’est pas pris en compte par UpUp.- La présence du fichier UpUp à la racine du site.
20
Démonstration
21
UpUpAvantages :. Script léger.. Facile d’utilisation.. Première librairie Javascript pour le offline.
Inconvénients :. 1 seule page offline.. Préciser l’ensemble des fichiers à mettre en cache.. Utilisation de HTTPS.. Petite communauté d’utilisateur.
22
Conclusion
. Librairie assez utile de nos jours étant donné la montée en puissance des dispositifs mobiles.. Peut être associer avec d’autres librairies➔ PouchDB pour la synchronisation des données➔ Angular, Backbone, React...
23
Merci de votre attention !
24
Références. Site officiel : https://www.talater.com/upup/
. Documentation : http://www.lafermeduweb.net/billet/upup-affichez-vos-pages-web-en-mode-deconnecte-offline-first-1832.html
. Tuto : https://www.talater.com/upup/getting-started-with-offline-first.html
Article: https://auth0.com/blog/2015/10/30/creating-offline-first-web-apps-with-service-workers/https://css-tricks.com/serviceworker-for-offline/
25