Native Folder Access

1Qué hace esta función#

Esta función da a tu app web acceso controlado a una carpeta de Android elegida por el usuario mediante el Storage Access Framework (SAF). Funciona bien para apps HTML sin conexión, editores, flujos de copia de seguridad y restauración, y herramientas de importación y exportación.

NO da acceso sin restricciones al almacenamiento del dispositivo. El usuario elige explícitamente una carpeta y tu app solo puede trabajar dentro de ese árbol concedido.

2Actívalo en el generador#

En el Paso 4 del generador, ACTIVA 'Native Folder Access (SAF)'. Luego genera la app.

Cuando está activado, tu sitio web obtiene un asistente de alto nivel en window.WebToApkFS además del puente básico window.WebToApk.

⚠️ Nota sobre almacenamiento en Android 11+: en Android 11 y superior, leer el almacenamiento compartido requiere el permiso especial 'Acceso a todos los archivos'. Cuando tu app generada se inicia por primera vez y el permiso de almacenamiento está activado, abre automáticamente la pantalla de Ajustes de Android para que el usuario conceda este permiso. El usuario solo toca el interruptor en Ajustes y vuelve a la app, sin navegación manual.

3Comprobación de capacidad segura para el navegador#

Protege siempre tu código para que siga funcionando en Chrome/Safari, donde el puente de Android no existe:

function canUseNativeFiles() {
  return !!(window.WebToApkFS && window.WebToApkFS.isAvailable());
}

if (canUseNativeFiles()) {
  console.log('Android native folder access available');
}

4Pide al usuario que elija una carpeta#

Llama a requestAccess() desde un clic en un botón u otra acción clara del usuario. Abre el selector de carpetas de Android y devuelve la URI de la carpeta elegida.

async function connectFolder() {
  const result = await window.WebToApkFS.requestAccess();
  if (!result.success) {
    alert('Folder access was not granted');
    return false;
  }
  console.log('Granted folder:', result.folderUri);
  return true;
}

5Operaciones básicas con archivos#

Una vez concedido el acceso, puedes listar carpetas, crear directorios, leer archivos de texto, escribir archivos de texto, renombrar entradas y eliminar entradas.

// Create folders
window.WebToApkFS.mkdir('notes');
window.WebToApkFS.mkdir('notes/2026');

// Write a file
window.WebToApkFS.writeText('notes/2026/today.txt', 'Hello from offline app');

// Read it back
const text = window.WebToApkFS.readText('notes/2026/today.txt');
console.log(text);

// List folder contents
const entries = window.WebToApkFS.list('notes/2026');
console.log(entries);

6Renombrar y eliminar#

Renombrar cambia solo el nombre final de la entrada. Eliminar admite el borrado de directorios tanto no recursivo como recursivo.

// Rename file or folder
window.WebToApkFS.rename('notes/2026/today.txt', 'journal.txt');

// Delete a single file
window.WebToApkFS.delete('notes/2026/journal.txt');

// Delete a folder tree
window.WebToApkFS.delete('notes/2026', { recursive: true });

7Buenos casos de uso#

✅ Apps de notas o diarios sin conexión
✅ Herramientas de importación y exportación CSV / JSON
✅ Copia de seguridad y restauración locales sencillas
✅ Editores HTML estáticos que guardan contenido del usuario
✅ Apps de paneles que exportan informes como texto o CSV

8Limitaciones#

⚠️ Esto es solo para Android. No existirá en navegadores normales de escritorio o móvil.

⚠️ El asistente actual está diseñado en torno a listados de carpetas y archivos de texto. Los flujos binarios necesitan API adicionales.

⚠️ El acceso se limita a la única carpeta que el usuario concedió.

⚠️ Llama a estas API después de que la página haya cargado, para que el asistente ya esté inyectado.

9Ejemplo completo y funcional#

Este ejemplo conecta una carpeta, crea un directorio de trabajo, escribe un archivo JSON y muestra el listado de la carpeta:

async function setupWorkspace() {
  if (!window.WebToApkFS || !window.WebToApkFS.isAvailable()) {
    console.log('Native folder access not available in this browser');
    return;
  }

  if (!window.WebToApkFS.hasAccess()) {
    const granted = await window.WebToApkFS.requestAccess();
    if (!granted.success) return;
  }

  window.WebToApkFS.mkdir('workspace');
  window.WebToApkFS.writeText(
    'workspace/config.json',
    JSON.stringify({ updatedAt: new Date().toISOString(), mode: 'offline' }, null, 2)
  );

  const files = window.WebToApkFS.list('workspace');
  document.getElementById('output').textContent = JSON.stringify(files, null, 2);
}