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

Au cours de cette étape, vous allez découvrir:

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

Temps estimé pour terminer cette étape: 20 minutes.
Pour prévisualiser ce que vous allez réaliser au cours de cette étape, accédez au bas de cette page ↓.

Exporter les tâches

Cette étape permet d'ajouter un bouton d'exportation à l'application. Lorsque vous cliquez dessus, les tâches en cours sont enregistrées dans un fichier texte 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 l'accès en lecture seule ou d'un objet avec des propriétés supplémentaires. 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'autorisation {fileSystem: [ "write" ] }:

"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 sur 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 Export to disk et des bouchons pour getTodosAsText(), exportToFileEntry et doExportToDisk().

Afficher les tâches sous forme de texte

Mettez à jour getTodosAsText() afin qu'il puisse lire les tâches à partir de chrome.storage.local et en générer une représentation textuelle:

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 un fichier:

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 paramètre est une méthode de rappel.

Si un FileEntry est déjà enregistré, utilisez-le à la place lorsque vous appelez exportToFileEntry(). Les références de fichier existent pendant la durée de vie de l'objet représentant le FileEntry. Cet exemple associe FileEntry à la fenêtre de l'application afin que le code JavaScript puisse écrire dans le fichier sélectionné sans aucune interaction de l'utilisateur, tant que la fenêtre de l'application reste ouverte.

Utiliser FileEntry pour écrire des 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 à afficher qui renvoie à l'état div.

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

Pour en savoir plus sur FileEntry, consultez l'article Découvrir les API FileSystem sur HTML5Rocks ou reportez-vous à la FileEntry docs sur MDN.

Conserver les 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 qu'elle est lancée. Si le redémarrage forcé de votre application en raison d'un plantage ou d'une mise à jour lors de l'exécution, restoreEntry() est une option permettant de restaurer un FileEntry.

Si vous le souhaitez, enregistrez l'ID renvoyé par retainEntry() et restaurez-le au redémarrage de l'application. (Astuce: ajoutez un écouteur à l'événement onRestarted dans la page en arrière-plan.)

Lancer votre 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 tâches dans un fichier .txt.

Application Liste de tâches avec les tâches exportées

Pour en savoir plus

Pour plus d'informations sur certaines des API présentées à cette étape, reportez-vous à:

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