Impossible to download a file on PWA (Progressive Web App)

Hello.


We are experimenting problems with a file download on a PWA (Progressive Web App)

In our PWA, we have a button which downloads an Excel file.

In Safari the download is working correctly, but when we execute de PWA (by clicking on the icon of the PWA, previously installed with the opcion "share -> Add to home screen") the download doesn't work.


- In the headers of our PWA, we have this goals:


<meta name = "mobile-web-app-capable" content = "yes">

<meta name = "apple-mobile-web-app-capable" content = "yes">


- This is javascript code that button is executing:


let anchor = document.createElement ('a');

document.body.appendChild (anchor);

anchor.setAttribute ('download', file);

anchor.href = window.URL.createObjectURL (this.response);

anchor.click ();

anchor.remove ();



Could you tell us what the error is and how to solve it?

Is it possible, to download a file from a PWA? How?


Thanks in advance.

Replies

I am also encountered the same problem you described. Did you ever discover a solution?

So far the only solution I found was to link to a Google viewer using either

window.open('https://docs.google.com/gview?url=urltoyour.pdf')


Or and iframe with the src as shown

src='https://docs.google.com/gview?url=urltoyour.pdf&embedded=true'


One major drawback here is if using window.open() or if in the iframe and the user clicks to open in a browser; when the user returns to the PWA they will return to the specified landing page of the PWA. If you have a secure PWA this also means when the user returns they will have to log back in and navigate to where they were inside your PWA.

I encountered the same problem and did some testing.

It appears to be working on iOS 13 yet with restrictions.

See my thread for details: How to download locally generated text in a PWA?

Working for me!


    function downloadPDF(url) { 
      var xhr = new XMLHttpRequest();
      xhr.open('GET', url, true);
      xhr.responseType = 'blob';
      xhr.onload = function(e) {
        if (this.status == 200) {
          var myBlob = this.response;
          var link = document.createElement('a');
          link.href = window.URL.createObjectURL(myBlob);
          link.download = "yourname.pdf";
          link.click();
        }
      };
      xhr.send();
    }