PWA Nuxt 2在iPhone X iOS16调用相机时后台重载致图片无法加载求助

核心原因 #

iOS 16对PWA的后台内存管控较严格，当调用相机这类原生应用时，后台的PWA会被系统判定为低优先级进程，触发内存回收导致应用重载；如果拍摄的图片仅存在内存中，重载后数据直接丢失，就会出现图片无法加载的问题。

可行解决方法 #

1. 调整PWA配置与Service Worker策略 #

修改nuxt.config.js中的PWA相关配置，强化应用的独立运行能力和缓存策略：

export default {
  pwa: {
    workbox: {
      runtimeCaching: [
        {
          urlPattern: /\.(png|jpeg|jpg)$/,
          handler: 'CacheFirst',
          options: {
            cacheName: 'image-cache',
            cacheableResponse: { statuses: [0, 200] }
          }
        }
      ],
      skipWaiting: true,
      clientsClaim: true
    },
    manifest: {
      display: 'standalone', // 确保以独立应用模式运行
      background_color: '#fff',
      theme_color: '#41b883',
      ios: {
        'apple-mobile-web-app-capable': 'yes',
        'apple-mobile-web-app-status-bar-style': 'default'
      }
    }
  }
}

重点保证display: 'standalone'已配置，同时让Service Worker缓存图片资源，避免重载后重新请求。

2. 持久化存储拍摄的图片 #

相机拍摄完成后，不要只把图片存在内存里，转存到本地存储中，重载后再读取：

// 相机成功回调示例
function onCameraCapture(imageBlob) {
  // 转成Base64存储到localStorage（小图适用）
  const reader = new FileReader();
  reader.onload = function(e) {
    localStorage.setItem('temp-captured-image', e.target.result);
    // 跳转或返回页面后读取
    const savedImg = localStorage.getItem('temp-captured-image');
    if (savedImg) {
      document.querySelector('.image-preview').src = savedImg;
      // 使用完记得清理
      localStorage.removeItem('temp-captured-image');
    }
  };
  reader.readAsDataURL(imageBlob);
}

如果是大图，建议用IndexedDB替代localStorage，规避存储大小限制。

3. 优化应用内存占用 #

• 开启Nuxt代码分割：在nuxt.config.js中设置build.splitChunks: true，减少初始包体积
• 及时清理无用的内存变量，比如拍摄完成后释放相机相关的临时对象
• 避免在全局状态中存储大量未使用的数据，按需加载页面资源

4. 验证操作 #

修改配置后执行npm run build && npm run generate重新构建PWA，删除iPhone上旧的PWA应用，重新添加到主屏幕后测试相机功能，检查重载和图片加载情况。

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