Poiché le connessioni a internet possono essere instabili o inesistenti, devi considerare prima la modalità offline: scrivi la tua app come se non avesse una connessione a internet. Quando l'app funziona offline, aggiungi qualsiasi cosa la funzionalità di rete necessaria per fare di più quando è online. Continua a leggere per suggerimenti implementare l'app offline.
Panoramica
Le app di Chrome ricevono senza costi quanto segue:
- I file dell'app, tutti i relativi JavaScript, CSS e caratteri, oltre ad altre risorse necessarie (ad esempio immagini) sono già scaricate.
- La tua app può salvare e, facoltativamente, sincronizzare piccole quantità di dati utilizzando l'API Chrome Storage.
- La tua app può rilevare i cambiamenti nella connettività ascoltando eventi online e offline.
Tuttavia, queste funzionalità non sono sufficienti per garantire che la tua app funzioni offline. Hai attivato la modalità offline deve seguire queste regole:
- Se possibile, utilizza dati locali.
- Quando utilizzi risorse di internet, usa
XMLHttpRequest
per ottenerlo e poi salva i dati a livello locale. Puoi usare l'API Chrome Storage, IndexedDB o l'API Filesystem per salvare i dati localmente. - Separa l'UI dell'app dai dati.
- La separazione dell'UI e dei dati non solo migliora il design dell'app e semplifica le attività di abilitazione per l'utilizzo offline, ma ti consente anche di fornire altre visualizzazioni dei dati dell'utente. Un framework MVC può essere d'aiuto di mantenere separati l'UI e i dati.
- Supponiamo che la tua app possa essere chiusa in qualsiasi momento.
- Salva lo stato dell'applicazione (se possibile, sia in locale che da remoto) in modo che gli utenti possano riprendere l'attività ovunque si trovino l'avevano interrotto.
- Testa l'app con attenzione.
- Assicurati che l'app funzioni bene sia negli scenari comuni che in quelli difficili.
Limitazioni di sicurezza
Il posizionamento delle risorse delle app di Chrome è limitato:
- Poiché i dati locali sono visibili sul computer dell'utente e non possono essere criptati in modo sicuro, i dati sono sensibili i dati devono rimanere sul server. Ad esempio, non memorizzare localmente password o numeri di carte di credito.
- Tutto il codice JavaScript eseguito dall'app deve essere contenuto nel pacchetto dell'app. Non può essere in linea.
Tutti gli stili CSS, le immagini e i caratteri CSS possono essere inizialmente posizionati nel pacchetto dell'app o a un URL remoto. Se la risorsa è remota, non puoi specificarla nel tuo codice HTML. Utilizza invece utilizzando
XMLHttpRequest
(vedi Riferimenti delle risorse esterne). Quindi fai riferimento alle con un URL blob o, meglio ancora, salvarli e caricarli usando l'API Filesystem.
Tuttavia, puoi caricare risorse multimediali di grandi dimensioni, come video e audio da siti esterni. Uno.
Il motivo di questa eccezione alla regola è che gli elementi <video>
e <audio>
hanno una buona riserva di riserva
comportamento quando la connettività dell'app è limitata o assente. Un altro motivo è che il recupero e la pubblicazione
i contenuti multimediali con XMLHttpRequest
e URL BLOB attualmente non consentono lo streaming o il buffering parziale.
Per fornire un iframe con sandbox, puoi creare un tag <webview>
. I suoi contenuti possono essere remoti,
non abbia accesso diretto alle API dell'app Chrome (vedi Incorporare pagine web esterne).
Alcune restrizioni sulle app di Chrome sono applicate dai Criteri di sicurezza del contenuto (CSP), che corrisponde sempre a quanto segue e non può essere modificato per le app di Chrome:
default-src 'self';
connect-src * data: blob: filesystem:;
style-src 'self' blob: data: filesystem: 'unsafe-inline';
img-src 'self' blob: data: filesystem:;
frame-src 'self' blob: data: filesystem:;
font-src 'self' blob: data: filesystem:;
media-src * data: blob: filesystem:;
Specificare offline_enabled
Si presume che l'app funzioni bene offline. In caso contrario, dovresti pubblicizzarlo.
che l'icona di avvio sia attenuata quando l'utente è offline. Per farlo, imposta offline_enabled
su false
nel file manifest dell'app:
{
"name": "My app",
...
"offline_enabled": false,
...
}
Salvataggio dei dati in locale
La tabella seguente mostra le opzioni per il salvataggio dei dati localmente (vedi anche Gestione dei dati).
API | Utilizzo ottimale | Note |
---|---|---|
API Chrome Storage | Piccole quantità di dati stringa | Ideale per le impostazioni e lo stato. La sincronizzazione da remoto è facile (ma non è necessario). Non ideale per grandi quantità di dati a causa delle quote. |
API IndexedDB | Dati strutturati | Consente ricerche rapide nei dati. Utilizzala con l'autorizzazione UnlimitedStorage. |
API Filesystem | Altro | Fornisce un'area sandbox in cui puoi archiviare i file. Utilizzala con l'autorizzazione UnlimitedStorage. |
Salvataggio dei dati da remoto
In generale, la modalità di salvataggio dei dati da remoto dipende da te, ma alcuni framework e API possono esserti d'aiuto (vedi MVC) architettura). Se utilizzi l'API Chrome Storage, tutti i dati sincronizzabili vengono automaticamente vengono sincronizzati ogni volta che l'app è online e l'utente ha eseguito l'accesso a Chrome. Se l'utente non ha eseguito l'accesso, verrà chiesto loro di eseguire l'accesso. Tuttavia, tieni presente che i dati sincronizzati dell'utente vengono eliminati se l'utente disinstalla la tua app. {QUESTION: true?}
Valuta la possibilità di salvare per almeno 30 giorni dopo la disinstallazione dell'app, in modo che gli utenti se reinstallano la tua app.
Separazione dell'interfaccia utente dai dati
L'utilizzo di un framework MVC può aiutarti a progettare e implementare la tua app in modo che i dati siano completamente separatamente dalla vista dell'app sui dati. Consulta la pagina Architettura di MVC per un elenco dei framework MVC.
Se la tua app comunica con un server personalizzato, il server dovrebbe fornirti dati, non blocchi di HTML. Pensaci termini delle API RESTful.
Una volta separati i dati dall'app, è molto più facile fornire visualizzazioni alternative dei dati. Ad esempio, potresti fornire una visualizzazione sul sito web di tutti i dati pubblici. Non solo è possibile visualizzare un sito web è utile quando l'utente è lontano da Chrome, ma può consentire ai motori di ricerca di trovare i dati.
Test
Assicurati che l'app funzioni correttamente nelle seguenti circostanze:
- L'app viene installata e passa immediatamente alla modalità offline. In altre parole, il primo utilizzo dell'app è offline.
- L'app viene installata su un computer e sincronizzata con un altro.
- L'app viene disinstallata e installata di nuovo immediatamente.
- L'app viene eseguita su due computer contemporaneamente e con lo stesso profilo. L'app deve comportarsi ragionevolmente quando un computer passa alla modalità offline, l'utente esegue una serie di operazioni su quel computer e il computer sarà di nuovo online.
- La connettività dell'app è intermittente e passa spesso dalla modalità online a quella offline e viceversa.
Assicurati inoltre che l'app non salvi dati utente sensibili (ad esempio password) nei in una macchina virtuale.