Poiché le connessioni a internet possono essere inefficaci o inesistenti, considera innanzitutto l'idea di offline: scrivi la tua app come se non avesse una connessione a internet. Quando l'app funziona offline, aggiungi le funzionalità di rete necessarie affinché l'app possa fare di più quando è online. Continua a leggere per suggerimenti sull'implementazione delle app offline.
Panoramica
Le app di Chrome ricevono senza costi quanto segue:
- I file dell'app: tutti i relativi caratteri JavaScript, CSS e caratteri, oltre ad altre risorse necessarie (ad esempio, le immagini), vengono già scaricati.
- L'app può salvare e, facoltativamente, sincronizzare piccole quantità di dati utilizzando l'API Chrome Storage.
- L'app può rilevare cambiamenti nella connettività ascoltando eventi online e offline.
Tuttavia, queste funzionalità non sono sufficienti per garantire che la tua app funzioni offline. L'app per cui è abilitata la modalità offline deve seguire queste regole:
- Se possibile, utilizza i dati locali.
- Quando usi risorse da internet, usa
XMLHttpRequestper ottenerlo, quindi salva i dati localmente. Puoi usare l'API Chrome Storage, l'API IndexedDB o l'API Filesystem per salvare i dati localmente. - Separa l'UI dell'app dai relativi dati.
- La separazione di UI e dati non solo migliora il design della tua app e semplifica l'attivazione dell'utilizzo offline, ma ti consente anche di fornire altre visualizzazioni dei dati dell'utente. Un framework MVC può aiutarti a mantenere separati l'interfaccia utente dai dati.
- Supponiamo che la tua app possa essere chiusa in qualsiasi momento.
- Salva lo stato dell'applicazione (sia in locale che da remoto, quando possibile) in modo che gli utenti possano riprendere da dove hanno interrotto.
- Testa la tua app con attenzione.
- Assicurati che la tua app funzioni bene sia negli scenari comuni che in quelli complessi.
Limitazioni di sicurezza
Le app di Chrome hanno limitazioni relative alla posizione in cui possono inserire le proprie risorse:
- Poiché i dati locali sono visibili sulla macchina dell'utente e non possono essere criptati in modo sicuro, i dati sensibili devono rimanere sul server. Ad esempio, non archiviare password o numeri di carte di credito localmente.
- Tutto il codice JavaScript eseguito dall'app deve essere contenuto nel pacchetto dell'app. Non può essere in linea.
Tutti gli stili, le immagini e i caratteri CSS possono essere inizialmente posizionati nel pacchetto dell'app o in un URL remoto. Se la risorsa è remota, non puoi specificarla nel codice HTML. Recupera i dati utilizzando invece
XMLHttpRequest(consulta la sezione Riferimento a risorse esterne). Quindi fai riferimento ai dati con un URL BLOB o, meglio ancora, salva e carica i dati utilizzando l'API Filesystem.
Tuttavia, puoi caricare risorse multimediali di grandi dimensioni, come video e audio da siti esterni. Uno
dei motivi di questa eccezione alla regola è che gli elementi <video> e <audio> hanno un buon comportamento
di riserva quando la connettività di un'app è limitata o assente. Un altro motivo è che al momento il recupero e la pubblicazione di contenuti multimediali con URL XMLHttpRequest e BLOB non consentono lo streaming o il buffering parziale.
Per fornire un iframe con sandbox, puoi creare un tag <webview>. I contenuti possono essere remoti, ma non ha accesso diretto alle API dell'app Chrome (vedi Incorporare pagine web esterne).
Alcune delle limitazioni per le app di Chrome sono applicate dal Criterio di sicurezza del contenuto (CSP), che è sempre il seguente 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 la tua app funzioni bene offline. In caso contrario, pubblicizzalo in modo
che l'icona di lancio 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 locale dei dati
La tabella seguente mostra le opzioni per salvare i dati localmente (vedi anche Gestione dei dati).
| API | Miglior utilizzo | Note |
|---|---|---|
| API Chrome Storage | Piccole quantità di dati stringa | Ideale per impostazioni e stato. Sincronizzazione facile da remoto (ma non è necessaria). Non ideale per grandi quantità di dati, a causa delle quote. |
| API IndexedDB | Dati strutturati | Consente ricerche rapide sui dati. Utilizzalo con l'autorizzazione unlimitedStorage. |
| API Filesystem | Altro | Fornisce un'area sandbox in cui puoi archiviare i file. Utilizzalo con l'autorizzazione unlimitedStorage. |
Salvataggio dei dati da remoto
In generale, sei tu a decidere come salvare i dati in remoto, ma alcuni framework e API possono esserti utili (vedi Architettura MVC). Se utilizzi l'API Chrome Storage, tutti i dati sincronizzabili vengono sincronizzati automaticamente ogni volta che l'app è online e l'utente ha eseguito l'accesso a Chrome. Se l'utente non ha eseguito l'accesso, gli verrà chiesto di farlo. Tuttavia, tieni presente che i dati sincronizzati dell'utente vengono eliminati se l'utente disinstalla l'app. {QUESTION: true?}
Valuta la possibilità di salvare i dati degli utenti per almeno 30 giorni dopo la disinstallazione dell'app, in modo che gli utenti possano avere un'esperienza positiva se reinstallano l'app.
Separare l'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 separati da quelli dell'app. Consulta Architettura MVC per un elenco dei framework MVC.
Se la tua app comunica con un server personalizzato, il server dovrebbe darti dati, non blocchi di HTML. Pensa in termini di API RESTful.
Una volta che i dati sono separati dalla tua app, è molto più facile fornire visualizzazioni alternative dei dati. Ad esempio, puoi fornire una visualizzazione del sito web di qualsiasi dato pubblico. Una visualizzazione del sito web può essere utile non solo quando l'utente è lontano da Chrome, ma può anche consentire ai motori di ricerca di trovare i dati.
Test
Assicurati che la tua app funzioni correttamente nelle seguenti circostanze:
- L'app viene installata, dopodiché passa immediatamente alla modalità offline. In altre parole, il primo utilizzo dell'app è offline.
- L'app viene installata su un computer, quindi sincronizzata su un altro.
- L'app viene disinstallata e poi installata di nuovo immediatamente.
- L'app viene eseguita su due computer contemporaneamente, con lo stesso profilo. L'app deve comportarsi in modo ragionevole quando un computer è offline, l'utente svolge molte attività su quel computer e poi il computer torna online.
- L'app ha una connessione intermittente, che passa spesso da online a offline e viceversa.
Assicurati inoltre che l'app non salvi dati utente sensibili (ad esempio le password) sulla macchina dell'utente.