Setup
User visits progressive website.
User adds icon to home page on iPhone.
Reproduce
User clicks on icon to go to web page in Safari.
On that page, user clicks on link to go to third party website.
Page returns 'You are using an unsupported browser. Please use Safari or Chrome to open this page.'
But if he opens Safari directly and navigates to our website, then clicks to go to remote page, everything works perfectly.
The icon installed on the home page must be more than just a link.
Q: What am I really installing here?
Most answers I've found say it is caused by using an outdated version of Safari or the web page checking for an old version of Safari. Either way not recognizing it.
But in this case, the version of Safari is the same whether it works or not.
HTTP_USER _AGENT Mozilla/5.0 (iPhone; CPU iPhone OS X 10_3_3 like Mac OS X) AppleWebKit/603.3.8 (KHTML, like Gecko) Version/10.0 Mobile/14G60 Safari/602.1
You may want to check this blog which suggested to use the use iOS meta tags responsibly in your Progressive Web Apps. You must provide a single page application solution offering back buttons inside the UI or use location.href instead of normal links if you don’t want them to be opened in the browser instead of your app’s container. On iOS you can’t define a different URL for the icon on the home screen therefore, if you add it to the home screen while not in the home screen you might have odd results.
You can get more details on how to create a successful Progressive Web app on iOS on the book “Programming the Mobile Web, 2nd. edition” or in the Mobile HTML5 video training.