How to download image from PWA in Safari iOS13+

Question

I am trying to implement downloading images from PWA. I am using

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

to achieve that. I am good on desktop Chrome and Safari and Chrome for Android. But when I am in a standalone mode (PWA) on Safari iOS 13 I can't close the opened window that was opened to save the file. On iOS 12 there was a button 'Done' and preview of the image.

I have tried solutions from here. But without success; Safari blocks the window.open().

Answer 1

I also encountered the problem. I have a PWA in which images are shown and below the image there is a download button. When having simply assigned the image URL directly to the href of the download button, iOS (latest as of September 2021) did not show any "done" button or the reload icon.

What worked for me is below:

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