嘿，这个问题确实是企业级PWA离线场景的典型痛点——我之前帮几个类似需求的团队落地过方案，给你梳理下可行的路径：

浏览器对PWA的caches和IndexedDB的配额限制是针对当前Origin的，但本地文件系统的资源不受这个配额约束。所以核心方向是：让PWA能够访问用户本地文件系统中的资源，并通过Service Worker将线上请求映射到这些本地文件，从而绕过Origin配额限制。

一、使用本地文件系统的可行性：完全可行 #

你担心的本地文件不符合HTTPS源要求是多余的——因为最终是通过Service Worker读取本地文件后，生成符合当前Origin的Response返回给页面，相当于把本地资源“代理”成了同域资源，不会有跨域或安全问题。

二、用户操作的优化：从手动选择到持久化授权 #

1. 优先方案：File System Access API（推荐） #

这是目前最理想的方案，它允许PWA获得对用户本地文件系统的持久化访问权限，用户仅需授权一次，后续打开应用可以直接访问指定目录，无需重复手动选择。

关键代码示例：

• 页面端获取并持久化目录句柄：

// 封装IndexedDB操作（用于保存目录句柄）
async function saveToIndexedDB(key, value) {
  const db = await openDB('pwaLocalStorage', 1, {
    upgrade(db) { db.createObjectStore('handles'); }
  });
  await db.put('handles', value, key);
}

async function getFromIndexedDB(key) {
  const db = await openDB('pwaLocalStorage', 1);
  return db.get('handles', key);
}

// 获取持久化目录权限
async function getPersistentResourceDir() {
  let dirHandle = await getFromIndexedDB('resourceDir');
  
  if (dirHandle) {
    try {
      // 验证权限是否有效
      await dirHandle.queryPermission({ mode: 'readwrite' });
    } catch (err) {
      // 权限失效，重新请求
      dirHandle = await window.showDirectoryPicker({ mode: 'readwrite' });
      await saveToIndexedDB('resourceDir', dirHandle);
    }
  } else {
    dirHandle = await window.showDirectoryPicker({ mode: 'readwrite' });
    await saveToIndexedDB('resourceDir', dirHandle);
  }
  
  return dirHandle;
}

• Service Worker中拦截请求并返回本地文件：

self.addEventListener('fetch', async (event) => {
  const requestUrl = new URL(event.request.url);
  // 从IndexedDB加载线上URL与本地文件名的映射表（提前通过后台或配置文件生成）
  const resourceMap = await getFromIndexedDB('resourceMapping');
  const localFileName = resourceMap[requestUrl.pathname];

  if (localFileName) {
    event.respondWith((async () => {
      const dirHandle = await getFromIndexedDB('resourceDir');
      const fileHandle = await dirHandle.getFileHandle(localFileName);
      const file = await fileHandle.getFile();
      // 返回符合同域要求的Response
      return new Response(file, { headers: { 'Content-Type': file.type } });
    })());
  } else {
    // 无本地映射时，走正常网络/缓存逻辑
    event.respondWith(fetch(event.request));
  }
});

2. 兼容 fallback：input type=file + webkitdirectory #

如果需要兼容暂不支持File System Access API的浏览器（比如Safari），可以用input type=file配合webkitdirectory属性让用户选择整个资源目录，不过体验会差一些：用户每次打开应用都需要重新选择目录，且无法持久化访问。

代码示例：

<input type="file" id="resourceDirPicker" webkitdirectory multiple hidden>

document.getElementById('resourceDirPicker').addEventListener('change', async (e) => {
  const files = Array.from(e.target.files);
  const resourceMap = {};
  
  // 建立线上URL与本地文件的映射（假设线上路径为/resources/[文件名]）
  files.forEach(file => {
    resourceMap[`/resources/${file.name}`] = file.name;
  });
  
  // 保存映射到IndexedDB
  await saveToIndexedDB('resourceMapping', resourceMap);
});

这种方式下，文件会被读取到内存或临时存储，你可以选择将文件复制到IndexedDB，但要注意：如果文件总大小超过浏览器默认配额，需要引导用户手动增加配额（浏览器会在配额不足时弹出提示）。

三、额外注意事项 #

• 资源更新：需要建立版本机制，当线上资源更新时，提示用户替换本地目录中的旧文件。
• 兼容性：File System Access API目前在Chrome、Edge、Opera中支持良好，Safari正在开发中，需根据用户群体做兼容方案。
• 性能优化：单个文件不超过15MB的大小很适合分块读取或缓存，避免一次性加载大文件导致页面卡顿。

内容的提问来源于stack exchange，提问作者DevonTaig