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

Au cours de cette étape, vous allez apprendre:

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

Durée estimée pour cette étape: 20 minutes.
Pour avoir un aperçu de ce que vous allez faire dans cette étape, descendez en bas de cette page ↓.

Exporter les tâches

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

Modifier les autorisations

Les autorisations du système de fichiers peuvent être demandées sous forme de chaîne pour un accès en lecture seule ou sous forme d'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 manifest.json, demandez l'autorisation {fileSystem: [ "write" ] }:

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

Mettre à jour l'affichage HTML

Dans index.html, ajoutez un bouton Exporter sur 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 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 clic sur le bouton Exporter vers le disque et des bouchons pour getTodosAsText(), exportToFileEntry et doExportToDisk().

Obtenir des tâches sous forme de texte

Mettez à jour getTodosAsText() pour qu'il lise les tâches à faire à partir de chrome.storage.local et génère une représentation textuelle de celles-ci:

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 fichiers existent pendant toute 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 utilisateur tant que la fenêtre de l'application reste ouverte.

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

Mettez à jour exportToFileEntry() pour enregistrer les tâches à faire au format 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 visible qui est renvoyé à 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. Utilisez fileWriter.onwriteend() et fileWriter.onerror() pour mettre à jour l'état div.

Pour en savoir plus sur FileEntry, consultez Exploring the FileSystem APIs (Explorer les API FileSystem) sur HTML5Rocks ou FileEntry docs sur MDN.

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

Si vous le souhaitez, testez en enregistrant l'ID renvoyé par retainEntry() et en le restaurant au redémarrage de l'application. (Conseil: Ajoutez un écouteur à l'événement onRestarted sur la page en arrière-plan.)

Lancer votre application de tâches terminée

Vous avez terminé l'étape 6. Rechargez votre application et ajoutez des tâches. Cliquez sur Exporter sur disque pour exporter vos tâches dans 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 dans cette étape, consultez les ressources suivantes:

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