UpUp...AppCache (2). AppCache se base sur un fichier manifest inclu dans l’ application web.. Il...
25
UpUp Tran Aman 11105634 Coulibaly Vamara 10806046
Transcript of UpUp...AppCache (2). AppCache se base sur un fichier manifest inclu dans l’ application web.. Il...
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
