I have this PWA which the user can click on a link to generate a report in PDF format. When the file opens I just have an OK button that close the file, nothing more, this behavior happens when user add it to the home screen:
https://i.redd.it/24rbih326q931.jpg
Tried an simple <a href>
HTML tag, but in this case not even the ok to close the file is showing forcing me to restart the app.
When used JavaScript function window.open()
, I had the option "Ok" which closes the file.
<img src="pdf.png" onclick='geraPDF(1045, 45)'>
function geraPDF(c, v){var jan=window.open("geraPdfTermoAdesao.php?c="+c+"&v="+v, "adesao", "location: 0;");}
I want to give the users options to print, share or even save locally that PDF file. When the same app is used on a Safari Tab, I have those options disponible.
EDIT 16/07/2019
Looks like Safari is finally getting over the bug on tag: <a href="" download="name">
as seen on: iOS: Add support for the download attribute this will finally get the download tag to work again.
When you "install" a PWA on the home screen it renders according to the values chosen in the display
property of the web app manifest (you can read more details here), but other than that it is 1:1 as a normal web application.
Therefore if you want to provide HTML elements to interact with the page (if I understood your question rightly), you have to implement them by yourself. Eventually you can implement a custom menu or header bar.
Update
In general, if you plan to open external link within a PWA, for a better user experience those should be opened in the browser and not your PWA. Typically the user wants to remain in the PWA context. Moreover if you open the PDF in a separate page, that is not inside or part of you app, then you cannot have extra buttons, other than the default ones provided by default by the browser.
What I would suggest to do is to try to open the PDF inside a div/container in your application (there are probably different libraries allowing it) and then add any UI element you might need.