Ionic 3 PWA - hide safari browser UI and set homescreen icon

Ionic Framework ionic-v3
1

Hi all, I’m struggling to find good canonical advice for running Ionic PWAs. I thought I would start a thread on the subject.

Some specific questions:

  1. What is the right way to hide the ios Safari browser UI (address bar top and nav bar bottom) by default?
    I have seen some discussion that the meta tag:
    <meta name="apple-mobile-web-app-capable" content="yes">
    … should deal with this, but it doesn’t seem to work in my experience.

  2. What is the right way to define the icon ios safari should use when adding the url to the homescreen. Apparently this should be something like: <link rel="apple-touch-icon-precomposed" href="/resources/ios/icon/icon.png">
    but again that doesn’t seem to work.

1 Like
2

You should be able to find all the options you need for that in the manifest.json that comes with Ionic.

3

Where ? On ios It does not add any icon on homescreen ?

4

Look here https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
and add the lines to the index.html

5

Why wouldn’t the ionic team already have those settings described in the apple developer library as part of the index.html file?

6

Feel free to open a pull request on Github with the settings you thing should be there: https://github.com/ionic-team/ionic2-app-base/blob/master/src/manifest.json