“Unveiling the Origins of Private File Systems”

Introducing the Origin Private File System (OPFS)

The Origin Private File System (OPFS) is a storage endpoint that is only accessible to the origin of the page and is not visible to the user. It provides access to a highly optimized special kind of file that supports low-level manipulation, byte-by-byte access, and file streaming. In this article, we explore the benefits and restrictions of working with files on the web using OPFS.

Browser Support for OPFS

OPFS is supported by all major browsers and is standardized by the Web Hypertext Application Technology Working Group (WHATWG) in the File System Living Standard. This includes browsers such as Chrome, Firefox, Edge, and Safari.

Traditional vs Modern Ways of Working with Files on the Web

Traditionally, editing files in a web application involved uploading the file to a server or opening it on the client using . The user would then make changes and download the resulting file using an injected that is programmatically clicked via JavaScript.

However, the File System Access API has introduced three picker methods that make the process more user-friendly. These picker methods include showOpenFilePicker(), showSaveFilePicker(), and showDirectoryPicker() that allow users to open, save, and access directories respectively.

Restrictions of Working with Files on the Web

Files and folders that are accessible via picker methods live in the user-visible file system. This means that files saved from the web are protected by Safe Browsing and are marked with the mark of the web to ensure they don’t pose a risk to users.

Additionally, when a user writes data to a file using the File System Access API, writes are not in-place, but use a temporary file. The file itself is not modified unless it passes through all the necessary security checks, making file operations relatively slow, even with applied improvements.

The Role of Files in Web Processing

Traditionally, files have always been an excellent way to store and record data. For instance, SQLite stores entire databases in a single file. Mipmaps are another example of files used in image processing to provide representations of an image in different resolutions. These files are pre-calculated and optimized to make operations like zooming faster.

Introducing the Origin Private File System (OPFS)

OPFS is a more optimized solution that provides users with the benefits of files without the performance costs of traditional file processing. Unlike files and folders in the user-visible file system that can be read, written to, moved, and renamed, files and folders in OPFS are entirely private and only accessible to the origin of the site.

Getting Access to the Root Directory

To get access to the root directory, run the command:

const opfsRoot = await navigator.storage.getDirectory();

Using the Origin Private File System on the Main Thread

To use OPFS on the main thread, use the getFileHandle() and getDirectoryHandle() methods to create files and directories respectively.

Creating New Files and Folders

To create new files and folders, start with a root folder and then build up a hierarchy of files using the newly created directory as the starting point.

Using the Origin Private File System in a Web Worker

Using OPFS in a Web Worker is ideal for those who deal with WebAssembly or require fast file operations. Web Workers can use synchronous APIs, a pattern that is not allowed on the main thread.

Conclusion

The Origin Private File System provides web applications with a more optimized solution for file processing. It is highly secure and provides users with faster access to files without compromising their safety. With support from all major browsers and standardized by the Web Hypertext Application Technology Working Group (WHATWG), OPFS is set to transform the way web applications work with files.