Native Folder Access

1Apa yang dilakukan fitur ini#

Fitur ini memberi aplikasi web Anda akses terkontrol ke satu folder Android pilihan pengguna melalui Storage Access Framework (SAF). Cocok untuk aplikasi HTML offline, editor, alur pencadangan/pemulihan, dan alat impor/ekspor.

Ini TIDAK memberi akses penyimpanan perangkat tanpa batas. Pengguna secara eksplisit memilih satu folder, dan aplikasi Anda hanya bisa bekerja di dalam pohon yang diizinkan itu.

2Aktifkan di generator#

Di Langkah 4 generator, AKTIFKAN 'Native Folder Access (SAF)'. Lalu buat aplikasinya.

Saat diaktifkan, situs web Anda mendapat helper tingkat tinggi di window.WebToApkFS selain bridge mentah window.WebToApk.

⚠️ Catatan penyimpanan Android 11+: Di Android 11 ke atas, membaca penyimpanan bersama membutuhkan izin khusus 'All Files Access'. Saat aplikasi yang Anda buat pertama kali diluncurkan dan izin penyimpanan diaktifkan, aplikasi otomatis membuka layar Pengaturan Android agar pengguna dapat memberikan izin ini. Pengguna cukup mengetuk sakelar di Pengaturan lalu kembali ke aplikasi - tanpa navigasi manual.

3Pemeriksaan kemampuan yang aman untuk browser#

Selalu lindungi kode Anda agar tetap berjalan di Chrome/Safari yang tidak memiliki bridge Android:

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

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

4Minta pengguna memilih folder#

Panggil requestAccess() dari klik tombol atau tindakan pengguna yang jelas lainnya. Fungsi ini membuka pemilih folder Android dan mengembalikan URI folder yang dipilih.

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;
}

5Operasi file dasar#

Setelah akses diberikan, Anda dapat mencantumkan folder, membuat direktori, membaca file teks, menulis file teks, mengganti nama entri, dan menghapus entri.

// 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);

6Ganti nama dan hapus#

Ganti nama hanya mengubah nama entri terakhir. Hapus mendukung penghapusan direktori non-rekursif maupun rekursif.

// 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 });

7Contoh penggunaan yang baik#

✅ Aplikasi catatan atau jurnal offline
✅ Alat impor-ekspor CSV / JSON
✅ Pencadangan dan pemulihan lokal sederhana
✅ Editor HTML statis yang menyimpan konten pengguna
✅ Aplikasi dasbor yang mengekspor laporan sebagai teks atau CSV

8Batasan#

⚠️ Ini hanya untuk Android. Fitur ini tidak akan ada di browser desktop/seluler biasa.

⚠️ Helper saat ini dirancang untuk daftar folder dan file teks. Alur kerja biner membutuhkan API tambahan.

⚠️ Akses dibatasi pada satu folder yang diizinkan pengguna.

⚠️ Panggil API ini setelah halaman dimuat agar helper sudah disisipkan.

9Contoh lengkap yang berfungsi#

Contoh ini menyambungkan folder, membuat direktori ruang kerja, menulis file JSON, dan menampilkan daftar isi folder:

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);
}