Stap 6: Exporteer Todos naar het bestandssysteem

In deze stap leer je:

  • Hoe u een verwijzing naar een bestand in het externe bestandssysteem kunt krijgen.
  • Hoe naar het bestandssysteem te schrijven.

Geschatte tijd om deze stap te voltooien: 20 minuten.
Om een ​​voorbeeld te zien van wat u in deze stap gaat voltooien, springt u naar de onderkant van deze pagina ↓ .

Exporteer taken

Met deze stap wordt een exportknop aan de app toegevoegd. Wanneer erop wordt geklikt, worden de huidige taken opgeslagen in een door de gebruiker geselecteerd tekstbestand. Als het bestand bestaat, wordt het vervangen. Anders wordt er een nieuw bestand gemaakt.

Machtigingen bijwerken

Bestandssysteemmachtigingen kunnen worden aangevraagd als een tekenreeks voor alleen-lezen toegang, of als een object met aanvullende eigenschappen. Bijvoorbeeld:

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

U hebt lees- en schrijftoegang nodig. Vraag in manifest.json de machtiging {fileSystem: [ "write" ] } aan: 

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

HTML-weergave bijwerken

Voeg in index.html een knop Exporteren naar schijf toe en een div waarin de app een statusbericht toont:

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

Laad ook in index.html het export.js -script: 

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

Exportscript maken

Maak een nieuw JavaScript-bestand met de naam export.js met behulp van de onderstaande code. Sla het op in de js- map.

(function() {

  var dbName = 'todos-vanillajs';

  var savedFileEntry, fileDisplayPath;

  function getTodosAsText(callback) {
  }

  function exportToFileEntry(fileEntry) {
  }

  function doExportToDisk() {
  }

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

})();

Op dit moment bevat export.js alleen een kliklistener op de knop Exporteren naar schijf en stubs voor getTodosAsText() , exportToFileEntry en doExportToDisk() .

Ontvang taken als tekst

Update getTodosAsText() zodat het de taken van chrome.storage.local leest en er een tekstuele weergave van genereert: 

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

Kies een bestand

Update doExportToDisk() met chrome.fileSystem.chooseEntry() zodat de gebruiker een bestand kan kiezen:

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

  }
}

De eerste parameter van chrome.fileSystem.chooseEntry() is een object met opties. De tweede parameter is een callback-methode.

Als er al een opgeslagen FileEntry is, gebruik die dan bij het aanroepen van exportToFileEntry() . Bestandsreferenties bestaan ​​gedurende de levensduur van het object dat de FileEntry vertegenwoordigt. In dit voorbeeld wordt FileEntry aan het app-venster gekoppeld, zodat de JavaScript-code zonder enige gebruikersinteractie naar het geselecteerde bestand kan schrijven, zolang het app-venster open blijft.

Gebruik FileEntry om takenitems naar schijf te schrijven

Update exportToFileEntry() om de taken als tekst op te slaan via de FileEntry Web API:

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() haalt een weer te geven bestandspad op dat wordt uitgevoerd naar de status div .

Gebruik fileEntry.createWriter() om een FileWriter object te maken. fileWriter.write() kan vervolgens een Blob naar het bestandssysteem schrijven. Gebruik fileWriter.onwriteend() en fileWriter.onerror() om de div bij te werken.

Voor meer informatie over FileEntry leest u Exploring the FileSystem APIs on HTML5Rocks, of raadpleegt u de FileEntry docs op MDN.

Persist FileEntry-objecten

Geavanceerd : FileEntry objecten kunnen niet voor onbepaalde tijd worden bewaard. Elke keer dat de app wordt gestart, moet uw app de gebruiker vragen een bestand te kiezen. Als uw app opnieuw moest worden opgestart vanwege een runtime-crash of -update, is herstelEntry() een optie om een FileEntry te herstellen.

Als u wilt, kunt u experimenteren door de ID op te slaan die wordt geretourneerd door retainEntry() en deze te herstellen wanneer de app opnieuw wordt opgestart. (Tip: voeg een luisteraar toe aan de onRestarted -gebeurtenis op de achtergrondpagina.)

Start uw voltooide Todo-app

Je bent klaar Stap 6! Laad uw app opnieuw en voeg enkele taken toe. Klik op Exporteren naar schijf om uw taken naar een .txt-bestand te exporteren.

De Todo-app met geëxporteerde taken

Voor meer informatie

Voor meer gedetailleerde informatie over enkele van de API's die in deze stap zijn geïntroduceerd, raadpleegt u:

Klaar om door te gaan naar de volgende stap? Ga naar Stap 7 - Publiceer uw app »