PWA/Web：应用重启后保留文件系统权限以恢复文件上传

答案是肯定的——可以通过PWA相关API结合浏览器的权限、存储能力，实现会话重启后恢复文件上传并保留已授予的文件访问权限。以下是具体实现思路和关键细节：

1. 持久化文件访问权限 #

要让浏览器记住文件读取权限，核心依赖File System Access API（目前主流现代浏览器均支持）：

• 首次请求文件时，通过showOpenFilePicker()获取文件句柄，此时浏览器会询问用户是否允许“记住此权限”，用户同意后，该权限会被持久化。
• 将获取到的FileSystemFileHandle存储到IndexedDB中（句柄本身支持序列化），下次会话重启时，直接从IndexedDB读取句柄，无需再次请求用户授权。
• 示例代码：

  // 保存文件句柄到IndexedDB
  async function saveFileHandle(handle) {
    const db = await openDB('UploadStore', 1, {
      upgrade(db) {
        db.createObjectStore('fileHandles');
      },
    });
    await db.put('fileHandles', handle, 'uploadFile');
  }
  
  // 重启后读取文件句柄
  async function getSavedFileHandle() {
    const db = await openDB('UploadStore', 1);
    return db.get('fileHandles', 'uploadFile');
  }
  

2. 上传状态的持久化与断点续传 #

仅保留权限还不够，还需要记录上传进度，重启后从断点继续：

• 用IndexedDB存储上传状态：已上传字节数、文件元信息（大小、文件名）、上传目标URL等。每次上传进度更新时，同步更新存储的状态。
• 重启后，读取保存的状态和文件句柄，通过fileHandle.getFile()获取文件对象，再用File.slice()截取未上传的字节段，发起带Range请求头的上传请求，实现断点续传。
• 示例代码（续传逻辑）：

  async function resumeUpload() {
    const handle = await getSavedFileHandle();
    const uploadState = await getUploadState(); // 从IndexedDB读取状态
    if (!handle || !uploadState) return;
  
    const file = await handle.getFile();
    const remainingBlob = file.slice(uploadState.uploadedBytes);
    
    // 发起续传请求，携带Range头
    const response = await fetch(uploadState.targetUrl, {
      method: 'PUT',
      headers: {
        'Content-Range': `bytes ${uploadState.uploadedBytes}-${file.size-1}/${file.size}`
      },
      body: remainingBlob
    });
    // 更新上传状态...
  }
  

3. PWA Service Worker的辅助增强 #

结合PWA的Service Worker可以进一步提升可靠性：

• 利用Background Sync API：当页面关闭或网络中断时，Service Worker可以缓存上传任务，待网络恢复后自动重试上传。
• 借助Service Worker的后台能力，即使用户关闭标签页，正在进行的上传也能继续；会话重启后，通过读取存储的状态即可衔接进度。

关键限制与注意事项 #

• 浏览器兼容性：File System Access API在Chrome、Edge等Chromium系浏览器支持良好，Firefox和Safari需查看最新支持情况，必要时做降级处理（比如用传统File API结合临时存储，但大文件场景不推荐）。
• 权限失效：用户可能手动清除网站权限，此时读取文件句柄会抛出权限错误，需要捕获并重新引导用户授权。
• 存储限制：IndexedDB有存储配额，大文件不要直接存储，仅保存句柄和状态信息即可。

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