Initial OPFS docs.

client-sdk-references/javascript-web.mdx

@@ -307,6 +307,101 @@ powerSync.connect(connector)
 powerSync.connect(connector, { connectionMethod: SyncStreamConnectionMethod.HTTP });
 ```
 
+### Configuring Different SQLite Virtual Filesystems for Web
+The default SQLite VFS (`IDBBatchAtomicVFS`) can be replaced by supported [OPFS](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API/Origin_private_file_system) alternatives.
+`IDBBatchAtomicVFS` uses `IndexedDB` as the underlying storage which may have worse performance and stability issues with browsers such as Safari when compared with `OPFS` based VFSs.
+See the [WA-SQLite README](https://github.com/powersync-ja/wa-sqlite/blob/1bb58d3619b96a2708e0320e1c22d0f2b9db35c6/src/examples/README.md#L28) for more details on each option.
+
+`OPFS` can be configured with a `WASQLiteOpenFactory`.
+
+<CodeGroup>
+```js OPFSCoopSyncVFS (Safari Multiple Tabs Support)
+import { PowerSyncDatabase, WASQLiteOpenFactory, WASQLiteVFS } from '@powersync/web';
+
+export const db = new PowerSyncDatabase({
+  schema: AppSchema,
+  database: new WASQLiteOpenFactory({
+    dbFilename: 'exampleVFS.db',
+    vfs: WASQLiteVFS.OPFSCoopSyncVFS,
+    flags: {
+      enableMultiTabs: typeof SharedWorker !== 'undefined'
+    } 
+  }),
+  flags: {
+    enableMultiTabs: typeof SharedWorker !== 'undefined'
+  }
+});
+```
+
+```js AccessHandlePoolVFS
+import { PowerSyncDatabase, WASQLiteOpenFactory, WASQLiteVFS } from '@powersync/web';
+
+export const db = new PowerSyncDatabase({
+  schema: AppSchema,
+  database: new WASQLiteOpenFactory({
+    dbFilename: 'exampleVFS.db',
+    vfs: WASQLiteVFS.AccessHandlePoolVFS,
+    flags: {
+      enableMultiTabs: typeof SharedWorker !== 'undefined'
+    } 
+  }),
+  flags: {
+    enableMultiTabs: typeof SharedWorker !== 'undefined'
+  }
+});
+```
+</CodeGroup>
+
+**Note**: The `AccessHandlePoolVFS` does not to work correctly in the multiple tabs use case. `OPFSCoopSyncVFS` works with multiple tabs, and adds multiple tab support for both Safari and Safari iOS.
+
+**Note**: There are known limitations with `OPFS` in Safari’s incognito mode, which may cause it to not function properly.
+
+| VFS Type               | Multi-Tab Support on Normal Browsers | Multi-Tab Support on Safari/Safari iOS | Notes                                                             |
+|-------------------------|-------------------------------------|----------------------------------------|-------------------------------------------------------------------|
+| **IDBBatchAtomicVFS**  | Supported                        | Not supported                        | May have stability issues on Safari. |
+| **AccessHandlePoolVFS**| Not supported                    | Not supported                       | Does not work correctly in multi-tab scenarios.                  |
+| **OPFSCoopSyncVFS**    | Supported                        | Supported                           | Works with multiple tabs on all browsers, including Safari.      |
+
+### Clearing OPFS Storage
+
+Clearing `OPFS` storage isn’t as straightforward as clearing `IndexedDB` which can be done through browser developer tools. 
+This requires developers to manually iterate through and delete files and directories.
+
+```js 
+async function purgeVFS() {
+  await powerSync.disconnect();
+  await powerSync.close();
+
+  const root = await navigator.storage.getDirectory();
+
+  // .db-wal needs a moment to become deletable
+  await new Promise((resolve) => setTimeout(resolve, 1));
+
+  for await (const [name, entry] of root.entries!()) {
+    try {
+      if (entry.kind === 'file') {
+        console.log(`Deleted file: ${name}`);
+        await root.removeEntry(name);
+      } else if (entry.kind === 'directory') {
+        await root.removeEntry(name, { recursive: true });
+        console.log(`Deleted directory: ${name}`);
+      }
+    } catch (err) {
+      console.error(`Failed to delete ${entry.kind}: ${name}`, err);
+    }
+  }
+}
+
+async function listVfsEntries() {
+  const root = await navigator.storage.getDirectory();
+
+  for await (const [name, entry] of root.entries()) {
+      console.log(`Entry ${entry.kind}: ${name}`);
+  }
+}
+```
+
+
 ## ORM Support
 
 See [JavaScript ORM Support](/client-sdk-references/javascript-web/javascript-orm/overview) for details.