Comment enregistrer/charger des données en ligne (stocker des données avec AJAX et JSON) et hors ligne (localement) ?

Question

J'ai besoin d'aide pour trouver la meilleure façon, compatible avec tous les navigateurs, de "SAUVEGARDER" les données de l'utilisateur et de les stocker localement (modalité hors ligne) ET sur un serveur (en ligne). Le programme sera utilisé par Android et iOS.

Je souhaite connaître la meilleure façon de suivre les progrès de l'utilisateur lorsque l'appareil est en ligne OU hors ligne.

Bonjour J'ai fait des recherches sur AJAX, JSON, XMLHttpRequest, REST, Java, et HTML5 (en particulier, localStorage).

Le scénario : (Lire un livre en ligne/hors ligne, enregistrer la progression de la page)

1. Un utilisateur se connecte à un service web et le service web lui permet de télécharger un "livre de pages web html" (à visualiser avec un navigateur HTML5).

2. Après chaque page tournée, une API REST utilise une requête GET pour envoyer les données de progression à un serveur Web. Simultanément, une chaîne JSON est créée et enregistrée dans un fichier sur le serveur. (disons "ProgressData.txt").

3. En arrière-plan, une "copie" distincte de ProgressData.txt est enregistrée LOCALEMENT sur l'appareil mobile. L'utilisateur quitte alors la connexion internet et continue à lire le livre HTML.

4. Lorsque l'utilisateur retrouve la connectivité, le fichier ProgressData.txt est téléchargé sur le serveur à l'aide d'une API REST qui met à jour l'ancien fichier du serveur avec le NOUVEAU fichier .txt contenant toutes les données de progression de l'utilisateur.

Solutions possibles :

La solution HTML5 localStorage semble intéressante. jQuery la simplifie même : http://plugins.jquery.com/project/html5Storage

Straight Javascript semble être une bonne solution pour le stockage côté serveur, mais il n'a pas accès au disque dur physique d'un appareil mobile, ce qui empêche toute forme d'enregistrement hors ligne.

Les applets Java semblent possibles. De plus, je ne suis pas sûr que Java fonctionne avec Android/iOS.

Je ne veux pas avoir à lancer un localhost (PHP/Apache/Python) depuis un appareil mobile à chaque fois que l'utilisateur se déconnecte, mais c'est peut-être là que se trouve la solution. Je suis tombé sur cet outil puissant : http://couchdb.apache.org/

Pregunta:

J'ai besoin de savoir quelle est la meilleure façon de suivre les progrès de l'utilisateur lorsque l'appareil est en ligne ou hors ligne. Quelle est la meilleure façon de procéder ?

Answer 1

Je suis tombé sur store.js l'autre jour, qui pourrait aider à résoudre le problème du stockage local entre navigateurs. Il s'agit de cet article sur le stockage local.

Je pense que la meilleure option pour le suivi en ligne/hors ligne est d'envoyer un ping au serveur via un appel AJAX lorsque la page est tournée. Essayez toujours de mettre à jour le serveur lors d'un changement de page, mais si cela échoue, gérez l'échec et stockez la progression localement. Chaque changement de page modifiera le fichier de progression stocké localement ou, si la connexion est rétablie, mettra simplement à jour le serveur avec la progression.

Le problème auquel je pense est que si un livre est terminé hors ligne, il n'y a plus de clics qui déclencheraient la synchronisation, même si la connexion est rétablie. Vous pourriez envisager un lien/bouton de synchronisation manuelle à la fin d'un livre. Ou peut-être que la synchronisation manuelle est de toute façon disponible à tout moment ? Donnez un certain contrôle aux utilisateurs et décrivez l'ensemble du scénario de lecture hors ligne/en ligne. Vous constaterez peut-être qu'il est plus facile de laisser les utilisateurs faire le travail s'ils ne se synchronisent pas, c'est leur problème !

Answer 2

Je suggère d'utiliser un cookie pour stocker l'état actuel. De cette façon, il est automatiquement envoyé à votre serveur à chaque demande de l'utilisateur (il n'est donc pas nécessaire de créer une API personnalisée côté serveur pour recevoir l'état après une perte de connexion, et il n'est pas nécessaire d'avoir un code personnalisé côté client pour envoyer les données au serveur), et il est toujours possible de le mettre à jour même si l'utilisateur a perdu la connectivité Internet. En outre, il ne s'appuie pas sur les fonctionnalités HTML5, de sorte qu'il n'est pas nécessaire de limiter les utilisateurs aux navigateurs compatibles HTML5.

Quoi qu'il en soit, la meilleure façon de gérer le stockage de l'état actuel serait d'avoir une simple fonction onclick sur votre lien "page suivante" (ou bouton, ou quoi que ce soit d'autre) qui appelle une fonction et fixe la valeur du cookie à la position actuelle. Notez que l'état étant toujours disponible côté client et envoyé au serveur à chaque requête, il n'est pas nécessaire de conserver une copie explicite de l'état côté serveur, à moins que vous ne souhaitiez vous souvenir de la position de l'utilisateur même s'il supprime manuellement ses cookies (ce qui, à mon avis, est exagéré).

Vous pouvez consulter le site Exemple de code du W3C pour définir/obtenir des valeurs de cookies en JavaScript.

Voici également un site web qui démontre une fonctionnalité similaire à celle que vous voulez construire. Il utilise des cookies pour garder une trace de l'endroit où se trouve l'utilisateur lorsqu'il lit différents webcomics. C'est à peu près la même chose que ce que vous semblez vouloir, mais avec des bandes dessinées au lieu de livres.

Answer 3

Voici 2 screencasts qui vous aideront à résoudre votre problème.

Ils sont en Ruby on Rails mais vous pouvez peut-être vous faire une idée. Il utilise le manifeste de cache html5.

J'espère que cela vous aidera !

http://railscasts.com/episodes/247-offline-apps-part-1

http://railscasts.com/episodes/248-offline-apps-part-2

quelques ressources supplémentaires (désolé, je n'ai pas d'expérience avec le manifeste de cache html5)

http://diveintohtml5.ep.io/offline.html

http://developer.apple.com/library/safari/#documentation/iPhone/Conceptual/SafariJSDatabaseGuide/OfflineApplicationCache/OfflineApplicationCache.html

Answer 4

Il serait judicieux de suivre la progression dans une base de données côté serveur et dans le stockage local du client si une connexion Internet permanente n'est pas nécessaire.

Evercookie est une interface javascript controversée qui vise à fournir un stockage local en utilisant tous les moyens disponibles, y compris les cookies standard, l'objet partagé Flash, Silverlight, l'historique du navigateur et le stockage HTML 5. Les données doivent persister lorsque l'utilisateur est hors ligne et, lorsque la connexion est rétablie, synchroniser le cookie et la base de données avec les données qui ont le plus grand nombre de pages pour le livre en question. Droid dispose de Flash et les données de l'objet partagé Flash sont un "cookie" disponible à la fois pour les applications de bureau et les applications web.

Un grand pouvoir implique une grande responsabilité : http://samy.pl/evercookie/