Passaggio 6: esporta le cose da fare nel file system

In questo passaggio, scoprirai:

  • 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 consente di aggiungere all'app un pulsante di esportazione. Se si fa clic, gli elementi dell'elenco di cose da fare correnti vengono salvati in un messaggio file selezionato dall'utente. Se il file esiste, 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 oppure come oggetto con altre proprietà. 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 il {fileSystem: [ "write" ] } autorizzazione:

"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().

Aggiungi gli elementi da fare come testo

Aggiorna getTodosAsText() in modo che legga le cose da fare da chrome.storage.local e generi un messaggio testuale rappresentazione di questi ultimi:

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 una 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 è un metodo di callback.

Se esiste già un FileEntry salvato, utilizzalo quando chiami il numero exportToFileEntry(). File esistono riferimenti per tutta la durata dell'oggetto che rappresenta FileEntry. Questo esempio collega FileEntry nella finestra dell'app in modo che il codice JavaScript possa scrivere nel file selezionato senza che nessun utente a un'interazione finché la finestra dell'app rimane aperta.

Usa FileEntry per scrivere le voci di cose da fare su disco

Aggiorna exportToFileEntry() per salvare le cose da fare 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 al file system. Usa fileWriter.onwriteend() e fileWriter.onerror() per aggiornare lo stato div.

Per maggiori informazioni su FileEntry, leggi l'articolo Esplorazione delle API FileSystem su HTML5Rocks oppure fai riferimento a FileEntry docs su MDN.

Rendere persistenti gli oggetti FileEntry

Avanzata: FileEntry oggetti non possono essere resi persistenti in modo permanente. La tua app deve chiedere all'utente scegliere un file a ogni avvio dell'app. Se la tua app è stata riavviata forzatamente a causa di un runtime un arresto anomalo o un aggiornamento, restoreEntry() è un'opzione per ripristinare un FileEntry.

Se vuoi, puoi provare a salvare l'ID restituito da retainEntry() e a ripristinarlo nell'app riavvia. Suggerimento: aggiungi un listener all'evento onRestarted nella pagina in background.

Lancia l'app delle cose da fare completata

Hai completato il passaggio 6. Ricarica l'app e aggiungi delle cose da fare. Fai clic su Esporta su disco per esportare in un file .txt.

L&#39;app Attività con i promemoria esportati

Per maggiori informazioni

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

Vuoi andare al passaggio successivo? Vai al Passaggio 7 - Pubblica l'app »