This article explains how to force your PWA to show controls for PDF
When you are developing a PWA for iOS, you may encounter a problem with PDF files. When you click on a PDF link, it will override the current page and show the PDF file. This is not a good user experience because the user will not be able to go back to the previous page. The only way to go back is to reload the PWA.
There are several ways to open a PDF file in a PWA on iOS, but none of them are perfect. Here are some of the options:
Regular link
<a href="test.pdf">Open PDF</a>- Replaces current page
- No back button
- Requires to reload the PWA
Link to another domain
<a href="https://example.com/test.pdf">Open PDF</a>- Works well
- Requires some work to support subdomain on your web site
window.open blob uri
<a id="myLink" href="href">Open PDF</a>document.getElementById('myLink').addEventListener('click', async (e) => {
e.preventDefault();
const url = e.target.href;
window.open(url, '_blank');
});- Works only when popups are allowed in safari settings
- Shows warning
- Does not allow to open file in safari
Native link with blob uri
<a id="myLink" href="./test.pdf">Open PDF</a>document.getElementById('myLink').addEventListener('click', async (e) => {
e.preventDefault();
const response = await fetch(e.target.href);
const blob = await response.blob();
const url = URL.createObjectURL(blob);
window.open(url, '_blank');
});- Does not allow to open file in safari
Native link with blob mime type octet-stream
<a id="myLink" href="./test.pdf">Open PDF</a>document.getElementById('myLink').addEventListener('click', async (e) => {
e.preventDefault();
const response = await fetch(e.target.href);
const blob = new Blob([await response.blob()], { type: 'octet/stream' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'test.pdf';
a.click();
});- Does not show preview
- Allows to share file
- Does not allow to open file in safari
See it in action: Install PWA from this link