2010-05-07 12 views
42

È possibile creare un'applicazione all'interno di nel browser? Un'applicazione significa:App in modalità offline in un browser (HTML5) possibile?

1 Dove c'è collegamento (modalità online) tra il browser e di un application server remoto:

  • l'applicazione viene eseguita in modalità web-based tipico
  • l'applicazione memorizza necessario dati nella memoria offline, da utilizzare in modalità offline (2)
  • i dati di sincronizzazione/push dell'applicazione (acquisiti durante la modalità offline) sul server quando viene ripreso dalla modalità offline alla modalità online

2 Dove non c'è alcuna connessione (modalità offline) tra il browser e di un application server remoto: (? Javascript)

  • l'applicazione continua a funzionare
  • l'applicazione presenterà i dati (che è memorizzato offline)
  • l'applicazione può accettare input dall'utente (e archiviare/aggiungere nell'archivio offline)

È possibile? Se la risposta è sì, c'è qualche struttura (Ruby/Python/PHP) in costruzione?

Grazie

+3

Una domanda successiva: Esistono strutture JavaScript esistenti che rendono tutto questo facile da implementare? – Chetan

risposta

38

Sì, è possibile.

  • è necessario scrivere l'applicazione in Javascript, e rilevare in qualche modo se il browser è in modalità offline (semplice è quello di interrogare un server di tanto in tanto). (Modifica: vedere i commenti per un modo migliore di rilevare la modalità offline)

  • Assicurarsi che l'applicazione sia costituita solo da file HTML statici, Js e CSS (oppure impostare manualmente la politica di memorizzazione nella cache nello script in modo che il browser si ricordi in modalità offline). Gli aggiornamenti della pagina vengono effettuate attraverso JS manipolazione del DOM, non attraverso il server (un quadro, come ExtJS http://www.extjs.com vi aiuterà a qui)

  • Per lo stoccaggio, utilizzare un modulo come il PersistJS (http://github.com/jeremydurham/persist-js), che utilizza la memorizzazione locale del browser per tenere traccia dei dati. Al ripristino della connessione, sincronizzare con il server.

  • È necessario pre-memorizzare nella cache le immagini e le altre risorse utilizzate, altrimenti non saranno disponibili in modalità offline se non le hai già utilizzate in precedenza.

  • Ancora: la maggior parte della tua app deve essere in javascript, un framework PHP/Ruby/Python ti aiuterà poco se il server è irraggiungibile. Il server è probabilmente mantenuto il più semplice possibile, un'API AJAX simile a REST per archiviare e caricare i dati.

+11

puoi usare navigator.onLine per verificare se un browser è online –

+5

navigator.onLine non fornisce un valore preciso in molti browser. Vedi http://code.google.com/p/chromium/issues/detail?id=7469, ad esempio. – kpozin

+1

@kpozin il problema in WebKit è stato risolto, quindi ora tutti i principali browser lo supportano –

-1

Dai un'occhiata alla Google Gears, http://code.google.com/apis/gears/. Sebbene siano stati eliminati gradualmente a favore di HTML5. Tuttavia, sembra che ciò che viene spinto come HTML5 sia Google Gears.

0

stavo cercando anche questo, ho scoperto a HTML5 Offline Web Apps. non l'ho provato

Gli utenti di tipiche applicazioni Web online sono in grado di utilizzare le applicazioni solo quando dispongono di una connessione a Internet. Quando sono offline, non possono più controllare la loro posta elettronica, sfogliare gli appuntamenti del calendario o preparare presentazioni con i loro strumenti online. Nel frattempo, le applicazioni native forniscono queste funzionalità: i client di posta elettronica nascondono le cartelle localmente, i calendari memorizzano i loro eventi localmente, i pacchetti di presentazione archiviano i loro file di dati localmente.

15

Il "Let's Take This Offline" chapter a Mark Pilgrim del libro (on-line) Dive Into HTML5 è una bella panoramica di scrivere applicazioni web offline con le tecnologie HTML5.

Nota: poiché il collegamento Dive Into HTML5 originale di Mark Pilgrim sembra essere inattivo.

È possibile trovare copie tra here tra altri luoghi.

0

Javascript darvi un'opzione per la modalità offline e sito chiamato UpUp Javascript Framework. Un piccolo script che assicura che il tuo sito sia sempre lì per i tuoi utenti anche quando sono in aereo o in 20.000 leghe sotto il mare.

<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> 

Ora il contenuto dei nostri utenti vedono quando sono offline, è il contenuto di offline.html. Questo è solo un semplice file HTML, non diverso da qualsiasi altra pagina sul nostro sito.

Il nostro file offline.html contiene due file css: bootstrap.min.css e offline.css. Assicuriamoci che siano memorizzati nella cache e disponibili per i nostri utenti quando sono offline

+0

Svantaggi/funzionalità: funziona solo su https .. – Kamal

+0

non è un bug, è una funzionalità. – Rob