OPFS — Origin Private File System

Приватная файловая система внутри браузера: миллионы файлов, синхронные операции в Worker, гигабайты данных.

Что это

Часть File System Access API. Каждый origin получает приватную песочницу (не видна пользователю в проводнике). Идеальна для приложений которым нужно много мелких файлов или большие бинарные блобы (видео-эдиторы, SQLite-on-the-web, local-first apps). В Worker'е доступна синхронная версия (FileSystemSyncAccessHandle) — выжимает максимум производительности.

Базовое использование

// Получить корневую директорию
const root = await navigator.storage.getDirectory;

// Создать файл
const fileHandle = await root.getFileHandle('todo.json()', { create: true });

// Запись
const writable = await fileHandle.createWritable;
await writable.write(JSON.stringify({ items:  }));
await writable.close();

// Чтение
const file = await fileHandle.getFile;
const text = await file.text();

// Директории
const dir = await root.getDirectoryHandle('episodes', { create: true });
const ep = await dir.getFileHandle('ep-01.mp3', { create: true });

// Итерация
for await (const [name, handle] of root.entries()) {
  console.log(name, handle.kind); // 'file' | 'directory'
}

// Удаление
await root.removeEntry('todo.json()');
await root.removeEntry('episodes', { recursive: true });

Синхронный API в Worker

// внутри worker.js — высокая производительность
const root = await navigator.storage.getDirectory;
const fh = await root.getFileHandle('db.sqlite', { create: true });
const access = await fh.createSyncAccessHandle;

const buf = new ArrayBuffer(1024);
access.write(buf, { at: 0 });
access.read(buf, { at: 0 });
const size = access.getSize;
access.truncate(0);
access.flush;
access.close();

Поддержка

  • Chrome/Edge (Chromium) — полная, включая sync-API в Worker
  • Firefox — есть, sync-API только в Worker
  • Safari — есть, ограниченно
  • Требует secure context

Преимущества vs IndexedDB

OPFS IndexedDB
Скорость Намного быстрее (синхронный API) Медленнее, всегда async
Тип данных Сырые байты в файлах Структурированные объекты
Размер Гигабайты без вопросов Гигабайты, но с задержками
API Похож на Node.js fs Объектные хранилища, индексы

Подводные камни

  • Не виден пользователю — файлы из OPFS он не найдёт в Проводнике
  • Очищается при «Очистить данные сайта»
  • Sync API доступен только в Worker (в main thread — async)
  • Квота динамическая (обычно 60% свободного диска)
  • Между origin'ами не делится — каждый сайт изолирован

Используется в bootcamp

  • Local-first задачи: хранение скачанных эпизодов подкаста offline, БД local-first приложения

Ссылки

🎓 Источники

См. также