Étant donné que les connexions Internet peuvent être irrégulières ou inexistantes, vous devez d'abord envisager d'utiliser hors connexion : écrivez votre application comme si elle n'avait pas de connexion Internet. Une fois que votre application fonctionne hors connexion, ajoutez la fonctionnalité réseau dont vous avez besoin pour qu'elle puisse en faire plus lorsqu'elle est en ligne. Poursuivez votre lecture pour obtenir des conseils sur la mise en œuvre d'une application compatible avec le mode hors connexion.
Présentation
Les applications Chrome bénéficient des fonctionnalités suivantes sans frais:
- Les fichiers de votre application (l'ensemble de son code JavaScript, CSS et polices, ainsi que les autres ressources dont elle a besoin (comme les images)) sont déjà téléchargés.
- 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 bon fonctionnement de votre application hors connexion. Votre application compatible avec le mode hors connexion doit respecter les règles suivantes:
- Utilisez les données locales autant que possible.
- Lorsque vous utilisez des ressources sur Internet, utilisez
XMLHttpRequestpour l'obtenir, puis enregistrez les données localement. Vous pouvez utiliser l'API Chrome Storage, IndexedDB ou Filesystem pour enregistrer des données en local. - Séparez l'UI de votre application de ses données.
- La séparation de l'interface utilisateur et des données améliore non seulement la conception de votre application et facilite l'activation de l'utilisation hors connexion, mais vous permet également de fournir d'autres vues des données de l'utilisateur. Un framework MVC peut vous aider à séparer l'UI et les données.
- Supposons que votre application puisse être fermée à tout moment.
- Enregistrez l'état de l'application (à la fois en local et à distance, si possible) afin que les utilisateurs puissent reprendre là où ils s'étaient arrêtés.
- Testez minutieusement votre application.
- Assurez-vous que votre application fonctionne bien dans les scénarios courants et complexes.
Restrictions de sécurité
L'emplacement des ressources des applications Chrome est limité:
- 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. Par conséquent, les données sensibles doivent rester sur le serveur. Par exemple, ne stockez pas de mots de passe ni de numéros de carte de crédit localement.
- Tous les scripts JavaScript exécutés par l'application doivent se trouver dans le package de l'application. Il ne peut pas être intégré.
Tous les styles CSS, images et polices peuvent se trouver initialement dans le package de l'application ou sur une URL distante. Si la ressource est distante, vous ne pouvez pas la spécifier dans votre code HTML. Récupérez plutôt les données à l'aide de
XMLHttpRequest(consultez la section Référencer des ressources externes). Ensuite, faites référence aux données avec une URL blob ou (mieux encore) enregistrez, puis chargez les données à l'aide de l'API Filesystem.
Vous pouvez toutefois charger des ressources multimédias volumineuses, telles que des vidéos et des sons, à partir de sites externes. L'une des raisons de cette exception à la règle est que les éléments <video> et <audio> ont un bon comportement de remplacement lorsqu'une application a une connectivité limitée ou inexistante. Une autre raison est que l'extraction et la diffusion de contenus multimédias avec des URL XMLHttpRequest et d'objets blob ne permettent actuellement pas la diffusion en streaming ni la mise en mémoire tampon partielle.
Pour fournir un iFrame en bac à sable, vous pouvez créer une balise <webview>. Son contenu peut être distant, mais il ne dispose pas d'un accès direct aux API de l'application Chrome (voir Intégrer des pages Web externes).
Certaines restrictions sur les applications Chrome sont appliquées par la Content Security Policy (CSP), qui est toujours la suivante et ne peut pas être modifiée 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 l'état hors connexion (offline_enabled)
Nous partons du principe que votre application se comporte bien hors connexion. Si ce n'est pas le cas, vous devez en informer l'utilisateur, afin que son icône de lancement soit 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 les données en local (voir également 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. Synchronisation à distance facile (mais ce n'est pas nécessaire). Cette option n'est pas adaptée aux grandes quantités de données en raison des quotas. |
| API IndexedDB | Données structurées | Permet des recherches rapides sur les données. À utiliser avec l'autorisation unlimitedStorage. |
| API Filesystem | Autre chose | Fournit une zone de bac à sable dans laquelle vous pouvez stocker des fichiers. À utiliser avec l'autorisation unlimitedStorage. |
Enregistrer des données à distance
En général, vous êtes libre d'enregistrer des données à distance, mais certains frameworks et API peuvent vous aider (consultez la page Architecture MVC). Si vous utilisez l'API Chrome Storage, toutes les données pouvant être synchronisées sont automatiquement synchronisées lorsque l'application est en ligne et que l'utilisateur est connecté à Chrome. Si l'utilisateur n'est pas connecté, il sera invité à le faire. Notez toutefois que les données synchronisées de l'utilisateur sont supprimées s'il désinstalle votre application. {QUESTION: true?}
Pensez à enregistrer les données des utilisateurs pendant au moins 30 jours après la désinstallation de votre application, afin que les utilisateurs bénéficient d'une bonne expérience s'ils réinstallent 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 complètement distinctes de la vue 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. Pensez en termes d'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. Une vue de site Web peut non seulement être utile lorsque les utilisateurs n'ont pas accès à Chrome, mais 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 réinstallée immédiatement.
- L'application s'exécute sur deux ordinateurs en même temps, avec le même profil. L'application doit se comporter de manière raisonnable lorsqu'un ordinateur se déconnecte, que l'utilisateur effectue de nombreuses opérations sur cet ordinateur, puis qu'il se reconnecte.
- L'application présente une connectivité intermittente et bascule souvent entre les modes en ligne et hors connexion.
Assurez-vous également que l'application n'enregistre aucune donnée utilisateur sensible (comme les mots de passe) sur l'ordinateur de l'utilisateur.