Etapa 6: exportar tudo para o sistema de arquivos

Nesta etapa, você vai aprender:

  • Como conseguir uma referência a um arquivo no sistema de arquivos externo.
  • Como gravar no sistema de arquivos.

Tempo estimado para concluir esta etapa: 20 minutos.
Para visualizar o que você concluirá nesta etapa, vá para a parte inferior desta página ↓.

Exportar tarefas

Esta etapa adiciona um botão de exportação ao app. Quando clicados, os itens de tarefas atuais são salvos em um texto arquivo selecionado pelo usuário. Se o arquivo existir, ele será substituído. Caso contrário, um novo arquivo será criado.

Atualizar permissões

As permissões do sistema de arquivos podem ser solicitadas como uma string para acesso somente leitura ou um objeto com propriedades adicionais. Exemplo:

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

Você precisa ter acesso de leitura e gravação. Em manifest.json, solicite o {fileSystem: [ "write" ] }. permissão:

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

Atualizar visualização HTML

Em index.html, adicione um botão Exportar para o disco e um div em que o app mostre uma mensagem de status:

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

Ainda em index.html, carregue o script export.js:

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

Criar script de exportação

Crie um novo arquivo JavaScript chamado export.js usando o código abaixo. Salve-o na pasta js.

(function() {

  var dbName = 'todos-vanillajs';

  var savedFileEntry, fileDisplayPath;

  function getTodosAsText(callback) {
  }

  function exportToFileEntry(fileEntry) {
  }

  function doExportToDisk() {
  }

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

})();

No momento, o arquivo export.js contém apenas um listener de clique no botão Exportar para o disco e stubs para getTodosAsText(), exportToFileEntry e doExportToDisk().

Receber itens de tarefas como texto

Atualize o getTodosAsText() para que ele leia todos os itens de chrome.storage.local e gere um representação delas:

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

Escolha um arquivo

Atualize doExportToDisk() com chrome.fileSystem.chooseEntry() para permitir que o usuário escolha uma arquivo:

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

  }
}

O primeiro parâmetro de chrome.fileSystem.chooseEntry() é um objeto de opções. A segunda é um método de callback.

Se já houver um FileEntry salvo, use-o ao chamar exportToFileEntry(). Arquivo as referências existem durante o ciclo de vida do objeto que representa o FileEntry. Este exemplo vincula FileEntry na janela do app para que o código JavaScript possa gravar no arquivo selecionado sem que nenhum usuário a interação desde que a janela do app permaneça aberta.

Usar FileEntry para gravar itens de todas as tarefas no disco

Atualize o exportToFileEntry() para salvar as tarefas como texto usando a API FileEntry Web:

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() recebe um caminho de arquivo que pode ser exibido e gera o status div.

Use fileEntry.createWriter() para criar um objeto FileWriter. fileWriter.write() poderá gravar um Blob ao sistema de arquivos. Use fileWriter.onwriteend() e fileWriter.onerror() para atualizar o status div.

Para mais informações sobre FileEntry, leia Conheça as APIs FileSystem no HTML5Rocks ou consulte FileEntry docs no MDN.

Manter objetos FileEntry

Avançado: os objetos FileEntry não podem ser mantidos indefinidamente. Seu app precisa pedir ao usuário escolha um arquivo sempre que o app for iniciado. Se o app foi forçado a reiniciar devido a um ambiente de execução falha ou atualização, restoreEntry() é uma opção para restaurar um FileEntry.

Se quiser, experimente salvar o ID retornado por retainEntry() e restaurá-lo no app reiniciar. Dica: adicione um listener ao evento onRestarted na página de segundo plano.

Iniciar o app Todo concluído

Você concluiu a Etapa 6! Atualize o app e adicione algumas tarefas. Clique em Exportar para o disco para exportar seu todos para um arquivo .txt.

O app Todo com todos os itens exportados

Mais informações

Para informações mais detalhadas sobre algumas das APIs introduzidas nesta etapa, consulte:

Tudo pronto para passar para a próxima etapa? Vá para a Etapa 7: publicar seu aplicativo »