iOS系统下PWA如何打开外部链接跳转至Safari浏览器

核心原因 #

iOS 独立运行的PWA（添加到主屏幕后启动的实例）使用独立WebView容器，默认target="_blank"打开的新窗口没有返回导航控件，跳转下载页面后无法退回原PWA界面。

可行解决方法 #

• 方案1：替换<a>标签的target属性值
  不要使用_blank，改用iOS PWA专属识别的_system属性值，会直接调用系统默认Safari打开下载链接，不会占用PWA本身的容器上下文，跳转后切回PWA仍保持原有状态。
  代码示例：
  <a href="下载链接地址" target="_system" rel="noopener noreferrer">下载文件</a>

• 方案2：动态JS触发下载的适配写法
  如果下载链接是前端动态生成的，不要直接调用window.open，按以下逻辑创建临时<a>标签模拟点击：

  const tempLink = document.createElement('a');
  tempLink.href = '下载链接地址';
  tempLink.target = '_system';
  tempLink.rel = 'noopener noreferrer';
  // 同源下载资源可加download属性指定文件名，跨源可不加
  // tempLink.download = '自定义文件名.zip';
  document.body.appendChild(tempLink);
  tempLink.click();
  document.body.removeChild(tempLink);
  

• 注意事项

  • 不要用iframe加载下载链接，iOS PWA的WebView对iframe内的下载资源适配性极差，极易导致PWA进程卡死
  • 不要给下载链接绑定阻止默认行为的点击事件，会覆盖系统级的跳转逻辑

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