6단계: 파일 시스템으로 할 일 내보내기

이 단계에서는 다음을 알아봅니다.

  • 외부 파일 시스템에서 파일 참조를 가져오는 방법
  • 파일 시스템에 쓰는 방법

이 단계를 완료하는 데 걸리는 예상 시간: 20분
이 단계에서 완료할 내용을 미리 보려면 이 페이지 하단으로 이동 ↓하세요.

할 일 내보내기

이 단계에서는 앱에 내보내기 버튼을 추가합니다. 이 버튼을 클릭하면 현재 할 일 항목이 사용자가 선택한 텍스트 파일에 저장됩니다. 파일이 존재하는 경우 대체됩니다. 그렇지 않으면 새 파일이 생성됩니다.

권한 업데이트

파일 시스템 권한은 읽기 전용 액세스의 경우 문자열로 요청하거나 추가 속성이 있는 객체로 요청할 수 있습니다. 예를 들면 다음과 같습니다.

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

읽기 및 쓰기 액세스 권한이 필요합니다. manifest.json에서 {fileSystem: [ "write" ] } 권한을 요청합니다.

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

HTML 보기 업데이트

index.html에서 디스크로 내보내기 버튼과 앱에서 상태 메시지를 표시하는 div를 추가합니다.

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

또한 index.html에서 export.js 스크립트를 로드합니다.

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

내보내기 스크립트 만들기

아래 코드를 사용하여 export.js라는 새 JavaScript 파일을 만듭니다. js 폴더에 저장합니다.

(function() {

  var dbName = 'todos-vanillajs';

  var savedFileEntry, fileDisplayPath;

  function getTodosAsText(callback) {
  }

  function exportToFileEntry(fileEntry) {
  }

  function doExportToDisk() {
  }

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

})();

현재 export.js에는 디스크에 내보내기 버튼의 클릭 리스너와 getTodosAsText(), exportToFileEntry, doExportToDisk()의 스텁만 포함되어 있습니다.

할 일 항목을 텍스트로 가져오기

getTodosAsText()가 chrome.storage.local에서 할 일을 읽고 텍스트 표현을 생성하도록 업데이트합니다.

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

파일 선택

사용자가 파일을 선택할 수 있도록 doExportToDisk()를 chrome.fileSystem.chooseEntry()로 업데이트합니다.

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

  }
}

chrome.fileSystem.chooseEntry()의 첫 번째 매개변수는 옵션 객체입니다. 두 번째 매개변수는 콜백 메서드입니다.

이미 저장된 FileEntry가 있는 경우 exportToFileEntry()를 호출할 때 이를 대신 사용합니다. 파일 참조는 FileEntry를 나타내는 객체의 전체 기간 동안 존재합니다. 이 예에서는 FileEntry를 앱 창에 연결하여 JavaScript 코드가 앱 창이 열려 있는 동안 사용자 상호작용 없이 선택한 파일에 쓸 수 있도록 합니다.

FileEntry를 사용하여 할 일 항목을 디스크에 작성

FileEntry Web API를 통해 할 일을 텍스트로 저장하도록 exportToFileEntry()를 업데이트합니다.

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()는 div 상태로 출력되는 표시 가능한 파일 경로를 가져옵니다.

fileEntry.createWriter()를 사용하여 FileWriter 객체를 만듭니다. 그러면 fileWriter.write()가 Blob을 파일 시스템에 쓸 수 있습니다. fileWriter.onwriteend() 및 fileWriter.onerror()를 사용하여 상태 div를 업데이트합니다.

FileEntry에 관한 자세한 내용은 HTML5Rocks의 FileSystem API 살펴보기를 참고하거나 MDN의 FileEntry docs를 참고하세요.

FileEntry 객체 유지

고급: FileEntry 객체는 무기한 유지할 수 없습니다. 앱이 실행될 때마다 사용자에게 파일을 선택하도록 요청해야 합니다. 런타임 비정상 종료 또는 업데이트로 인해 앱이 강제로 다시 시작된 경우 restoreEntry()는 FileEntry를 복원하는 옵션입니다.

원하는 경우 retainEntry()에서 반환된 ID를 저장하고 앱을 다시 시작할 때 복원하여 실험해 보세요. (힌트: 백그라운드 페이지의 onRestarted 이벤트에 리스너를 추가합니다.)

완성된 할 일 앱 실행

6단계가 완료되었습니다. 앱을 새로고침하고 할 일을 추가합니다. 디스크로 내보내기를 클릭하여 할 일을 .txt 파일로 내보냅니다.

내보낸 할 일 목록이 있는 할 일 앱

추가 정보

이 단계에서 소개된 일부 API에 관한 자세한 내용은 다음을 참고하세요.

다음 단계로 진행할 준비가 되셨나요? 7단계 - 앱 게시 »로 이동합니다.