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

Question

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

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

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

我已经尝试过这里的解决方案。但没有成功；Safari 会阻止window.open().

标签： mobiledownloadsafariprogressive-web-appsmobile-safari

Answer 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;
        });
    }
});