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

W tym kroku poznasz:

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

Szacowany czas potrzebny na wykonanie tego kroku: 20 minut.
Aby zobaczyć, co wykonasz w tym kroku, przejdź na sam dół strony ↓.

Eksportuj zadania do wykonania

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

Aktualizuj uprawnienia

Uprawnienia do systemu plików mogą być wymagane w postaci ciągu znaków w przypadku dostępu tylko do odczytu lub obiektu 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"] } 
],

Aktualizacja widoku HTML

W witrynie index.html dodaj przycisk Eksportuj na dysk i div, gdzie 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>

Także w pliku index.html załaduj skrypt export.js:

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

Utwórz skrypt eksportu

Utwórz nowy plik JavaScript o nazwie export.js za pomocą 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 detektor kliknięć przycisku Eksportuj na dysk i jego krótkie kody w językach getTodosAsText(), exportToFileEntry i doExportToDisk().

Wyświetlaj zadania do wykonania w formie tekstu

Zaktualizuj atrybut getTodosAsText(), aby odczytywać czynności do wykonania z tego adresu (chrome.storage.local) i generować ich opis w formie tekstowej:

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() za pomocą chrome.fileSystem.chooseEntry(), aby użytkownik mógł wybrać plik:

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 chrome.fileSystem.chooseEntry() to obiekt opcji. Drugi parametr to metoda wywołania zwrotnego.

Jeśli masz już zapisany FileEntry, użyj go podczas połączenia z numerem exportToFileEntry(). Odwołania do plików istnieją przez cały okres istnienia obiektu reprezentującego obiekt FileEntry. W tym przykładzie interfejs FileEntry jest powiązany z oknem aplikacji, więc kod JavaScript może zapisywać w wybranym pliku bez żadnej interakcji użytkownika, dopóki okno aplikacji pozostaje otwarte.

Zapisywanie elementów zadań do wykonania na dysku za pomocą FileEntry

Zaktualizuj exportToFileEntry(), aby zapisywać zadania do wykonania 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() pobiera wyświetlaną ścieżkę pliku, która zwraca wynik do stanu div.

Użyj fileEntry.createWriter(), aby utworzyć obiekt FileWriter. fileWriter.write() może następnie zapisać Blob w systemie plików. Użyj fileWriter.onwriteend() i fileWriter.onerror(), aby zaktualizować stan div.

Aby dowiedzieć się więcej o funkcji FileEntry, przeczytaj artykuł Poznawanie interfejsów API FileSystem w HTML5Rocks lub zapoznaj się z artykułem FileEntry docs w MDN.

Utrwal obiekty FileEntry

Zaawansowane: FileEntry obiektów nie może być utrzymywanych w nieskończoność. Aplikacja musi prosić użytkownika o wybranie pliku przy każdym uruchomieniu. Jeśli ponowne uruchomienie aplikacji zostało wymuszone z powodu awarii lub aktualizacji środowiska wykonawczego, możesz użyć funkcji restoreEntry(), która umożliwia przywrócenie zasobu FileEntry.

Jeśli chcesz, możesz poeksperymentować, zapisując identyfikator zwrócony przez funkcję retainEntry() i przywracając go przy ponownym uruchomieniu aplikacji. (Wskazówka: dodaj odbiornik do zdarzenia onRestarted na stronie w tle).

Uruchamianie gotowej aplikacji Todo

Krok 6 został ukończony. Załaduj ponownie aplikację i dodaj kilka czynności do wykonania. Kliknij Eksportuj na dysk, aby wyeksportować zadania do pliku .txt.

Aplikacja Do zrobienia z wyeksportowanymi listami zadań

Więcej informacji

Szczegółowe informacje o niektórych interfejsach API wprowadzonych w tym kroku znajdziesz tutaj:

Chcesz przejść do następnego kroku? Przejdź do Kroku 7 – Opublikuj aplikację »