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().

Sputum

Did you find any solutions? I'm having the same problem. – Frederickson

can you try this answer answer – Ventilator

I'm currently struggling with this on iOS 14.5.1. The best "workaround" I've found so far is to change the a to a button which calls window.open on a Google Drive link (where I've uploaded a copy of the image) - this isn't ideal, as 1) if the user has Google Drive installed on their phone this method takes them out of the PWA and opens the Google Drive app, and 2) it relies on a third party service. Hopefully if this is an unavoidable bug it will be fixed soon. – Hagio

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

Anatola