Schritt 6: Aufgaben in das Dateisystem exportieren

In diesem Schritt erfahren Sie:

  • Hier erfahren Sie, wie Sie einen Verweis auf eine Datei im externen Dateisystem abrufen.
  • So schreiben Sie in das Dateisystem.

Geschätzte Dauer für diesen Schritt: 20 Minuten.
Um eine Vorschau zu sehen, was Sie in diesem Schritt tun werden, springen Sie zum Ende dieser Seite ↓.

Aufgaben exportieren

Dadurch wird der App eine Schaltfläche zum Exportieren hinzugefügt. Beim Anklicken werden die aktuellen Aufgaben als Text Datei, die der Nutzer ausgewählt hat. Wenn die Datei vorhanden ist, wird sie ersetzt. Andernfalls wird eine neue Datei erstellt.

Berechtigungen aktualisieren

Berechtigungen des Dateisystems können als String für Lesezugriff oder als Objekt mit zusätzliche Eigenschaften. 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. Fordern Sie in manifest.json das {fileSystem: [ "write" ] } an. Berechtigung:

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

HTML-Ansicht aktualisieren

Fügen Sie in der Datei index.html die Schaltfläche Auf Festplatte exportieren und eine div hinzu, in der die Anwendung 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 ebenfalls in index.html das Skript export.js:

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

Exportskript erstellen

Erstellen Sie mithilfe des folgenden Codes eine neue JavaScript-Datei mit dem Namen export.js. 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 Klick-Listener für die Schaltfläche Auf Festplatte exportieren und Stubs für getTodosAsText(), exportToFileEntry und doExportToDisk().

Aufgaben als Text abrufen

Aktualisieren Sie getTodosAsText() so, dass es Aufgaben von chrome.storage.local vorliest und eine Textnachricht Darstellung:

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

Aktualisieren Sie doExportToDisk() mit chrome.fileSystem.chooseEntry(), damit der Nutzer ein Datei:

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 Objekt mit Optionen. Die zweite ist eine Callback-Methode.

Wenn bereits eine gespeicherte FileEntry vorhanden ist, verwenden Sie stattdessen diese beim Aufrufen von exportToFileEntry(). Datei Referenzen existieren für die Lebensdauer des Objekts, das FileEntry darstellt. Dieses Beispiel verbindet FileEntry in das App-Fenster, damit der JavaScript-Code ohne Nutzer in die ausgewählte Datei schreiben kann solange das App-Fenster geöffnet ist.

Mit FileEntry Aufgaben auf Laufwerk schreiben

Aktualisieren Sie exportToFileEntry(), um die Aufgaben über die FileEntry Web API als Text zu speichern:

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() ruft einen anzeigbaren Dateipfad ab, der Informationen zum Status ausgibt div.

Verwenden Sie fileEntry.createWriter(), um ein FileWriter-Objekt zu erstellen. fileWriter.write() kann dann schreiben Ein Blob in das Dateisystem. Zum Aktualisieren fileWriter.onwriteend() und fileWriter.onerror() verwenden Status div

Weitere Informationen zu FileEntry finden Sie unter Discovery the FileSystem APIs auf HTML5Rocks oder Weitere Informationen findest du im FileEntry docs auf MDN.

FileEntry-Objekte beibehalten

Erweitert: FileEntry-Objekte können nicht auf unbestimmte Zeit beibehalten werden. Ihre App muss den Nutzer fragen, bei jedem Start der App eine Datei auswählen. Wenn der Neustart Ihrer App aufgrund einer Laufzeit erzwungen wurde restoreEntry() ist eine Option zum Wiederherstellen eines FileEntry.

Experimentieren Sie, indem Sie die von retainEntry() zurückgegebene ID speichern und in der App wiederherstellen. neu starten. Tipp: Fügen Sie dem onRestarted-Ereignis auf der Hintergrundseite einen Listener hinzu.

Fertige To-do-App starten

Sie haben Schritt 6 abgeschlossen. Aktualisieren Sie die App und fügen Sie einige Aufgaben hinzu. Klicken Sie auf Auf Datenträger exportieren, für eine TXT-Datei.

Die To-do-App mit exportierten Aufgaben

Weitere Informationen

Ausführlichere Informationen zu einigen der in diesem Schritt vorgestellten APIs finden Sie hier:

Sind Sie bereit für den nächsten Schritt? Gehen Sie zu Schritt 7: App veröffentlichen.