FileSystemFileHandle: createSyncAccessHandle() メソッド

createSyncAccessHandle()
createSyncAccessHandle(options)

onmessage = async (e) => {
  // メインスクリプトから送られた処理対象のメッセージを取得する
  const message = e.data;

  // draft ファイルへのハンドルを取得する
  const root = await navigator.storage.getDirectory();
  const draftHandle = await root.getFileHandle("draft.txt", { create: true });
  // 同期式アクセスハンドルを取得する
  const accessHandle = await draftHandle.createSyncAccessHandle();

  // …

  // 完了したら、常に FileSystemSyncAccessHandle を閉じる
  accessHandle.close();
};

<ol>
  <li>
    <label for="file-text">ファイルに書き込むテキストを入力してください:</label>
    <input type="text" id="file-text" name="file-text" />
  </li>
  <li>
    テキストをファイルへ書き込む: <button class="write">テキストを書き込む</button>
  </li>
  <li>
    ファイルがいっぱいになったら、中身を空にする:
    <button class="empty">ファイルを空にする</button>
  </li>
</ol>

const writeBtn = document.querySelector(".write");
const emptyBtn = document.querySelector(".empty");
const fileText = document.querySelector("#file-text");

const opfsWorker = new Worker("worker.js");

function writeToOPFS() {
  opfsWorker.postMessage({
    command: "write",
    content: fileText.value,
  });
  console.log("メインスクリプト: テキストがワーカーへ渡されました");
  fileText.value = "";
}

function emptyOPFS() {
  opfsWorker.postMessage({
    command: "empty",
  });
}

writeBtn.addEventListener("click", writeToOPFS);
emptyBtn.addEventListener("click", emptyOPFS);

let accessHandle;

async function initOPFS() {
  const opfsRoot = await navigator.storage.getDirectory();
  const fileHandle = await opfsRoot.getFileHandle("file.txt", { create: true });
  accessHandle = await fileHandle.createSyncAccessHandle({
    mode: "readwrite-unsafe",
  });
}

initOPFS();

onmessage = function (e) {
  console.log("ワーカー: メッセージをメインスクリプトから取得");

  // ファイルの現在のサイズを取得
  let size = accessHandle.getSize();

  if (e.data.command === "empty") {
    // ファイルを 0 バイトに切り詰める
    accessHandle.truncate(0);

    // ファイルの現在のサイズを取得
    size = accessHandle.getSize();
  } else {
    const textEncoder = new TextEncoder();
    const textDecoder = new TextDecoder();

    // ファイルに書き込むコンテンツをエンコード
    const content = textEncoder.encode(e.data.content);
    // ファイルの末尾にコンテンツを書き込む
    accessHandle.write(content, { at: size });

    // ファイルの現在のサイズを取得
    size = accessHandle.getSize();

    // ファイルの長さを示すデータビューを準備
    const dataView = new DataView(new ArrayBuffer(size));

    // ファイル全体をデータビューに取り込む
    accessHandle.read(dataView, { at: 0 });

    // 現在のファイルの内容をコンソールにログ出力
    console.log(`File contents: ${textDecoder.decode(dataView)}`);

    // 変更を反映
    accessHandle.flush();
  }

  // ファイルサイズをコンソールにログ出力
  console.log(`Size: ${size}`);
};