Schritt 6: Aufgaben in das Dateisystem exportieren

In diesem Schritt erfahren Sie Folgendes:

  • So rufen Sie einen Verweis auf eine Datei im externen Dateisystem ab.
  • In das Dateisystem schreiben

Geschätzte Dauer für diesen Schritt: 20 Minuten
Eine Vorschau dessen, was Sie in diesem Schritt tun, finden Sie unten auf dieser Seite ↓.

Aufgaben exportieren

In diesem Schritt wird der App eine Exportschaltfläche hinzugefügt. Wenn darauf geklickt wird, werden die aktuellen To-do-Elemente in einer vom Nutzer ausgewählten Textdatei gespeichert. Wenn die Datei vorhanden ist, wird sie ersetzt. Andernfalls wird eine neue Datei erstellt.

Berechtigungen aktualisieren

Dateisystemberechtigungen können als String für den schreibgeschützten Zugriff oder als Objekt mit zusätzlichen Properties angefordert werden. Beispiel:

// 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"]}]

Sie benötigen Lese- und Schreibzugriff. Fordere in manifest.json die Berechtigung {fileSystem: [ "write" ] } an:

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

HTML-Ansicht aktualisieren

Fügen Sie in index.html die Schaltfläche Auf Festplatte exportieren und ein div hinzu, in dem die App eine Statusmeldung anzeigt:

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

Laden Sie in index.html auch das Script export.js:

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

Exportskript erstellen

Erstellen Sie eine neue JavaScript-Datei mit dem Namen export.js und fügen Sie den folgenden Code ein. Speichern Sie sie im Ordner js.

(function() {

  var dbName = 'todos-vanillajs';

  var savedFileEntry, fileDisplayPath;

  function getTodosAsText(callback) {
  }

  function exportToFileEntry(fileEntry) {
  }

  function doExportToDisk() {
  }

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

})();

Derzeit enthält export.js nur einen Klicklistener für die Schaltfläche Auf Festplatte exportieren und Stubs für getTodosAsText(), exportToFileEntry und doExportToDisk().

To-do-Elemente als Text abrufen

Aktualisieren Sie getTodosAsText() so, dass es Aufgaben aus chrome.storage.local liest und eine textuelle Darstellung davon generiert:

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));
}

Datei auswählen

Ersetzen Sie doExportToDisk() durch chrome.fileSystem.chooseEntry(), damit der Nutzer eine Datei auswählen kann:

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);

  }
}

Der erste Parameter von chrome.fileSystem.chooseEntry() ist ein Optionsobjekt. Der zweite Parameter ist eine Callback-Methode.

Wenn bereits eine FileEntry gespeichert ist, verwenden Sie diese stattdessen, wenn Sie exportToFileEntry() aufrufen. Dateireferenzen existieren für die gesamte Lebensdauer des Objekts, das die FileEntry darstellt. In diesem Beispiel wird FileEntry mit dem App-Fenster verknüpft, damit der JavaScript-Code ohne Nutzerinteraktion in die ausgewählte Datei schreiben kann, solange das App-Fenster geöffnet bleibt.

Mit FileEntry Aufgaben auf die Festplatte schreiben

Aktualisieren Sie exportToFileEntry(), damit die To-do-Listen als Text über die FileEntry Web API gespeichert werden:

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() erhält einen darstellbaren Dateipfad, der als Status div ausgegeben wird.

Verwenden Sie fileEntry.createWriter(), um ein FileWriter-Objekt zu erstellen. fileWriter.write() kann dann einen Blob in das Dateisystem schreiben. Verwende fileWriter.onwriteend() und fileWriter.onerror(), um den Status div zu aktualisieren.

Weitere Informationen zu FileEntry finden Sie unter Exploring the FileSystem APIs auf HTML5Rocks oder unter FileEntry docs auf MDN.

FileEntry-Objekte persistent speichern

Erweitert: FileEntry-Objekte können nicht unbegrenzt gespeichert werden. Ihre App muss den Nutzer jedes Mal, wenn die App gestartet wird, auffordern, eine Datei auszuwählen. Wenn Ihre App aufgrund eines Laufzeitabsturzes oder Updates neu gestartet werden musste, können Sie mit restoreEntry() eine FileEntry wiederherstellen.

Sie können die von retainEntry() zurückgegebene ID speichern und beim Neustart der App wiederherstellen. Hinweis: Fügen Sie der Hintergrundseite einen Listener für das Ereignis onRestarted hinzu.

Fertige To-do-App starten

Schritt 6 ist abgeschlossen. Laden Sie die App neu und fügen Sie einige Aufgaben hinzu. Klicken Sie auf Auf Datenträger exportieren, um Ihre To-do-Listen in eine TXT-Datei zu exportieren.

Die To-do-App mit exportierten Aufgaben

Weitere Informationen

Weitere Informationen zu einigen der in diesem Schritt vorgestellten APIs finden Sie unter:

Sind Sie bereit, mit dem nächsten Schritt fortzufahren? Schritt 7 – App veröffentlichen