Le mode hors connexion de l'app dans un (HTML5) navigateur possible?

Est-il possible de construire une application à l'intérieur de dans le navigateur? Une application signifie:

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

  • l'application s'exécute dans le web-based mode
  • l'application stocke nécessaire de données dans le stockage hors ligne, pour être utilisé en mode hors connexion (2)
  • l'application de synchronisation/push de données (capturé pendant le mode hors ligne) vers le serveur quand il est repris à partir hors de mode en mode en ligne

2 Où il y a pas de connexion (mode hors ligne) entre le navigateur et un serveur d'application distant:

  • l'application continue à fonctionner (javascript?)
  • l'application présentera les données (qui sont stockées hors ligne) à l'utilisateur
  • l'application peut autoriser la saisie de l'utilisateur (et magasin/ajout dans le stockage hors-ligne)

Est-ce possible? Si la réponse est oui, est-il (Ruby/Python/PHP) - cadre en cours de construction?

Grâce

  • Une question: existe-t-il frameworks Javascript qui rendent tout cela est facile à mettre en œuvre?
InformationsquelleAutor ohho | 2010-05-07
  1. 40

    Oui, c'est possible.

    • Vous avez besoin pour écrire l'application en Javascript, et de détecter en quelque sorte, si le navigateur est en mode hors-ligne (la 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 se compose de seulement statique HTML, fichiers CSS et Js (ou de définir la stratégie de mise en cache manuellement dans votre script, de sorte que votre navigateur ne vous rappelez-vous en mode hors ligne). Les mises à jour de la page se fait par le biais de JS de manipulation du DOM, sans passer par le serveur (un cadre comme ExtJS http://www.extjs.com va vous aider ici)

    • Pour le stockage, l'utilisation d'un module comme PersistJS ( http://github.com/jeremydurham/persist-js ), qui utilise le stockage local du navigateur pour conserver une trace des données. Lorsque la connexion est rétablie, la synchronisation avec le serveur.

    • Vous devez vous pré-cache des images et d'autres actifs utilisés, otherwse ils ne seront pas disponibles en mode hors connexion si vous ne les utilisez pas avant.

    • De nouveau: l'essentiel de votre application doit être en javascript, PHP/Ruby/Python cadre vous aidera à petit si le serveur est inaccessible. Le serveur est probablement le plus simple possible, un RESTE-comme AJAX API pour stocker et charger les données.

    • vous pouvez utiliser le navigateur.en ligne afin de vérifier si un navigateur est en ligne
    • navigator.en ligne ne donnent pas une valeur précise dans la plupart des navigateurs. Voir code.google.com/p/chromium/issues/detail?id=7469, par exemple.
    • le problème dans WebKit a été fixé, de sorte que maintenant, tous les grands navigateurs prennent en charge ce
    • dans Firefox navigateur.en ligne seulement renvoie false si l'utilisateur de paramétrer le navigateur en mode hors connexion, même quand il n'est pas connecté developer.mozilla.org/en-US/docs/DOM/window.navigator.onLine
    • la page que vous avez lié déclare: "depuis Firefox 41, sur OS X et Windows, la valeur va suivre celui de la connectivité du réseau." Donc, apparemment, c'est maintenant corrigé dans Firefox.
    InformationsquelleAutor wump
  2. 15

    La "Nous allons profiter de Cette mode Hors connexion" chapitre dans de Mark Pilgrim (en ligne) livre Plongez Dans HTML5 est un très bel aperçu de l'écriture hors-ligne des applications web avec HTML5 technologies.

    Remarque: Depuis de Mark Pilgrim origine de Plongée En HTML5 lien semble être en panne.

    Copies peuvent maintenant être trouvés ici parmi d'autres endroits.

    InformationsquelleAutor hasseg
  3. 4

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

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

    InformationsquelleAutor Johann Echavarria
  5. 1

    La réponse en 2018 est d'exploiter le travailleur, et de construire une Progressive Web App:
    https://developers.google.com/web/progressive-web-apps/

    InformationsquelleAutor Joe Zack
  6. 0

    j'ai été à la recherche pour ce travail, j'ai découvert abt HTML5 en mode Hors connexion Web Apps. havent essayé tho

    Utilisateurs en ligne typique des applications Web ne sont en mesure d'utiliser les applications alors qu'ils ont une connexion à Internet. Quand ils vont en mode hors connexion, ils ne peuvent plus consulter leurs e-mails, naviguer sur rendez-vous du calendrier, ou de préparer des exposés avec leurs outils en ligne. Pendant ce temps, les applications natives de fournir ces caractéristiques: e-mail clients des dossiers cache localement, des calendriers de stocker leurs événements localement, des plaquettes de présentation de stocker leurs fichiers de données localement.

    InformationsquelleAutor Jiew Meng
  7. 0

    Javascript vous donner une option pour le site web en mode hors connexion et appelé UpUp Framework Javascript.
    Un petit script qui assurez-vous que votre site est toujours là pour vos utilisateurs, même quand ils sont sur un plan ou 20 000 de la 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>

    Maintenant le contenu de nos utilisateurs voient lorsqu'ils sont hors ligne, est le contenu de offline.html. C'est juste un simple fichier HTML, pas différent de toute autre page sur notre site.

    Notre offline.html le fichier contient deux fichiers css: bootstrap.min.css et en mode hors connexion.css. Faisons en sorte que ces sont mises en cache et à la disposition de nos utilisateurs lorsqu'ils sont hors ligne

    • Inconvénient/fonction: Elle est le fait de travailler uniquement sur https..
    • ce n'est pas un bug, c'est une fonctionnalité.
    InformationsquelleAutor Tell Me How
  8. -1

    Ont un coup d'oeil à Google Gears, http://code.google.com/apis/gears/. Bien qu'ils aient été abandonné en faveur de HTML5. Cependant, il semble que ce qui est en train d'être poussé comme HTML5 est Google Gears.

    InformationsquelleAutor sean