如何在 Safari iOS13+ 中从 PWA 下载图像

Posted 2023-03-31

【中文标题】如何在 Safari iOS13+ 中从 PWA 下载图像

【英文标题】：How to download image from PWA in Safari iOS13+

【发布时间】：2019-10-21 18:51:50

【问题描述】：

我正在尝试实现从 PWA 下载图像。我正在使用

<a target="_blank"
   rel="noopener noreferrer"
   href="photo.url"
   download>Download image</a>

实现这一目标。我擅长桌面 Chrome 和 Safari 以及适用于 android 的 Chrome。但是，当我在 Safari ios 13 上处于独立模式 (PWA) 时，我无法关闭为保存文件而打开的已打开窗口。在 iOS 12 上，有一个“完成”按钮和图像预览。

我尝试了here 的解决方案。但没有成功； Safari 会阻止 window.open()。

【问题讨论】：

您找到解决方案了吗？我也遇到了同样的问题。

你可以试试这个答案answer

我目前在 iOS 14.5.1 上遇到了这个问题。到目前为止，我发现的最好的“解决方法”是将 a 更改为 button，它在 Google Drive 链接上调用 window.open（我已经上传了图像的副本） - 这不是理想情况下，1）如果用户在他们的手机上安装了 Google Drive，此方法会将他们从 PWA 中取出并打开 Google Drive 应用程序，以及 2）它依赖于第三方服务。希望如果这是一个不可避免的错误，它将很快得到修复。

【参考方案1】：

我也遇到了这个问题。我有一个 PWA，其中显示图像，图像下方有一个下载按钮。当简单地将图像 URL 直接分配给下载按钮的 href 时，iOS（截至 2021 年 9 月的最新版本）没有显示任何“完成”按钮或重新加载图标。

对我有用的如下：

fetch('https://somedomain.tld/somefile.jpg')
.then(function(response)  
    if (response.status !== 200) 
        alert('An error has occured (' + this.status + ')!');
     else 
        response.blob().then(function(blob) 
            var objectURL = window.URL.createObjectURL(blob);
            document.getElementById('yourimageid').src = objectURL;
            document.getElementById('yourdownloadlinkid').href = objectURL;
        );
    
);