web-dev-qa-db-fra.com

Application en mode hors connexion dans un navigateur (HTML5) possible?

Est-il possible de construire une application inside dans un navigateur? Une application signifie:

1 Où connexion (mode en ligne) entre le navigateur et un serveur d'applications distant:

  • l'application s'exécute en mode Web typique
  • l'application stocke les données nécessaires dans un stockage hors connexion, à utiliser en mode hors connexion (2)
  • l'application synchronise/renvoie les données (capturées en mode hors connexion) vers le serveur lors de la reprise du mode hors connexion en mode connecté

2 Où pas de connexion (mode hors connexion) entre le navigateur et un serveur d'applications distant:

  • l'application fonctionnera toujours (javascript?)
  • l'application présentera les données (stockées hors connexion) à l'utilisateur
  • l'application peut accepter les entrées de l'utilisateur (et stocker/ajouter dans un stockage hors connexion)

Est-ce possible? Si la réponse est oui, existe-t-il un framework (Ruby/Python/PHP) en construction?

Merci

html5offline-mode
44
ohho

Oui c'est possible. 

  • Vous devez écrire l’application en Javascript et détecter si le navigateur est en mode hors connexion (le plus simple est d’interroger un serveur de temps en temps). (Edit: voir les commentaires pour une meilleure façon de détecter le mode hors connexion)

  • Assurez-vous que votre application ne contient que des fichiers HTML, Js et CSS statiques (ou définissez la stratégie de mise en cache manuellement dans votre script afin que votre navigateur les mémorise en mode hors connexion). Les mises à jour de la page se font par le biais de la manipulation de JS DOM, et non par le serveur (un framework tel que ExtJS http://www.extjs.com vous aidera ici).

  • Pour le stockage, utilisez un module tel que PersistJS ( http://github.com/jeremydurham/persist-js ), qui utilise le stockage local du navigateur pour garder une trace des données. Une fois la connexion rétablie, synchronisez avec le serveur.

  • Vous devez pré-mettre en cache les images et les autres ressources utilisées, sinon elles ne seront pas disponibles en mode hors connexion si vous ne les avez pas utilisées auparavant.

  • Encore une fois: l'essentiel de votre application doit être en javascript, un framework PHP/Ruby/Python ne vous aidera pas beaucoup si le serveur est inaccessible. Le serveur est probablement aussi simple que possible, une API AJAX de type REST permettant de stocker et de charger des données.

40
wump

Le chapitre "Let's Take This Offline" dans le livre (en ligne) de Mark Pilgrim Dive Into HTML5 est un très bon aperçu de l'écriture d'applications Web hors connexion avec les technologies HTML5.

Remarque: le lien Dive Into HTML5 de Mark Pilgrim semble être en panne. 

Des copies peuvent maintenant être trouvés ici entre autres endroits.

15
hasseg

Jake Archibald a écrit "Le livre de recettes hors ligne". Une approche moderne (9 décembre 2014) et agréable avec ServiceWorker:

http://jakearchibald.com/2014/offline-cookbook/

4
Johann Echavarria

La réponse en 2018 consiste à tirer parti du prestataire de services et à créer une application Web progressive: https://developers.google.com/web/progressive-web-apps/

1
Joe Zack

Voici un article de hacks.mozilla.org avec une démo: http://hacks.mozilla.org/2010/01/offline-web-applications/

Une autre démo.

Documentation plus détaillée: https://developer.mozilla.org/en/HTML/HTML5#Web_application_features

1
Nickolay

je cherchais cela aussi, j'ai découvert vers HTML5 Web Apps Offline . je n'ai pas essayé

Les utilisateurs d'applications Web en ligne typiques ne peuvent utiliser ces applications que s'ils sont connectés à Internet. Lorsqu'elles se déconnectent, elles ne peuvent plus consulter leur courrier électronique, parcourir leurs rendez-vous d'agenda ou préparer des présentations avec leurs outils en ligne. Parallèlement, les applications natives offrent les fonctionnalités suivantes: clients de messagerie, dossiers de cache en local, calendriers stockant leurs événements localement, packages de présentation stockant leurs fichiers de données localement 

0
Jiew Meng

Javascript vous donne une option pour le mode hors connexion sur site Web et s'appelle UpUp Javascript Framework . Un petit script qui garantit que votre site est toujours là pour vos utilisateurs, même lorsqu'ils sont dans l'avion ou dans une ligue sous la mer.

<html>
<head>
  <meta charset="UTF-8">
  <title>Lonely Globe Advisor</title>
</head>
<body>
  <h1>Top Hotels in Rome</h1>
  <ol>
    <li>Villa Domus - Via Piacenza 9, Rome, Italy</li>
    <li>Hotel Trivelli - Piazza Barberini 11, Rome, Italy</li>
  </ol>
  <script src="/upup.min.js"></script>
  <script>
    UpUp.start({
      'content-url': 'offline.html',
      'assets': ['css/bootstrap.min.css', 'css/offline.css']
    });
  </script>
</body>
</html>

Le contenu que nos utilisateurs voient lorsqu'ils sont hors ligne correspond au contenu de offline.html. Ceci est juste un simple fichier HTML, pas différent de toute autre page de notre site.

Notre fichier offline.html contient deux fichiers CSS: bootstrap.min.css et offline.css. Assurons-nous qu'ils sont mis en cache et disponibles pour nos utilisateurs lorsqu'ils sont hors ligne.

0
Tell Me How