L'objectif de ce TP est de transformer une application de TODO classique en application offline (et mobile).
Démarrez d'un projet de one page application simple.
Par exemple la TODO list de Jérôme Gravel-Niquet ré-écrite par TodoMVC. Une archive du projet est disponible ici.
liens utiles :
1. Regarder les fichiers qui sont utilisés par l'application. Créez un fichier .manifest et ajouter une référence à ces fichiers
2. Ajouter à votre fichier html un pointeur vers :
<html lang="en" manifest="cache.manifest"> 3. En utilisant par exemple le mode offline de Chrome, testez si votre application fonctionne toujours correctement en mode offline. Pour cela il faut évidemment qu'elle soit sur un serveur (local ou distant).
1. Faire un changement dans votre application, par exemple la taille de la police des todos.
2. Tester si la page est correctement mise à jour quand on retourne en offline.
3. Pour que cela soit le cas, il faut avoir mis à jour le fichier manifest, par exemple en rajoutant un commentaire au début indiquant un numéro de version.
3bis. Il faut aussi vérifier que votre fichier manifest n'a pas été lui même caché par votre navigateur, dans ce cas il faut modifier votre serveur pour qu'il indique de ne pas cacher les fichiers manifest.
4. Recharger encore, les ressources étant toujours présentes dans le cache rien n'a été modifié normalement. Il faut rajoute un listener sur l'applicationCache pour forcer une mise à jour.
window.applicationCache.addEventListener('updateready', function() {
// forcer le rechargement complet de la page, ou faire un rechargement plus subtil en fonction des changements attendus.
}); 5. Rajouter une fausse page à l'application qui serait responsable d'afficher tous les todos de toutes les listes stockées sur le serveur. Une telle page aurait peu de raisons d'être mise en cache, créez une page de Fallback qui s'affiche au lieu de la page normale lorsqu'on est offline.
1. Ajouter un accès aux devices API, par exemple pour rajouter une position géographique aux todos.
2. Que se passe t'il en cas d'utilisation de require ?
3. Tout ça c'était trop facile, si on utilisait plutôt les service workers...