Progressive Web Apps (PWAs) have come a long way since their early days as “just a fancy bookmark.” Today, they blur the line between native apps and web experiences—loading instantly, working offline, sending push notifications, and even appearing in your home screen’s app grid. Yet one capability long reserved for native apps remained out of reach for PWAs: accessing folders on your device. Thanks to the emerging File System Access API, that’s changing—at least on Android.

Why Folder Access Matters

Imagine a mobile sketching app that saves your projects directly into a “Sketches” folder you already use in Google Drive. Or a lightweight PDF annotator that writes notes back to the very directory you organize your documents in. These seamless workflows are familiar in desktop web apps; with folder access on mobile, they become possible in PWAs too.

Until recently, web apps on smartphones could only prompt users to pick individual files via a traditional <input type="file"> dialog. Once a file was selected, the web app could read its contents—but writing back, or picking entire directories, was out of scope. Native apps, on the other hand, had full file-system privileges (with user permission). The File System Access API closes that gap.

The File System Access API: A Quick Primer

At its core, the File System Access API provides two powerful picker methods:

• window.showOpenFilePicker()
  Prompts the user to select one or more files. Returns file handles you can read or write.

• window.showDirectoryPicker()
  Allows the user to choose an entire folder. Returns a directory handle from which you can traverse entries, read files, create new files, and even write back.

These methods must be invoked from a user gesture (e.g. a button click) and only function in secure contexts (HTTPS or localhost). Once a user grants access, your PWA can store the returned handles (for example, in IndexedDB) and re-open them in future sessions—making your PWA feel truly integrated with the device’s storage.

Android Support: Where It Works Today

On Android, support for the File System Access API has matured rapidly in recent Chromium-based browsers:

• Chrome for Android (v86+)

• Edge for Android

• Samsung Internet (may require enabling a flag in some versions)

That means your PWA installed via Chrome on most Android phones can now ask for—and receive—folder-wide access. Here’s what a basic directory picker looks like in practice:

// HTML: <button id="open-dir">Select Folder</button>
document.getElementById('open-dir').addEventListener('click', async () => {
  if ('showDirectoryPicker' in window) {
    try {
      const dirHandle = await window.showDirectoryPicker();
      // Iterate through each entry in the folder
      for await (const entry of dirHandle.values()) {
        console.log(`${entry.kind}: ${entry.name}`);
      }
      // Example: Create a new file in that folder
      const newFile = await dirHandle.getFileHandle('notes.txt', { create: true });
      const writable = await newFile.createWritable();
      await writable.write('Hello from my PWA!');
      await writable.close();
    } catch (err) {
      console.error('User cancelled or an error occurred:', err);
    }
  } else {
    alert('Directory picking is not supported in this browser.');
  }
});

By persisting dirHandle in IndexedDB, you can re-open the same folder on subsequent visits—no re-picking needed, unless the user revokes permission.

The iOS Roadblock

If you’re building a PWA for iPhone or iPad users, there’s a catch: Safari on iOS and iPadOS still does not support the File System Access API. Your PWA running in Safari (even when “installed” to the home screen) falls back to the classic file‐input approach. You can use the non-standard webkitdirectory attribute on <input> to let users select multiple files at once, but:

1. You don’t get true FileSystemHandle objects.

2. You can’t write back to the user’s filesystem—only download new files.

3. There’s no persistence—you’ll have to ask each time.

Until Apple implements the API in WebKit, directory‐wide read/write remains an Android-only luxury.

Best Practices & Security Considerations

1. Always Ask Clearly
   Make it explicit why you need folder access. A well-worded dialog (“Allow SketchWizard to save files in your ‘Sketches’ folder?”) builds trust.

2. Handle Denials Gracefully
   If a user cancels the picker, fall back to a file-input or offer in-app storage via IndexedDB.

3. Respect User Consent
   Never scan or enumerate directories without a user gesture, and store handles securely. If the user revokes permission (via browser settings), prompt them to re-authorize.

4. Test Across Browsers
   Even on Android, flag differences: Samsung Internet may behave slightly differently than Chrome. And always feature-detect (if ('showDirectoryPicker' in window)).

The Future of Mobile Web Apps

With folder access now a reality for PWAs on Android, the line between web and native apps grows ever fainter. Expect more creative tools—file managers, photo editors, document workflows—delivered purely via the web. And as Apple and others catch up, those powerful capabilities will soon reach every smartphone.

For now, if you’re building a PWA and want to tap into local storage on Android devices, the File System Access API is your gateway. Just remember: with great power comes great responsibility. Handle user data with care, and your PWA will feel as integrated and trustworthy as any native app.