Étant donné que les connexions Internet peuvent être irrégulières ou inexistantes, vous devez d'abord envisager d'être hors connexion: écrire votre application comme si elle n'était pas connectée à Internet. Une fois que votre application fonctionne hors connexion, ajoutez les fonctionnalités réseau dont votre application a besoin pour en faire plus lorsqu'elle est en ligne. Lisez la suite pour obtenir des conseils mettre en œuvre votre application hors connexion.
Présentation
Les applications Chrome bénéficient sans frais des avantages suivants:
- Les fichiers de votre application, y compris l'ensemble des fichiers JavaScript, CSS et polices, ainsi que les autres ressources dont elle a besoin (comme images) sont déjà téléchargées.
- Votre application peut enregistrer et éventuellement synchroniser de petites quantités de données à l'aide de l'API Chrome Storage.
- Votre application peut détecter les changements de connectivité en écoutant les événements en ligne et hors connexion.
Toutefois, ces fonctionnalités ne suffisent pas à garantir le fonctionnement hors connexion de votre application. Votre accès hors connexion application doit respecter les règles suivantes:
- Dans la mesure du possible, utilisez les données locales.
- Lorsque vous utilisez des ressources provenant d'Internet, utilisez
XMLHttpRequestpour les obtenir, puis enregistrez les données localement. Vous pouvez enregistrer des données localement à l'aide de l'API Chrome Storage, IndexedDB ou Filesystem. - Séparez l'interface utilisateur de votre application des données.
- En séparant l'UI et les données, vous améliorez non seulement la conception de votre application, mais aussi son activation. hors connexion, mais vous permet également de fournir d'autres vues des données de l'utilisateur. Un framework MVC peut aider l'UI et les données sont séparées.
- Partez du principe que votre application peut être fermée à tout moment.
- Enregistrez l'état de l'application (à la fois en local et à distance, si possible) pour que les utilisateurs puissent la récupérer où qu'ils se trouvent qu'ils se sont arrêtés.
- Testez soigneusement votre application.
- Assurez-vous que votre application fonctionne correctement dans les scénarios courants et délicats.
Restrictions de sécurité
Les applications Chrome sont limitées quant aux endroits où ils peuvent placer leurs ressources:
- Comme les données locales sont visibles sur l'ordinateur de l'utilisateur et ne peuvent pas être chiffrées de manière sécurisée, les données les données doivent rester sur le serveur. Par exemple, ne stockez pas de mots de passe ni de numéros de carte de crédit en local.
- Tout le code JavaScript exécuté par l'application doit figurer dans son package. Il ne peut pas être intégré.
Tous les styles CSS, images et polices peuvent être initialement situés dans le package de l'application ou à une URL distante. Si la ressource est distante, vous ne pouvez pas la spécifier dans votre code HTML. Procurez-vous plutôt des données à l'aide de
XMLHttpRequest(voir Référencer des ressources externes). Reportez-vous ensuite au les données à l'aide d'une URL de blob ou, mieux encore, enregistrer les données, puis les charger à l'aide de l'API Filesystem.
En revanche, vous pouvez charger des ressources multimédias volumineuses, telles que des vidéos et des sons, à partir de sites externes. Un
Cette exception à la règle est due au fait que les éléments <video> et <audio> ont une bonne solution de remplacement.
lorsqu'une application a une connectivité limitée ou inexistante. Autre raison : l'extraction et la diffusion
Pour le moment, les fichiers multimédias avec XMLHttpRequest et les URL de blob ne permettent pas la diffusion en flux continu ou la mise en mémoire tampon partielle.
Pour fournir un iFrame en bac à sable, vous pouvez créer un tag <webview>. Son contenu peut être
à distance, mais il
ne dispose pas d'un accès direct aux API de l'application Chrome (voir l'article Intégrer des pages Web externes).
Certaines des restrictions appliquées aux applications Chrome sont appliquées par la Content Security Policy (CSP), qui est toujours le suivant et ne peut pas être modifié pour les applications 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:;
Spécifier "offline_enabled"
Nous partons du principe que votre application se comporte bien hors connexion. Si ce n'est pas le cas, vous devez l'annoncer, donc
que son icône de lancement est grisée lorsque l'utilisateur est hors connexion. Pour ce faire, définissez offline_enabled sur false
dans le fichier manifeste de l'application:
{
"name": "My app",
...
"offline_enabled": false,
...
}
Enregistrer des données localement
Le tableau suivant présente les options disponibles pour enregistrer des données localement (voir également l'article Gérer les données).
| API | Utilisation optimale | Remarques |
|---|---|---|
| API Chrome Storage | Petites quantités de données de chaîne | Idéal pour les paramètres et l'état. La synchronisation à distance est simple, mais vous n'avez rien à faire. Ne convient pas aux grandes quantités de données en raison des quotas. |
| API IndexedDB | Données structurées | Permet d'accélérer les recherches sur les données. Utilisez l'autorisation unlimitedStorage. |
| API Filesystem | Autre chose | Fournit une zone de bac à sable dans laquelle vous pouvez stocker des fichiers. Utilisez l'autorisation unlimitedStorage. |
Enregistrer des données à distance
En général, c'est vous qui choisissez la manière dont vous pouvez enregistrer des données à distance. Toutefois, certains frameworks et API peuvent vous aider (voir MVC, consultez la page architecture). Si vous utilisez l'API Chrome Storage, toutes les données pouvant être synchronisées sont automatiquement synchronisés chaque fois que l'application est en ligne et que l'utilisateur est connecté à Chrome. Si l'utilisateur n'est pas connecté, il sera invité à se connecter. Notez toutefois que les données synchronisées de l'utilisateur sont supprimées s'il désinstalle votre application. {QUESTION: true?}
Pensez à sauvegarder les données les données pendant au moins 30 jours après la désinstallation de votre application, afin que les utilisateurs bénéficiera d'une bonne expérience s'il réinstalle votre application.
Séparer l'UI des données
L'utilisation d'un framework MVC peut vous aider à concevoir et à implémenter votre application de sorte que les données soient distincte de celle de l'application sur les données. Consultez la page Architecture MVC pour obtenir la liste des frameworks MVC.
Si votre application communique avec un serveur personnalisé, celui-ci doit vous fournir des données, et non des fragments de code HTML. Penser liés aux API RESTful.
Une fois vos données séparées de votre application, il est beaucoup plus facile de fournir d'autres vues des données. Par exemple, vous pouvez fournir une vue de site Web de toutes les données publiques. Non seulement une vue de site Web peut être utiles lorsque l'utilisateur n'a pas accès à Chrome, mais elles peuvent aussi permettre aux moteurs de recherche de trouver les données.
Tests
Assurez-vous que votre application fonctionne correctement dans les cas suivants:
- L'application est installée, puis se déconnecte immédiatement. En d'autres termes, la première utilisation de l'application est hors connexion.
- L'application est installée sur un ordinateur, puis synchronisée avec un autre.
- L'application est désinstallée, puis immédiatement réinstallée.
- L'application s'exécute sur deux ordinateurs en même temps, avec le même profil. L'application doit se comporter raisonnablement, lorsqu'un ordinateur se déconnecte, l'utilisateur effectue un tas de choses sur cet ordinateur, et puis l'ordinateur se reconnecte.
- L'application a une connectivité intermittente et alterne souvent entre les modes en ligne et hors connexion.
Assurez-vous également que l'application n'enregistre aucune donnée utilisateur sensible (telle que des mots de passe) sur les machine.