Passaggio 6: esporta le cose da fare nel file system

In questo passaggio, imparerai:

  • Come ottenere un riferimento a un file nel file system esterno.
  • Come scrivere nel file system.

Tempo stimato per completare questo passaggio: 20 minuti.
Per visualizzare l'anteprima di ciò che completerai in questo passaggio, vai alla fine di questa pagina ↓.

Esporta promemoria

Questo passaggio aggiunge un pulsante di esportazione all'app. Se selezionato, gli elementi di promemoria correnti vengono salvati in un file di testo selezionato dall'utente. Se il file esiste già, viene sostituito. In caso contrario, viene creato un nuovo file.

Aggiorna autorizzazioni

Le autorizzazioni del file system possono essere richieste come stringa per l'accesso di sola lettura o come un oggetto con proprietà aggiuntive. Ad esempio:

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

Devi disporre dell'accesso in lettura e scrittura. In manifest.json, richiedi l'autorizzazione {fileSystem: [ "write" ] }:

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

Aggiorna visualizzazione HTML

In index.html, aggiungi un pulsante Esporta su disco e un div, in cui l'app mostra un messaggio di stato:

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

Sempre in index.html, carica lo script export.js:

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

Crea script di esportazione

Crea un nuovo file JavaScript denominato export.js utilizzando il codice riportato di seguito. Salvalo nella cartella js.

(function() {

  var dbName = 'todos-vanillajs';

  var savedFileEntry, fileDisplayPath;

  function getTodosAsText(callback) {
  }

  function exportToFileEntry(fileEntry) {
  }

  function doExportToDisk() {
  }

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

})();

Al momento, export.js contiene solo un listener di clic sul pulsante Esporta su disco e stub per getTodosAsText(), exportToFileEntry e doExportToDisk().

Recupera elementi di promemoria sotto forma di testo

Aggiorna getTodosAsText() in modo che legga le cose da fare da chrome.storage.local e generi una rappresentazione testuale di queste attività:

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

Scegli un file

Aggiorna doExportToDisk() con chrome.fileSystem.chooseEntry() per consentire all'utente di scegliere un file:

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

  }
}

Il primo parametro di chrome.fileSystem.chooseEntry() è un oggetto di opzioni. Il secondo parametro è il metodo di callback.

Se esiste già un FileEntry salvato, utilizzalo quando chiami exportToFileEntry(). Esistono riferimenti al file per la durata dell'oggetto che rappresenta FileEntry. Questo esempio collega FileEntry alla finestra dell'app in modo che il codice JavaScript possa scrivere nel file selezionato senza alcuna interazione dell'utente, purché la finestra dell'app rimanga aperta.

Utilizza FileEntry per scrivere elementi di promemoria su disco

Aggiorna exportToFileEntry() per salvare i promemoria come testo tramite l'API web 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() ottiene un percorso file visualizzabile che restituisce lo stato div.

Usa fileEntry.createWriter() per creare un oggetto FileWriter. fileWriter.write() può quindi scrivere un BLOB nel file system. Utilizza fileWriter.onwriteend() e fileWriter.onerror() per aggiornare lo stato div.

Per ulteriori informazioni su FileEntry, consulta Esplorazione delle API FileSystem su HTML5Rocks o consulta la FileEntry docs su MDN.

Mantieni oggetti FileEntry

Avanzata: gli oggetti FileEntry non possono essere salvati in modo permanente a tempo indeterminato. L'app deve chiedere all'utente di scegliere un file a ogni avvio. Se il riavvio dell'app è stato forzato a causa di un arresto anomalo o di un aggiornamento del runtime, restoreEntry() è un'opzione per ripristinare FileEntry.

Se vuoi, puoi fare delle prove salvando l'ID restituito da retainEntry() e ripristinandolo al riavvio dell'app. Suggerimento: aggiungi un listener per l'evento onRestarted nella pagina in background.

Avvia l'app Attività completata

Fatto! Passaggio 6. Ricarica l'app e aggiungi alcuni promemoria. Fai clic su Esporta su disco per esportare i promemoria in un file .txt.

L&#39;app Attività con gli impegni esportati

Per maggiori informazioni

Per informazioni più dettagliate su alcune delle API introdotte in questo passaggio, fai riferimento a:

Vuoi continuare con il passaggio successivo? Vai al Passaggio 7: pubblica l'app »