El Origin Private File System (también llamado OPFS) permite tener un sistema de archivos completo directamente en el navegador web con el que podemos interactuar a través de JavaScript.

Para que OPFS esté disponible necesitamos servir el contenido con 2 encabezados importantes:

• Cross-Origin-Opener-Policy: same-origin
• Cross-Origin-Embedder-Policy: require-corp

No importa el lenguaje de programación ni el servidor usado para servir los archivos; el código JavaScript debe ser servido con un servidor que envíe esos headers. Si no lo hacemos de esa manera no vamos a poder acceder al OPFS.

Enviando encabezados

Esto va a depender de las tecnologías y servidor web que utilices. Por ejemplo, si usas PHP con Apache puedes lograr esto con un .htaccess así:

Header always set Cross-Origin-Opener-Policy "same-origin"
Header always set Cross-Origin-Embedder-Policy "require-corp"

Si usas Vite:

import { defineConfig } from 'vite';

export default defineConfig({
 base: "./",
 server: {
  headers: {
   'Cross-Origin-Opener-Policy': 'same-origin',
   'Cross-Origin-Embedder-Policy': 'require-corp',
  },
 },
});

Esos son algunos ejemplos, pero simplemente debes enviar esos encabezados desde cualquier servidor que estés usando. De esta manera podrás usar OPFS con JavaScript.