Étape 6: Exporter les tâches dans le système de fichiers

Au cours de cette étape, vous allez apprendre à:

  • Comment obtenir une référence à un fichier dans le système de fichiers externe.
  • Écrire dans le système de fichiers

Temps estimé pour effectuer cette étape: 20 minutes
Pour afficher un aperçu de cette étape, accédez au bas de la page ↓.

Exporter les tâches

Cette étape permet d'ajouter un bouton d'exportation à l'application. Lorsque l'utilisateur clique dessus, les tâches en cours sont enregistrées dans un sélectionné par l'utilisateur. Si le fichier existe, il est remplacé. Sinon, un fichier est créé.

Modifier les autorisations

Les autorisations du système de fichiers peuvent être demandées sous la forme d'une chaîne pour un accès en lecture seule, ou d'un objet avec d'autres propriétés. Exemple :

// Read only
"permissions": ["fileSystem"]

// Read and write
"permissions": [{"fileSystem": ["write"]}]

// Read, write, autocomplate previous input, and select folder directories instead of files
"permissions": [{"fileSystem": ["write", "retainEntries", "directory"]}]

Vous devez disposer d'un accès en lecture et en écriture. Dans le fichier manifest.json, demandez l'{fileSystem: [ "write" ] } autorisation:

"permissions": [
  "storage", 
  "alarms", 
  "notifications", 
  "webview",
  "<all_urls>", 
  { "fileSystem": ["write"] } 
],

Mettre à jour l'affichage HTML

Dans le fichier index.html, ajoutez un bouton Export to disk (Exporter vers le disque) et un div où l'application affiche un message d'état:

<footer id="info">
  <button id="toggleAlarm">Activate alarm</button>
  <button id="exportToDisk">Export to disk</button>
  <div id="status"></div>
  ...
</footer>

Toujours dans le fichier index.html, chargez le script export.js:

...
<script src="js/alarms.js"></script>
<script src="js/export.js"></script>

Créer un script d'exportation

Créez un fichier JavaScript nommé export.js à l'aide du code ci-dessous. Enregistrez-le dans le dossier js.

(function() {

  var dbName = 'todos-vanillajs';

  var savedFileEntry, fileDisplayPath;

  function getTodosAsText(callback) {
  }

  function exportToFileEntry(fileEntry) {
  }

  function doExportToDisk() {
  }

  document.getElementById('exportToDisk').addEventListener('click', doExportToDisk);

})();

Pour le moment, export.js ne contient qu'un écouteur de clics sur le bouton Exporter vers le disque et des bouchons pour getTodosAsText(), exportToFileEntry et doExportToDisk().

Obtenir les tâches sous forme de texte

Mettez à jour getTodosAsText() pour qu'il lise les tâches de chrome.storage.local et génère un texte de ces entités:

function getTodosAsText(callback) {
  chrome.storage.local.get(dbName, function(storedData) {
    var text = '';

    if ( storedData[dbName].todos ) {
      storedData[dbName].todos.forEach(function(todo) {
          text += '- ';
          if ( todo.completed ) {
            text += '[DONE] ';
          }
          text += todo.title;
          text += '\n';
        }, '');
    }

    callback(text);

  }.bind(this));
}

Sélectionner un fichier

Mettez à jour doExportToDisk() avec chrome.fileSystem.chooseEntry() pour permettre à l'utilisateur de choisir une :

function doExportToDisk() {

  if (savedFileEntry) {

    exportToFileEntry(savedFileEntry);

  } else {

    chrome.fileSystem.chooseEntry( {
      type: 'saveFile',
      suggestedName: 'todos.txt',
      accepts: [ { description: 'Text files (*.txt)',
                   extensions: ['txt']} ],
      acceptsAllTypes: true
    }, exportToFileEntry);

  }
}

Le premier paramètre de chrome.fileSystem.chooseEntry() est un objet d'options. Le deuxième est une méthode de rappel.

S'il existe déjà un FileEntry enregistré, utilisez-le à la place lorsque vous appelez exportToFileEntry(). Fichier des références existent pendant toute la durée de vie de l'objet représentant le FileEntry. Cet exemple relie FileEntry à la fenêtre de l'application afin que le code JavaScript puisse écrire dans le fichier sélectionné sans aucun utilisateur tant que la fenêtre de l'application reste ouverte.

Utiliser FileEntry pour écrire des éléments de tâches sur le disque

Mettez à jour exportToFileEntry() pour enregistrer les tâches sous forme de texte via l'API Web FileEntry:

function exportToFileEntry(fileEntry) {
  savedFileEntry = fileEntry;

  var status = document.getElementById('status');

  // Use this to get a file path appropriate for displaying
  chrome.fileSystem.getDisplayPath(fileEntry, function(path) {
    fileDisplayPath = path;
    status.innerText = 'Exporting to '+path;
  });

  getTodosAsText( function(contents) {

    fileEntry.createWriter(function(fileWriter) {

      var truncated = false;
      var blob = new Blob([contents]);

      fileWriter.onwriteend = function(e) {
        if (!truncated) {
          truncated = true;
          // You need to explicitly set the file size to truncate
          // any content that might have been there before
          this.truncate(blob.size);
          return;
        }
        status.innerText = 'Export to '+fileDisplayPath+' completed';
      };

      fileWriter.onerror = function(e) {
        status.innerText = 'Export failed: '+e.toString();
      };

      fileWriter.write(blob);

    });
  });
}

chrome.fileSystem.getDisplayPath() obtient un chemin d'accès au fichier affichable qui renvoie l'état div

Utilisez fileEntry.createWriter() pour créer un objet FileWriter. fileWriter.write() peut ensuite écrire un Blob dans le système de fichiers. Utiliser fileWriter.onwriteend() et fileWriter.onerror() pour effectuer la mise à jour l'état div.

Pour plus d'informations sur FileEntry, consultez la section Exploration des API FileSystem sur HTML5Rocks. reportez-vous à la FileEntry docs sur MDN.

Persistance des objets FileEntry

Avancé: les objets FileEntry ne peuvent pas être conservés indéfiniment. Votre application doit demander à l'utilisateur de choisir un fichier chaque fois que l'application est lancée. Si le redémarrage forcé de votre application est dû à un environnement d'exécution plantage ou mise à jour, restoreEntry() est une option permettant de restaurer un FileEntry.

Si vous le souhaitez, vous pouvez expérimenter en enregistrant l'ID renvoyé par retainEntry() et en le restaurant dans l'application. redémarrer. Indice: ajoutez un écouteur à l'événement onRestarted sur la page en arrière-plan.

Lancer l'application Todo terminée

Vous avez terminé l'étape 6. Actualisez votre application et ajoutez des tâches. Cliquez sur Exporter sur le disque pour exporter vos de tâches à un fichier .txt.

Application Todo avec les tâches exportées

Pour en savoir plus

Pour en savoir plus sur certaines des API présentées lors de cette étape, consultez les pages suivantes:

Prêt à passer à l'étape suivante ? Passez à l'étape 7 : Publier votre application »