Discussion :

[laurentg2003]

Bonjour,
Je développe un site web basé sur l'architecture MVC pour Pc Smartphone etc.
pour simplifier lors d'un clic sur un lien quelconque du menu ,le nom de la page est récupéré transmis à une requete ajax qui pointe vers le modèle ou proxy php et là le paramètre est recuperé par une requete SQL
celle ci retourne le contenu demandé celui ci est encodé en un objet JSON
et est récupéré par une autre requete ajax et là comme un moteur de templates la page est créée dynamiquement (via des tags)
tout ceci est en javaScript sauf le proxy php
Le probleme est donc le suivant
je voudrais ensuite refermer la connexion ajax et stocker les données via HTML5 coté client et benéficier des avantages de HTML5 rapidité fluidité offline etc
alors il y a l'embarras du choix :localStorage qui est assez bien supporté par les navigateurs mais est ce suffisant pour stocker toutes les données du site?
créer une base de donnée coté client via indexed Database qui n'est pas pris en charge par SAFARI Web SQL database etant voué à disparaitre (IE 10 ne le prend plus en charge)
ou alors ce qui semble la meilleur solution :le mode offline
Le soucis mon site web créant les pages dynamiquement je ne vois pas comment on peut mettre les url des pages en dur dans le fichier manifest !
Bien sur je pourrais me passer d'HTML5 mais mon but est précisément de l'utiliser...

Merci d'avance

[SylvainPV]

Bonjour,

Ce que tu appelles mode offline, c'est l'applicationCache. Il n'est pas conçu pour stocker des données mais des fichiers statiques, autrement dit tes pages HTML, CSS, JavaScript et tes images.
Tout ce qui est dynamique (autrement dit que tu ne peux pas pré-renseigner dans le fichier MANIFEST) doit être stocké côté client, soit via localStorage (taille maximum de stockage entre 2.5 et 10 Mo, varie selon le navigateur) , soit via IndexedDB (attention au support et aux évolutions de la norme). WebSQL a été abandonné il y a trois ans par le W3c, ne songe même pas à l'utiliser.

Si tu utilises PHP pour générer tes pages, alors toutes tes pages sont dynamiques et il n'y a donc pas moyen de les stocker en mode offline. Pour faire une application HTML5 offline, il faut que tout le templating, les actions et la navigation soient fait sans besoin d'un serveur. Le serveur devra se contenter de fournir une API RESTful renvoyant des données sérialisées dans un format compréhensible par JavaScript (généralement JSON). Ton script requête en AJAX le service, récupère les données, les stocke dans le localStorage ou l'IndexedDB et s'en sert pour générer la page. Si tu n'as plus de connexion Internet, le script a juste à piocher dans ce qu'il a sauvegardé côté client, et la génération de la page se fait de la même façon.

Bref, le stockage client vient se substituer au serveur en tant que fournisseur de données dans le cas d'un échec de la requête AJAX.

Voici un article que j'ai rédigé récemment pour délocaliser ton templating côté client :
http://sylvainpv.developpez.com/tuto...lating-client/

Je reconnais que c'est un peu compliqué, mais une fois qu'on a mis toutes les briques ensemble on perçoit vite les nombreux avantages de cette architecture. Grâce au cache local, on peut même pré-afficher les pages avec les données en cache pour que le site s'affiche en un quart de seconde même lorsque l'utilisateur a un débit pourri

[sekaijin]

ton dev est-il fait directement en js à la mimine où utilise tu une lib ou un framework

les framework comme ExtJS, YUI, propose des solutions intégrées.
les lib comme JQuery ont des plugins qui propose de passer offline

ne sachant pas comment fonctionne ton app c'est difficile de t'orienter.

avec ExtJS tu définit un datastore (en memoire js) qui est un représentant local de la datasource côté serveur. associé à ce datastore tu défini un proxy qui assure le dialogue entre le client et le serveur.

pour pouvoir passer offline tu défini une datasource HTML5 et tu ajoute un listener sur ton datastore. celui-ci réagit en cas d'echec de connexion au serveur et associe la datasource HTML5 à ton datastore à la volée. il ajoute aussi en cas de connexion une réplication (copie) dans la datasource HTML5.
du coup dans ton appli extjs une fois le datastore paramétré et configué pour être capable de fonctionner en mode offline tu n'a plus rien a faire.
pour l'hm c'est le manifest qui permet de dire au navigateur que ton appli dois fonctionner en mode offline.

A+JYT

[laurentg2003]

Merci pour vos réponses
Je n'utilise aucun framework c'est vraiment un petit site

Pour faire une application HTML5 offline, il faut que tout le templating, les actions et la navigation soient fait sans besoin d'un serveur. Le serveur devra se contenter de fournir une API RESTful renvoyant des données sérialisées dans un format compréhensible par JavaScript (généralement JSON). Ton script requête en AJAX le service, récupère les données, les stocke dans le localStorage ou l'IndexedDB et s'en sert pour générer la page. Si tu n'as plus de connexion Internet, le script a juste à piocher dans ce qu'il a sauvegardé côté client, et la génération de la page se fait de la même façon.

C'est exactement cela
Je vais opter pour localStorage
Sinon j'avais pensé à générer dynamiquement les fichiers statiques en html pour applicationCache et comme le fichier manifest est un fichier texte écrire dedans dynamiquement les liens et bidouiller un petit script comparant les contenus database fichier pour voir si une mise à jour est nécessaire ,j'avoue que c'est tiré par les cheveux ,merci pour les liens

Derniere chose ,localStorage étant permanent ,il faut un script qui va comparer le contenu de localStorage avec celui du serveur (base MySQL)
une comparaison entre la date stocké coté client de la derniere consultation et la date stocké coté serveur de la dernière mise à jour devrait suffire

[SylvainPV]

Merci pour vos réponses
Derniere chose ,localStorage étant permanent ,il faut un script qui va comparer le contenu de localStorage avec celui du serveur (base MySQL)
une comparaison entre la date stocké coté client de la derniere consultation et la date stocké coté serveur de la dernière mise à jour devrait suffire

Inutile de comparer des dates, si tu as une connexion Internet alors requête le serveur et mets à jour les données dans le localStorage. Dans tous les cas tu devras requêter le serveur alors autant demander les informations voulues. Si c'est pour des raisons de performance parce qu'il y a beaucoup de données, tu peux utiliser les données du localStorage le temps que la requête se fasse. C'est un mécanisme que j'utilise sur l'application sur laquelle je travaille actuellement.

En revanche, pour l'applicationCache le fonctionnement est un peu différent, plus dans ton optique. Le navigateur télécharge tous les fichiers listés dans le manifest et ensuite ne requête plus le serveur. Le seul moyen de demander au navigateur d'actualiser l'applicationCache, c'est de modifier le fichier manifest (par exemple avec l'ajout d'un commentaire numéro de version ou date).

[laurentg2003]

Je vais utiliser localStorage vu que mettre en oeuvre applicationCache m'apparait peu performant vu l'architecture de mon site(générer des fichiers statiques dynamiquement et je veux limiter le serveur au max) mais sinon tu as a raison il y a de toute façon une connexion au serveur donc autant faire une mise à jour et il y a peu de données ensuite via localStorage cela revient à faire du offline d'autant plus qu'il y a navigator.onLine merci pour tes conseils