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 un'anteprima di ciò che dovrai completare in questo passaggio, vai in fondo a questa pagina ↓.

Esportare tutti

Questo passaggio aggiunge un pulsante di esportazione all'app. Quando viene fatto clic, gli elementi della lista di cose da fare correnti vengono salvati in un file di testo 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 in sola lettura o come 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 gestore degli eventi di clic sul pulsante Esporta su disco e stub per getTodosAsText(), exportToFileEntry e doExportToDisk().

Ricevere gli elementi della lista di cose da fare come testo

Aggiorna getTodosAsText() in modo che legga le attività da chrome.storage.local e generi una rappresentazione textuale:

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

Se è già presente un FileEntry salvato, utilizzalo quando chiami exportToFileEntry(). I riferimenti ai file esistono per tutta la durata dell'oggetto che rappresenta il FileEntry. Questo esempio lega FileEntry alla finestra dell'app in modo che il codice JavaScript possa scrivere nel file selezionato senza alcuna interazione dell'utente finché la finestra dell'app rimane aperta.

Utilizzare FileEntry per scrivere gli elementi della lista di cose da fare sul disco

Aggiorna exportToFileEntry() per salvare le attività 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() riceve un percorso file visualizzabile che viene visualizzato nello stato div.

Utilizza 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 saperne di più su FileEntry, leggi l'articolo Esplorazione delle API FileSystem su HTML5Rocks o consulta la pagina FileEntry docs su MDN.

Mantieni gli oggetti FileEntry

Avanzate: gli oggetti FileEntry non possono essere mantenuti indefinitamente. L'app deve chiedere all'utente di scegliere un file ogni volta che viene avviata. Se l'app è stata riavviata forzatamente a causa di un crash o di un aggiornamento in fase di esecuzione, restoreEntry() è un'opzione per ripristinare un FileEntry.

Se vuoi, esegui esperimenti salvando l'ID restituito da retainEntry() e ripristinandolo al riavvio dell'app. Suggerimento: aggiungi un listener all'evento onRestarted nella pagina in background.

Avvia l'app To Do completata

Hai completato il passaggio 6. Ricarica l'app e aggiungi alcune attività. Fai clic su Esporta su disco per esportare i metodi in un file .txt.

L&#39;app To Do con le attività esportate

Per ulteriori informazioni

Per informazioni più dettagliate su alcune delle API introdotte in questo passaggio, consulta:

Vuoi continuare con il passaggio successivo? Vai al Passaggio 7: pubblica la tua app »