‏OPFS؛ فایل‌سیستم خصوصی مرورگر برای نوشتن‌های سریع

تو مستندات MDN اومده که OPFS (مخفف origin private file system، یعنی یه فضای فایل که فقط مال دامنهٔ خود صفحه‌ست) بخشی از File System API هست. فرقش با فایل‌های معمولی اینه که کاربر اصلاً نمی‌بینتش و انتظار هم نداشته باش فایل‌هایی که می‌سازی یکی‌به‌یک روی دیسک پیدا بشن. در عوض دسترسی بایت‌به‌بایت و نوشتن درجا روی محتوا می‌ده.

مشکلی که حل می‌کنه سرعته. تو مسیر معمولی یعنی File System Access API، کاربر با showOpenFilePicker() فایل رو انتخاب می‌کنه، تغییرات اول تو یه فایل موقت نوشته می‌شه و تازه بعد از رد شدن از چک‌های امنیتی مثل safe browsing کروم روی فایل اصلی می‌شینه. برای ویرایش‌های کوچیک متنی اصلاً حس نمی‌شه، ولی وقتی پای تغییرات بزرگ مثل یه دیتابیس SQLite وسط باشه، همین مسیر کند می‌شه.

OPFS چون خصوصیه، نه پرمیشن می‌خواد نه اون چک‌های امنیتی، برای همین سریع‌تره. ولی مثل هر جای دیگهٔ ذخیره‌سازی مرورگر زیر سقف quota هست و با navigator.storage.estimate() می‌تونی ببینی چقدر جا گرفته. پاک کردن دیتای سایت هم کل OPFS رو می‌بره. ریشه‌ش رو با navigator.storage.getDirectory() می‌گیری که یه FileSystemDirectoryHandle بهت می‌ده.

از روی ترد اصلی همه‌چی async و Promise-محوره: با getFileHandle() و getDirectoryHandle() فایل و پوشه می‌سازی (با { create: true })، با createWritable() می‌نویسی و با removeEntry() یا remove() پاک می‌کنی. خود دایرکتوری‌هندل async iterator هم هست، پس می‌تونی با for await...of محتواشو بگردی.

نکتهٔ اصلی برای کارهای سنگین اینه که داخل وب‌ورکر نسخهٔ هم‌زمان هم داری. createSyncAccessHandle() بهت یه FileSystemSyncAccessHandle می‌ده که متدهاش مثل read() و write() و truncate() و flush() هم‌زمان اجرا می‌شن و درگیر Promise نیستن، یعنی سریع‌تر. چون تو ورکری، ترد اصلی هم بلاک نمی‌شه.

const opfsRoot = await navigator.storage.getDirectory();
const fileHandle = await opfsRoot.getFileHandle("my-high-speed-file.txt", {
  create: true,
});
const syncAccessHandle = await fileHandle.createSyncAccessHandle();

نکات کلیدی:

• OPFS از مارس ۲۰۲۳ تو مرورگرهای اصلی در دسترسه و فقط تو secure context یعنی HTTPS کار می‌کنه.
• دسترسی به ریشه‌ش فقط از راه navigator.storage.getDirectory() هست.
• متدهای هم‌زمان فقط داخل Web Worker اجرا می‌شن؛ خود createSyncAccessHandle() با اینکه اسمش Sync داره، async هست.
• زیر سقف quota مرورگره و با پاک کردن دیتای سایت کامل حذف می‌شه.
• مورد استفادهٔ شاخصش دیتابیس‌هایی مثل SQLite روی WASM هست که نوشتن سنگین و پشت‌سرهم دارن.