Krok 6. Wyeksportuj zadania do wykonania do systemu plików

Z tego kroku dowiesz się:

  • Jak uzyskać odwołanie do pliku w zewnętrznym systemie plików.
  • Jak zapisywać dane w systemie plików.

Szacowany czas wykonania tego kroku: 20 minut
Aby wyświetlić podgląd tego, co wypełnisz na tym etapie, przewiń na dół strony ↓.

Eksportowanie wszystkich

Ten krok dodaje do aplikacji przycisk eksportowania. Po jego kliknięciu bieżące zadania są zapisywane w wybranym przez użytkownika pliku tekstowym. Jeśli plik istnieje, zostanie zastąpiony. W przeciwnym razie zostanie utworzony nowy plik.

Aktualizuj uprawnienia

Uprawnienia do systemu plików można poprosić jako ciąg znaków dla dostępu tylko do odczytu lub obiekt z dodatkowymi właściwościami. Na przykład:

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

Musisz mieć uprawnienia do odczytu i zapisu. W pliku manifest.json poproś o uprawnienie {fileSystem: [ "write" ] }:

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

Aktualizowanie widoku HTML

W pliku index.html dodaj przycisk Eksportuj na dysk i element div, w którym aplikacja wyświetla komunikat o stanie:

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

W pliku index.html wczytaj też skrypt export.js:

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

Tworzenie skryptu eksportu

Utwórz nowy plik JavaScript o nazwie export.js, używając poniższego kodu. Zapisz go w folderze js.

(function() {

  var dbName = 'todos-vanillajs';

  var savedFileEntry, fileDisplayPath;

  function getTodosAsText(callback) {
  }

  function exportToFileEntry(fileEntry) {
  }

  function doExportToDisk() {
  }

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

})();

Obecnie plik export.js zawiera tylko listenera kliknięcia przycisku Eksportuj na dysk oraz zaczepy dla getTodosAsText(), exportToFileEntry i doExportToDisk().

Pobieranie elementów listy zadań jako tekstu

Zaktualizuj funkcję getTodosAsText(), aby odczytywała zadania z poziomu chrome.storage.local i generowała ich tekstową reprezentację:

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

Wybierz plik

Zaktualizuj doExportToDisk() na chrome.fileSystem.chooseEntry(), aby umożliwić użytkownikowi wybranie pliku:

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

  }
}

Pierwszy parametr funkcji chrome.fileSystem.chooseEntry() to obiekt opcji. Drugi parametr to metoda wywołania zwrotnego.

Jeśli masz już zapisany numer FileEntry, użyj go zamiast numeru exportToFileEntry(). Odniesienia do plików istnieją przez cały czas istnienia obiektu reprezentującego FileEntry. W tym przykładzie funkcja FileEntry jest powiązana z oknem aplikacji, dzięki czemu kod JavaScript może zapisywać dane w wybranym pliku bez interakcji z użytkownikiem, o ile okno aplikacji pozostaje otwarte.

Pisanie elementów listy zadań na dysku za pomocą obiektu FileEntry

Zaktualizuj exportToFileEntry(), aby zapisać zadania jako tekst za pomocą interfejsu Web API 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() uzyskuje wyświetlalną ścieżkę pliku, która jest przekazywana do stanu div.

Utwórz obiekt FileWriter za pomocą aplikacji fileEntry.createWriter(). fileWriter.write() może następnie zapisać Blob w systemie plików. Aby zaktualizować stan div, użyj właściwości fileWriter.onwriteend() i fileWriter.onerror().

Więcej informacji o FileEntry znajdziesz w artykule Exploring the FileSystem APIs na stronie HTML5Rocks lub w artykule FileEntry docs na stronie MDN.

Zapisz obiekty FileEntry

Zaawansowane: obiektów FileEntry nie można przechowywać bezterminowo. Aplikacja musi prosić użytkownika o wybranie pliku za każdym razem, gdy jest uruchamiana. Jeśli aplikacja została przymusowo ponownie uruchomiona z powodu awarii lub aktualizacji w czasie wykonywania, możesz użyć funkcji restoreEntry(), aby przywrócić FileEntry.

Jeśli chcesz, możesz przetestować działanie tej funkcji, zapisując identyfikator zwrócony przez funkcję retainEntry() i przywracając go po ponownym uruchomieniu aplikacji. (Wskazówka: dodaj detektor do zdarzenia onRestarted na stronie w tle).

Uruchomienie gotowej aplikacji Todo

Krok 6 został ukończony. Załaduj ponownie aplikację i dodaj do niej zadania. Aby wyeksportować listę zadań do pliku .txt, kliknij Eksportuj na dysk.

Aplikacja Wszelkie z wyeksportowanymi zadaniami

Więcej informacji

Więcej informacji o niektórych interfejsach API opisanych na tym etapie znajdziesz w tych artykułach:

Czy chcesz przejść do następnego kroku? Przejdź do sekcji Krok 7. Opublikuj aplikację »