Skip to content

File tree

1 file changed

+49
-0
lines changed

1 file changed

+49
-0
lines changed

packages/docs/site/docs/developers/06-apis/javascript-api/06-mount-data.md

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,3 +17,52 @@ window.showDirectoryPicker().then(function (directoryHandle) {
1717
});
1818
});
1919
```
20+
21+
## Mount Browser's OPFS Storage
22+
23+
You can mount OPFS storage available within the browser as well. Under the hood, we sync the memory filesystem to OPFS at the end of every PHP request served. It's advisable to delay mounting of OPFS after boot as shown below, so that WordPress installation doesn't trigger a sync of over 3000 files slowing down the boot process.
24+
25+
```javascript
26+
const hasWordPressSiteInOPFS = false; // roll your logic to track this
27+
const blueprint = {
28+
preferredVersions: {
29+
php: '8.4',
30+
wp: 'latest',
31+
},
32+
features: {
33+
networking: true,
34+
},
35+
login: true,
36+
steps: [], // add steps
37+
};
38+
39+
try {
40+
const mountDescriptor: MountDescriptor = {
41+
device: {
42+
type: 'opfs',
43+
path: `my-unique-prefix/my-site`,
44+
},
45+
mountpoint: '/wordpress',
46+
initialSyncDirection: hasWordPressSiteInOPFS ? 'opfs-to-memfs' : 'memfs-to-opfs',
47+
};
48+
49+
const client = await startPlaygroundWeb( {
50+
iframe: document.getElementById('wp'),
51+
remoteUrl: 'https://playground.wordpress.net/remote.html',
52+
blueprint: blueprint,
53+
shouldInstallWordPress: ! hasWordPressSiteInOPFS,
54+
mounts: hasWordPressSiteInOPFS ? [ mountDescriptor ] : [],
55+
} );
56+
57+
if ( ! hasWordPressSiteInOPFS ) {
58+
await client.mountOpfs( mountDescriptor );
59+
}
60+
61+
await client.isReady();
62+
return client;
63+
} catch ( error ) {
64+
// handle error here
65+
}
66+
```
67+
68+
For persistence guarantees, check [Storage quotes and eviction criterias](https://developer.mozilla.org/en-US/docs/Web/API/Storage_API/Storage_quotas_and_eviction_criteria).

0 commit comments

Comments
 (0)