Discussion :

[laurentg2003]

Merci pour ces précisions ! En fait sans le savoir je fais une "Single Page App"
Le code html est unique c'est même pas un template vu qu'il n'est pas chargé
je charge toutes les données via ajax dans localStorage ensuite les pages sont générées via JS selon les actions utilisateurs des clicks exemple sur home.html
et la clé dans local storage est le nom de la page donc home.html
Effectivement il n'y a pas de paramètres j'avais fait un moteur de tempates en php il y a des années et la démarche est quasimpent à l'inverse
dans le cas d'une "single page app" le code js css et html est extrêmement concis vu que ces fichiers seront dans le cache et c'est une bonne école oui
Avant avec une démarche serveur tout php je regardais pas ça...
Niveau sécurité des pages statiques sans paramêtre cela veut dire une impossibilité des injections xss non persistante via l'url .(autorisé par firefox)
et via localStorage en cas de faille on peut injecter du code JS dans localStorage qui lors de l'appel au cache sera exécuté en priorité avant une mise à jour via ajax et le serveur par exemple d'ou une mise à jour forcée peut etre appcache et une iframe avec webmessaging pour créer une sandBox.J'avoue que sans être parano HTML5 me fait peur niveau sécurité... websocket a été suspendu pour ça ...

[SylvainPV]

Un site web disponible offline n'est pas forcément une "Single Page Application" (SPA).

Les SPA sont de plus en plus populaires parce qu'elles permettent des transitions plus douces de page en page en n'ayant pas besoin de retélécharger l'intégralité des pages, les scripts et CSS associés etc... Et puis ça permet de conserver l'état de l'utilisateur dans l'application côté client plutôt que côté serveur, ce qui paraît plus logique.

Lorsque toutes les ressources statiques sont dans l'applicationCache, les pages se chargent infiniment plus vite (comme quand on ouvre une page stockée localement sur son disque dur). De ce fait les gains de performances des SPA sont beaucoup plus modérés.

Par contre, ce qui est vrai, c'est que concevoir une SPA encourage à séparer code statique et données en délocalisant côté client la génération de page (via templating, data-binding, ou balançage de soupe de HTML manuellement en JS). Donc il y a de bonnes chances pour que ce soit plus facile de prévoir un mode déconnecté pour une SPA.

Mais ce n'est pas un cas général, on peut faire une SPA qui requête du HTML pondu par une solution de templating côté serveur (JSP, PHP ou autre). Et là, si on n'a pas de serveur dispo, ça ne nous avance pas à grand chose que nos requêtes soient faites en AJAX plutôt qu'un changement de page)


@sekaijin: je n'ai pas compris pourquoi tu disais que les images étaient dans le JS et non dans le HTML. On ajoute un tag image au DOM, le navigateur se charge de la requête puis l'affiche. Qu'est-ce qu'une SPA ou un mode déconnecté change à cela ?

[sekaijin]

ce que je dis c'est que si ta page html ne contient qu'une ref à un js statique et que celui-ci fait

Code :

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

1
2
3
var img = document.createElement('img');
img.setAttribute('src', '/toto/img.png');
document.body.append(img);

lorsque l'utilisateur clique sur un bouton.

ton image n'est pas chargé par le navigateur tant que l'utilisateur n'a pas cliqué sur le bouton. du coup elle ne va pas dans le cache.
si tu passe alors en mode déconnecté
ton image n'étant pas dans le cache elle ne peux être affichée. lors d'un clic.
pour que cela fonctionne il faut que l'image soit dans le manifest.

c'est un pb rencontré par les débutant lorsqu'il font leur premières app offline

A+JYT

[SylvainPV]

Ah oui tu parles du simple cache et non de l'applicationCache. Oui, évidemment, il faut veiller à mettre toutes les ressources statiques dans le manifest, images comprises. On ne peut pas se fier au simple cache pour un mode déconnecté, c'est beaucoup trop volatile.

[laurentg2003]

Coucou ,
Je viens de tester les événements de l'objet Storage :seul Internet Explorer 10 et 11 les prennent en charge
Décidément sous certains aspects Internet Explorer est à la pointe de HTML5
cela dit j'ai un windows phone et java et flash sont bannis ceci explique cela

[Kaamo]

Je viens de tester les événements de l'objet Storage :seul Internet Explorer 10 et 11 les prennent en charge

localStorage est bien supporté, même dans IE8 et depuis bien longtemps dans Firefox et Chrome

Soit dit en passant, je ne conseillerais pas localStorage. Plutôt IndexedDB

[laurentg2003]

Je parlais des differents evénements Event: key,oldvalue,newvalue etc C'est ce que disait sylvain, toute la différence entre supporté et bien implémenté...
Pour IndexedDB ça peut être une bonne idée, oui, le coté orienté objet me plait ,mais je fais un petit site donc localStorage me convient,et via Json (donc des chaines de caractere)on peut stocker des objets.

[SylvainPV]

Soit dit en passant, je ne conseillerais pas localStorage. Plutôt IndexedDB

Si les deux existent, c'est que chacun a son utilité. localStorage pour un stockage rapide clé/valeur, IndexedDB pour les données structurées et les requêtes plus complexes.

Aussi, localStorage fait partie de la spécification Web Storage en Recommendation W3C, tandis qu'Indexed Database API n'est qu'au statut de Candidate Recommendation. Donc il faut faire preuve de davantage de prudence en utilisant IndexedDB par rapport à localStorage. Je me suis déjà fait avoir avec WebSQL de la même façon...

[Kaamo]

localStorage pour un stockage rapide clé/valeur, IndexedDB pour les données structurées et les requêtes plus complexes

C'est vrai. J'aurais dû plutôt mettre ce genre de phrase

Indexed Database API n'est qu'au statut de Candidate Recommendation. Donc il faut faire preuve de davantage de prudence en utilisant IndexedDB par rapport à localStorage. Je me suis déjà fait avoir avec WebSQL de la même façon...

WebSQL n'a jamais été "approuvé", pas de release candidate par exemple, encore moins de candidate recommendation. Avec IndexedDB, il y a quand même un réel engouement et je vois mal le W3C casser tout ça maintenant.

[SylvainPV]

Il y avait aussi un réel engouement pour WebSQL, d'ailleurs la techno était plutôt bien implémentée au point que je l'ai utilisé sur un site grand public. Ça a été une petite surprise quand le W3C a retourné sa veste, et une bonne leçon à retenir pour ma part

[laurentg2003]

Bonjour,
j'ai mis en place un fichier manifest :

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
CACHE MANIFEST
 
 
# version 3.0
CACHE:
http://www.anna-tatishvili-fan.hostoi.com/anna3/index.html
http://www.anna-tatishvili-fan.hostoi.com/anna3/fallback.html
http://www.anna-tatishvili-fan.hostoi.com/anna3/style.css
http://www.anna-tatishvili-fan.hostoi.com/anna3/article2.png
http://www.anna-tatishvili-fan.hostoi.com/anna3/header2.png
http://www.anna-tatishvili-fan.hostoi.com/anna3/blockquote.png
http://www.anna-tatishvili-fan.hostoi.com/anna3/header1.png
http://www.anna-tatishvili-fan.hostoi.com/anna3/article1.png
http://www.anna-tatishvili-fan.hostoi.com/anna3/article2.png
http://www.anna-tatishvili-fan.hostoi.com/anna3/designRight1.png
http://www.anna-tatishvili-fan.hostoi.com/anna3/designRight2.png
http://www.anna-tatishvili-fan.hostoi.com/anna3/annatatishviliweb.png
http://www.anna-tatishvili-fan.hostoi.com/anna3/annaImg2.jpg
http://www.anna-tatishvili-fan.hostoi.com/anna3/backgroundMainBloc.png
FALLBACK:
/ fallback.html
NETWORK:
http://www.anna-tatishvili-fan.hostoi.com/anna3/modele.php

qui est valide http://manifest-validator.com/validate
mode offline ou pas: le cache prend l'avantage et mon code js avec local Storage au clic sur un item du menu genere bien la page
Le seul problème c'est que le fichier style.css n'est pas pris en compte et les images non plus !c'est d'autant plus etrange que ces fichiers sont dans manifest et uploadés ou bien le design apparait totalement "explosé"avec que l'image de fond
Enfin en tete de index.html j'ai mis <html lang="en" manifest="cache.appcache"> si vous avez une solution je suis preneur merci

Edit:j'ai mis des liens en absolu partout et ça marche
effectivement au rafraichissement de le page celle ci s'affiche :magique
Le seul problème quand j'actualise la page offline ou online (et au fond pas besoin d'un code détectant si on est en ligne ou pas: le cache a l'avantage)
c'est tout mon code qui s’exécute à nouveau .Evidement les requetes ajax plantent !mon script php n'etait pas en cache! je cherche une solution ,il y aurait pas un événement refresh ou reload ou une autre solution ?merci

Ps j'ai modifié un petit détail de mon fichier index.html et aucun changement en exécutant le fichier et au bout de 10mn je me suis dit appcache a frappé
obligé de mettre le cache à jour.On peut le vider je suppose aussi

[SylvainPV]

Ca n'a aucun sens de mettre un script PHP en cache, PHP s'éxécutant côté serveur. A quoi sert ce script ? En offline, ton site doit pouvoir fonctionner sans.

[laurentg2003]

justement tout fichier déclaré dans NETWORK n'est pas mis dans le cache et réclame une connexion
Dans http://www.html5rocks.com/en/tutoria...ache/beginner/

Files listed in this section may come from the network if they aren't in the cache, otherwise the network isn't used, even if the user is online. You can white-list specific URLs here, or simply "*", which allows all URLs. Most sites need "*".

Si je comprends bien on place dans netwoork les fichiers que l'on ne doit pas mettre dans le cache (et effectivement un fichier php dans le cache n'aurait aucun sens)et l'on doit obligatoirement les y mettre sinon meme online ils ne seront pas accessibles

Edit j'ai remplacé mon fichier php par * et cela "fonctionne" ,les requetes ajax se terminent par une erreur mais vu que la generation des pages se fait via localStorage ce n'est pas bloquant.Vu que mon fichier php n'est plus accessible cela est logique d'ou les données stockées via localStorage
Niveau gestionnaire d'événement :firefox reste muet.Opera,Google Chrome m'affiche Checking et noupdate! MSIE et Safari :cheking et Error si quelqu'un connait l'origine de cette erreur ...Merci