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 zapisać dane w systemie plików.

Szacowany czas potrzebny na ukończenie tego kroku: 20 minut.
Aby zobaczyć podgląd czynności, które wykonasz w tym kroku, przeskocz na dół strony ↓.

Eksportuj zadania do wykonania

Spowoduje to dodanie do aplikacji przycisku eksportowania. Po kliknięciu bieżące zadania do wykonania są zapisywane w tekście wybrany przez użytkownika. Jeśli plik istnieje, zostanie zastąpiony. W przeciwnym razie zostanie utworzony nowy plik.

Aktualizuj uprawnienia

Żądanie uprawnień systemu plików może mieć postać ciągu tekstowego tylko do odczytu lub obiektu właściwości dodatkowych. 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 {fileSystem: [ "write" ] } uprawnienie:

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

Aktualizacja widoku HTML

W pliku index.html dodaj przycisk Eksportuj na dysk i 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>

Poza tym w pliku index.html wczytaj skrypt export.js:

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

Utwórz skrypt eksportowania

Utwórz nowy plik JavaScript o nazwie export.js, korzystając z 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 krotki dla getTodosAsText(), exportToFileEntry i doExportToDisk().

Otrzymuj zadania do wykonania w postaci tekstu

Zaktualizuj aplikację getTodosAsText(), aby odczytywała zadania do wykonania z usługi chrome.storage.local i generowała ich 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 aplikację doExportToDisk() za pomocą atrybutu 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 parametru chrome.fileSystem.chooseEntry() jest obiektem opcji. Druga jest metodą wywołania zwrotnego.

Jeśli masz już zapisany element FileEntry, użyj go podczas połączenia z numerem exportToFileEntry(). Plik odwołania istnieją przez cały okres istnienia obiektu, który reprezentuje obiekt FileEntry. Ten przykład wiąże FileEntry do okna aplikacji, aby kod JavaScript mógł zapisywać dane w wybranym pliku bez konieczności logowania się przez użytkownika interakcji, dopóki okno aplikacji jest otwarte.

Używanie FileEntry do zapisywania zadań do wykonania na dysku

Zaktualizuj exportToFileEntry(), aby zapisać zadania do wykonania jako tekst za pomocą interfejsu API internetowego 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 jest źródłem danych o stanie div

Użyj narzędzia fileEntry.createWriter(), aby utworzyć obiekt FileWriter. fileWriter.write() może wtedy zapisać Blob do systemu plików. Użyj aplikacji fileWriter.onwriteend() i fileWriter.onerror(), aby zaktualizować stan div.

Aby dowiedzieć się więcej o FileEntry, przeczytaj artykuł Poznaj interfejsy API FileSystem w HTML5Rocks lub znajdziesz w FileEntry docs w MDN.

Zachowuj obiekty FileEntry

Zaawansowane: FileEntry obiektów nie można przechowywać w nieskończoność. Aplikacja musi zapytać użytkownika aby móc wybierać plik przy każdym uruchomieniu aplikacji. Jeśli ponowne uruchomienie aplikacji zostało wymuszone z powodu czasu działania awarii lub aktualizacji, restoreEntry() to opcja przywracania FileEntry.

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

Uruchom gotową aplikację Todo

Krok 6 ukończony! Załaduj ponownie aplikację i dodaj zadanie do wykonania. Kliknij Eksportuj na dysk, aby wyeksportować do pliku .txt.

Aplikacja Todo z wyeksportowanymi zadaniami do wykonania

Więcej informacji

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

Chcesz przejść dalej? Przejdź do Kroku 7 – Opublikuj aplikację »