Presque tous les aspects du développement d'applications impliquent l'envoi ou la réception de données. Démarrage... avec les principes de base, utilisez un framework MVC pour concevoir et implémenter votre application de manière à sont complètement distinctes de la vue de l'application sur ces données (consultez la section Architecture MVC).
Vous devez également réfléchir à la façon dont les données sont gérées lorsque votre application est hors connexion (voir la section Premièrement hors connexion). Ce document présente brièvement les options de stockage permettant d'envoyer, de recevoir et d'enregistrer des données localement. la Le reste du document explique comment utiliser les API File System et Sync File System de Google Chrome (voir aussi API fileSystem et API syncFileSystem).
Options de stockage
Les applications empaquetées utilisent de nombreux mécanismes différents pour envoyer et recevoir des données. Pour les données externes (ressources, pages Web), vous devez connaître Content Security Policy (CSP). Semblable à Chrome Les extensions vous permettent de communiquer avec les serveurs distants à l'aide de XMLHttpRequests d'origine croisée. Toi peut également isoler les pages externes, de sorte que le reste de votre application soit sécurisé (voir la section Intégrer un .
Lorsque vous enregistrez des données localement, vous pouvez utiliser l'API Chrome Storage pour enregistrer de petites quantités de chaînes et IndexedDB pour enregistrer les données structurées. Avec IndexedDB, vous pouvez conserver les objets JavaScript et utiliser ses index pour interroger des données. Pour en savoir plus, consultez la page Simple Todo de HTML5 Rock Répertorier les tutoriels). Pour tous les autres types de données, comme les données binaires, utilisez le système de fichiers et la synchronisation. API Filesystem.
Les API FileSystem et Sync Filesystem de Chrome étendent l'API FileSystem HTML5. Grâce au API Filesystem, les applications peuvent créer, lire, naviguer et écrire dans une section en bac à sable du système de fichiers local. Par exemple, une application de partage de photos peut utiliser l'API Filesystem pour lire et écrire toute des photos sélectionnées par l'utilisateur.
Avec l'API Sync Filesystem de Chrome, les applications peuvent enregistrer et synchroniser des données dans le Google Drive d'un utilisateur pour que les mêmes données peuvent être disponibles sur différents clients. Par exemple, un texte sauvegardé dans le cloud de texte peut synchroniser automatiquement les nouveaux fichiers texte avec le compte Google Drive d'un utilisateur. Lorsque utilisateur ouvre l'éditeur de texte dans un nouveau client, Google Drive transfère les nouveaux fichiers texte vers cette instance de l'éditeur de texte.
Utiliser l'API Chrome Filesystem
Ajouter une autorisation de système de fichiers
Pour utiliser l'API File System de Chrome, vous devez ajouter "fileSystem" l'autorisation d'accès au fichier manifeste, que vous pouvez obtenir l’autorisation de l’utilisateur pour stocker des données persistantes.
"permissions": [
"...",
"fileSystem"
]
Options utilisateur pour la sélection des fichiers
Les utilisateurs s'attendent à sélectionner des fichiers comme ils le font toujours. Ils s'attendent au minimum à obtenir fichier" et un sélecteur de fichier standard. Si votre application fait une utilisation intensive de la gestion des fichiers, vous devez également Implémentez le glisser-déposer (voir ci-dessous et consultez également l'article Glisser-déposer HTML5 natif).
Obtenir le chemin d'accès à un fileEntry
Pour obtenir le chemin d'accès complet du fichier sélectionné par l'utilisateur, fileEntry, appelez getDisplayPath():
function displayPath(fileEntry) {
chrome.fileSystem.getDisplayPath(fileEntry, function(path) {
console.log(path)
});
}
Implémenter le glisser-déposer
Si vous devez implémenter la sélection par glisser-déposer, le contrôleur de fichiers par glisser-déposer (dnd.js) se trouve dans
l'exemple filesystem-access est un bon point de départ. Le contrôleur crée une entrée de fichier
à partir d'un DataTransferItem par glisser-déposer. Dans cet exemple, fileEntry est défini sur la première
élément supprimé.
var dnd = new DnDFileController('body', function(data) {
var fileEntry = data.items[0].webkitGetAsEntry();
displayPath(fileEntry);
});
Lire un fichier
Le code suivant ouvre le fichier (en lecture seule) et le lit comme du texte à l'aide d'un objet FileReader. Si
le fichier n'existe pas, une erreur est générée.
var chosenFileEntry = null;
chooseFileButton.addEventListener('click', function(e) {
chrome.fileSystem.chooseEntry({type: 'openFile'}, function(readOnlyEntry) {
readOnlyEntry.file(function(file) {
var reader = new FileReader();
reader.onerror = errorHandler;
reader.onloadend = function(e) {
console.log(e.target.result);
};
reader.readAsText(file);
});
});
});
Écrire un fichier
Les deux cas d'utilisation courants
de l'écriture d'un fichier sont « Enregistrer » et "Enregistrer sous". Le code suivant crée un
writableEntry à partir de chosenFileEntry en lecture seule et y écrit le fichier sélectionné.
chrome.fileSystem.getWritableEntry(chosenFileEntry, function(writableFileEntry) {
writableFileEntry.createWriter(function(writer) {
writer.onerror = errorHandler;
writer.onwriteend = callback;
chosenFileEntry.file(function(file) {
writer.write(file);
});
}, errorHandler);
});
Le code suivant crée un fichier avec "Enregistrer sous" et écrit le nouvel blob
à l'aide de la méthode writer.write().
chrome.fileSystem.chooseEntry({type: 'saveFile'}, function(writableFileEntry) {
writableFileEntry.createWriter(function(writer) {
writer.onerror = errorHandler;
writer.onwriteend = function(e) {
console.log('write complete');
};
writer.write(new Blob(['1234567890'], {type: 'text/plain'}));
}, errorHandler);
});
Utiliser l'API Chrome Sync Filesystem
Grâce au stockage de fichiers synchronisable, les objets de données renvoyés peuvent être utilisés de la même manière que les objets des systèmes de fichiers hors connexion dans l'API FileSystem, mais avec la synchronisation supplémentaire (et automatique) de ces vers Google Drive.
Ajouter une autorisation d'accès au système de fichiers de synchronisation
Pour utiliser l'API Sync Filesystem de Chrome, vous devez ajouter "syncFileSystem" l'autorisation manifeste, afin que vous puissiez obtenir l'autorisation de l'utilisateur pour stocker et synchroniser des données persistantes.
"permissions": [
"...",
"syncFileSystem"
]
Lancement du stockage de fichiers synchronisables...
Pour activer le stockage de fichiers synchronisable dans votre application, il vous suffit d'appeler syncFileSystem.requestFileSystem. Cette méthode renvoie un système de fichiers pouvant être synchronisé et sauvegardé par Google Drive, par exemple:
chrome.syncFileSystem.requestFileSystem(function (fs) {
// FileSystem API should just work on the returned 'fs'.
fs.root.getFile('test.txt', {create:true}, getEntryCallback, errorCallback);
});
À propos de l'état de synchronisation des fichiers
Utilisez syncFileSystem.getFileStatus pour obtenir l'état de synchronisation d'un fichier actuel:
chrome.syncFileSystem.getFileStatus(entry, function(status) {...});
L'état de synchronisation des fichiers peut avoir l'une des valeurs suivantes: 'synced', 'pending' ou 'conflicting'.
"Synchronisé" signifie que le fichier est entièrement synchronisé ; il n'y a aucune modification locale en attente qui n'a pas été
synchronisé avec Google Drive. Il peut toutefois y avoir des modifications à finaliser dans Google Drive
qui n'ont pas encore été récupérées.
"En attente" signifie que le fichier comporte des modifications à finaliser qui n'ont pas encore été synchronisées dans Google Drive. Si l'application est
s'exécute en ligne, les modifications locales sont (presque) immédiatement synchronisées avec Google Drive
L'événement syncFileSystem.onFileStatusChanged est déclenché avec l'état 'synced' (voir ci-dessous les
plus de détails).
syncFileSystem.onFileStatusChanged est déclenché lorsque l'état d'un fichier passe à
'conflicting' 'Conflit' signifie qu'il y a des modifications conflictuelles sur le stockage local
Google Drive. Cet état ne peut être attribué à un fichier que si la règle de résolution des conflits est définie sur
'manual' La règle par défaut est 'last_write_win', et les conflits sont automatiquement résolus
de type "dernier écriture-gagnant". La règle de résolution des conflits du système peut être modifiée en
syncFileSystem.setConflictResolutionPolicy.
Si la règle de résolution des conflits est définie sur 'manual' et qu'un fichier présente l'état 'conflicting',
L'application peut toujours lire et écrire le fichier en tant que fichier hors connexion local, mais les modifications ne sont pas synchronisées
et le fichier restera dissocié des modifications à distance apportées sur d'autres clients jusqu'à ce que le conflit soit
résolu. Le moyen le plus simple de résoudre un conflit consiste à supprimer ou à renommer la version locale du fichier.
Cela force la synchronisation de la version distante, l'état en conflit est résolu et
L'événement onFileStatusChanged est déclenché avec l'état 'synced'.
Écouter les modifications de l'état de synchronisation
L'événement syncFileSystem.onFileStatusChanged est déclenché lorsque l'état de synchronisation d'un fichier change.
Par exemple, supposons qu'un fichier comporte des modifications à finaliser et qu'il se trouve dans l'état de l'état. L'application a peut-être été
en état hors connexion afin que le changement
soit sur le point d'être synchronisé. Lorsque le service de synchronisation détecte la
modification locale en attente et importe la modification dans Google Drive, le service déclenche le
Événement onFileStatusChanged avec les valeurs suivantes:
{ fileEntry:a fileEntry for the file, status: 'synced', action: 'updated', direction: 'local_to_remote' }
De même, quelles que soient les activités locales, le service de synchronisation peut détecter des modifications distantes apportées par
et télécharge les modifications depuis Google Drive vers le stockage local. Si la télécommande
la modification apportée à l'ajout d'un nouveau fichier, un événement avec les valeurs suivantes est déclenché:
{ fileEntry: a fileEntry for the file, status: 'synced', action: 'added', direction: 'remote_to_local' }
Si des modifications sont en conflit pour le même fichier côté local et côté distant, et si le conflit
la règle de résolution est définie sur 'manual', l'état du fichier passe à l'état conflicting, est
est dissocié du service de synchronisation et ne sera pas synchronisé tant que le conflit n'aura pas été résolu. Dans ce
cas où un événement avec les valeurs suivantes est déclenché:
{ fileEntry: a fileEntry for the file, status: 'conflicting', action: null, direction: null }
Pour cet événement, vous pouvez ajouter un écouteur qui répond aux changements d'état. Par exemple, L'application Lecteur de musique Chrome écoute toute nouvelle musique synchronisée depuis Google Drive, mais pas encore importés dans le stockage local de l'utilisateur sur un client particulier. Toute la musique trouvée y est synchronisée. client:
chrome.syncFileSystem.onFileStatusChanged.addListener(function(fileInfo) {
if (fileInfo.status === 'synced') {
if (fileInfo.direction === 'remote_to_local') {
if (fileInfo.action === 'added') {
db.add(fileInfo.fileEntry);
} else if (fileInfo.action === 'deleted') {
db.remove(fileInfo.fileEntry);
}
}
}
});
Vérifier l'utilisation de l'API
Pour vérifier la quantité de données utilisées par l'API, interrogez le répertoire de bac à sable local de l'application ou la Nombre d'octets d'utilisation renvoyés par syncFileSystem.getUsageAndQuota:
chrome.syncFileSystem.getUsageAndQuota(fileSystem, function (storageInfo) {
updateUsageInfo(storageInfo.usageBytes);
updateQuotaInfo(storageInfo.quotaBytes);
});
Vous pouvez également consulter l'espace de stockage du service de backend de synchronisation de l'utilisateur (dans Google Drive). Les fichiers synchronisés sont enregistré dans un dossier Google Drive masqué, Chrome Syncable FileSystem. Le dossier ne s'affichera pas dans votre dossier "Mon Drive" , mais vous pouvez y accéder en recherchant le nom du dossier dans le champ de recherche. Notez que il n'est pas garanti que la mise en page du dossier distant reste rétrocompatible entre les versions.)