求助：Vue2 PWA在iOS 16.4设备无法运行，仅显示白屏

1. 检查Service Worker配置与兼容性 #

iOS 16.4对Service Worker的作用域和缓存策略有更严格的校验：

• 确保service-worker.js注册时指定正确的作用域，必须与应用根路径匹配：

  navigator.serviceWorker.register('/service-worker.js', { scope: '/' })
  

• 调整缓存策略，避免CacheFirst导致旧缓存无法更新，改用StaleWhileRevalidate确保动态内容能获取最新版本：

  workbox.routing.registerRoute(
    ({url}) => url.pathname.startsWith('/api/'),
    new workbox.strategies.StaleWhileRevalidate()
  );
  

• 手动清空iOS设备的Safari缓存：进入「设置 > Safari浏览器 > 清除历史记录与网站数据」，重新安装PWA测试

2. 修复JS语法兼容性问题 #

iOS 16.4的Safari对部分ES6+语法支持存在细节差异，确保代码全量转译：

• 检查babel.config.js，配置目标环境覆盖iOS 16，并引入polyfill：

  module.exports = {
    presets: [
      ['@babel/preset-env', {
        targets: { ios: '16' },
        useBuiltIns: 'usage',
        corejs: 3
      }]
    ]
  }
  

• 避免使用Safari尚未完全支持的API（如Array.prototype.at()），必要时手动引入对应polyfill

3. 验证PWA Manifest配置 #

iOS 16.4对manifest字段的校验更严格，重点检查：

• start_url必须为绝对路径，与应用部署路径一致，避免携带不必要的查询参数：

  {
    "start_url": "/",
    "display": "standalone",
    "background_color": "#ffffff",
    "theme_color": "#42b983"
  }
  

• 确保theme_color和background_color设置正确，避免因样式冲突导致初始白屏
• 检查图标尺寸符合iOS要求，至少提供192x192和512x512规格的图标

4. 用Safari开发者工具调试 #

连接iOS设备到Mac，通过Safari开发者工具定位具体错误：

• 打开Mac端Safari > 「开发」菜单 > 选择你的iOS设备 > 打开应用对应的标签页
• 查看控制台的错误日志，重点关注Service Worker注册失败、JS执行报错、资源加载失败等提示
• 检查Network面板，确认所有静态资源（JS、CSS、图片）都能正常加载

5. 处理跨域与隐私限制 #

iOS 16.4增强了隐私防护，可能拦截跨域资源：

• 确保所有API请求配置正确的CORS响应头，避免跨域请求被拦截
• 暂时禁用第三方跟踪类脚本，排查是否被Safari「阻止跨站跟踪」功能拦截

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