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

[SylvainPV]

Je ne compterais pas sur navigator.onLine, il n'y a quasiment aucun support à l'heure actuelle. Base-toi plutôt sur le callback error de tes requêtes AJAX, c'est plus sûr.

Aussi, pour faire du offline il faut impérativement utiliser applicationCache. Car même si localStorage pioche les données sur le disque dur de l'utilisateur, il faut quand même stocker localement le script qui utilise localStorage

[laurentg2003]

Bonjour,
Pour navigator.online il est supporté par les dernieres versions des 5 navigateurs (Firefox,Google Chrome etc.) sur pc mais ton systeme est plus fiable je pense pour les versions antérieurs et pour les navigateurs de smartphone genre opera mini qui ne gere rien
Sinon effectivement le script doit être stocker en local
j'y avais pas pensé....
donc dans mon fichier manifest je dois au moins y mettre mon fichier js et le template html qu'utilise localStorage et qui génère les pages via un systeme de templates js basé sur des tags {titre}{contenu}
mon but est de limiter le serveur à une simple requete SQL
Merci pour ces précisions importantes

[SylvainPV]

Voilà tu as compris. Tu peux mettre tous tes fichiers statiques (HTML/CSS/JS et images de base) dans le manifest, et toutes tes données dynamiques dans un ou plusieurs JSON stockés en localStorage. Sauf si tu cherches à établir un périmètre fonctionnel limité en mode déconnecté, mais c'est assez délicat à mettre en oeuvre.

Concernant navigator.online, "supporté" ne signifie pas "bien implémenté". Voir cet article : http://labs.ft.com/2012/08/navigator...re-be-dragons/ ; et les commentaires de developer.mozilla.org : https://developer.mozilla.org/en-US/...rOnLine.onLine

Browsers implement this property differently.

[laurentg2003]

C'est exact tu as raison (je prends des notes),pour le reste c'est exactement cette architecture
je me dis que dans mes objets Json je pourrais stocker des méthodes
ce que je ne ferais pas vu que c'est une mauvaise façon de procéder

Sinon pour les messages d'erreur Ajax c'est xhr.status? normalement si il n'y a pas de connexion web c'est message 106 mais là je vois que xhr.readyState renvoit 0 ou 4 4 qui ne retourne aucune donnée donc pas de connexion a.Status retourne seulement 200.Si j'utilise un try catch il ne se déclenche pas

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var a = false;
if(window.XMLHttpRequest){
a = new XMLHttpRequest();
//a.overrideMimeType("text/xml");Pas supporté par IE 10 
 
 
}
else if(window.ActiveXObject) 
{
a = new ActiveXObject("Microsoft.XMLHTTP");
 
}
else
{
 
}
try{
a.open("GET",url,true);
}
catch(e){
alert(e);
}
a.onreadystatechange = function() { alert(a.readyState;alert(a.status);
if(a.readyState==4 && a.status==200){ 
 
alert(a.responseText);
}
}

ma requete Ajax devra donc être ,si je comprend bien, dans mon manifest
vu qu'elle a deux fonctions ,faire la mise à jour et verifier que la connexion internet fonctionne si elle ne fonctionne pas on ira chercher dans localStorage directement et dans controleur.js qui contient l'ajax et le code de génération de page
Pour finir ma connexion ajax doit en tête de code
Derniere chose ma requête Ajax pointe sur une requete SQL genre
Select * from page where nompage=page
toutes les données ne sont pas chargées donc à l'ouverture du site ou n'importe quand
si la connexion est coupée et qu'une page n'a pas été téléchargée et qu'elle n'est donc pas dans localStorage vu qu'elle n'a pas été consulté elle n'apparaitra pas
Peut être ajouter une instruction qui charge les pages non chargés en ouverture lors de la 2ieme visite ou en fermeture lors de la 1ere visite
Tu en pense quoi? ou charger toutes les données au moins une fois lors de la 1ere visite? Merci

[SylvainPV]

Je dois t'avouer que j'ai tôt fait de succomber à la simplicité de jQuery ou autre lib similaire dès qu'il s'agit de manipuler des requêtes AJAX. Dans un souci d'utilisabilité maximum, je fais appel au localStorage qu'importe le type d'erreur dans ma requête AJAX. Peut-être est-ce cela que tu cherches:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 xhr.ontimeout = function () { alert("Timeout, on suppose que l'utilisateur est déconnecté"); }

Ici xhr est ta variable a (prends le réflexe de nommer explicitement tes variables au passage, ça aide pour se relire plus tard)

Concernant la stratégie de chargement des données en local (par petit bout, en tâche de fond ou selon la navigation de l'utilisateur, tout en entier...), tout dépend vraiment de ton application, de ton contenu et de tes contraintes. Je ne peux pas vraiment te répondre sur ce point, à toi de choisir l'approche que tu penses la meilleure pour ton cas.

[laurentg2003]

Merci pour la rapidité de ta réponse
c'est vrai que niveau compatibilité un framework a du bon
ça fait longtemps que je n'ai plus programmé et je consate que IE a fait beaucoup de progrés
Sinon j'ai peu de données en fait peut être utiliser un worker en toile de fond si c'est bien supporté par les navigateurs ou tout télécharger lors de la 1ere visite(je pense que je vais opter pour cela avec une image de download et un cookie) avec ajax, dans le temps j'utilisé des iframe cachées à toutes les sauces qui se chargait aprés que la page courante soit chargée
Sinon oui je cherche ce type de code il y a la propriété timeout mais pas reconnue par safari
Sinon c'est a pour Ajax

[SylvainPV]

Les webworkers sont utiles quand tu sollicites beaucoup le CPU, là ce sont de simples requêtes AJAX donc ça ne présente pas d'intérêt de chercher à faire ces appels dans un autre thread. Il faut juste faire attention à ne pas dépasser le nombre max de requêtes en parallèle simultanément (après quoi les bons navigateurs gèrent la file d'attente eux-même, tandis que les mauvais crachent une belle exception).

[laurentg2003]

Merci pour ces infos c'est très intéressant c'est des choses que j'ignore
j'espere un jour me servir des webworkers et des websockets ça a l'air très intereressant
HTML5 c'est un peu ce dont j'ai toujours révé
j'ai fait à une époque de l'actionScript(language trés puissant au passage) pour pallier les manques de javaScript (pour les videos,les 2 langages peuvent communiquer)
Donc lors de la 1ere visite via la création d'un cookie( j'ai ecrit tout une "classe"en JS pour les cookies) toutes les données sont chargées j'ai 8 pages donc 8 objets Json 8 tableaux d'objets propriété=valeur et localStorage fonctionne comme cela aussi et pour signifier qu'une mise à jour et a faire et que l'on actualise tout: un commentaire dans monFichier.appCache.
Evidement je teste si localStorage et offline valent true sinon c'est un application ajax classique qui dans ce cas là utilisera des requetes SQL comme cité plus haut.Par contre ,je zappe l’hypothèse ou JS est désactivé.

[SylvainPV]

On fera pas de miracles si JS est désactivé

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<noscript>Yo, si tu vois ce message c'est que tu as un navigateur préhistorique ou que tu crois on ne sait pas trop pourquoi que désactiver JS est une bonne idée en 2013. En tout cas je ne vais pas pouvoir faire grand chose pour toi, donc voici le contenu de mon site dans un fichier texte à télécharger, kthxbye</noscript>

[laurentg2003]

j'aime beaucoup ton message et le coup du fichier texte
c'est vrai que pour des raisons d’accessibilité genre réseau d'entreprise on pourrait penser qu'il faudrait une version tout php mais il ne faut pas encourager ce genre de comportement
Quand j'ai commencé la prog je faisais du tout php c'etait avant ajax et pour moi javaScript ne présentait aucun intérêt maintenant c'est le contraire
enfin ces 2 langages ont révolutionné le web

[laurentg2003]

Bonjour,
Aprés avoir tester différentes possibilitées concernant une déconnexion
j'en ai tiré la conclusion suivante
En cas de déconnexion Ajax ne retourne rien mais justement il ne retourne rien vu que l'on est déconnecté aucun moyen de tester quoique se soit
Ensuite j'ai développé il y a quelque année un script qui affiche la vitesse de la connexion entrante (basé sur une image qui avec un parametre aleatoire est téléchargée sans arret ,avec la taille de l'image et la durée de téléchargement on a le debit en megabit /s) au bout de 30 seconde sans chargement ou si onerror se declenche on a deduit que l'on est déconnecté c'est trés efficacehttp://www.webtest.netau.net/webM/iframeDownload.php
Le mieux est de prendre le parti suivant
On fermera la connexion ajax et on passe en mode offline connexion ou pas

[SylvainPV]

Comment ça aucun moyen de tester quoi que ce soit ? Si tu es déconnecté, ta requête AJAX finira en timeout, que tu peux détecter en JavaScript et réagir en conséquence.

[sekaijin]

une simple recherche google "XMLHttpRequest connection lost"

http://stackoverflow.com/questions/7...n-in-ajax-call

[laurentg2003]

Merci pour ton lien d'autant plus que ma requête ajax doit pouvoir toujours s'effectuer passer directement en mode offline que la connexion existe ou pas n'est pas possible sauf erreur de ma part car il y a toujours en tête de mon fichier js la requete ajax si je ne peux la tester elle se terminera sans résultat et bloquera la suite
ensuite j'ai une question concernant la requete ajax ,ou même window.navigator.online
il faut un setinterval non? mon script qui evalue la vitesse de la connexion repose la dessus mais 30 seconde c'est pas fiable à 100%
je pense que oui vu ton lien ????
On est vraiment des "pionniers"


Edit:Superbe doc merci tout est clair !