CODEWITHSUNDEEP
htmliossafarimeta-tags
iTurki
iTurki

Reputation: 16398

Turning a Web App into a Semi-Native App using Apple meta tags

I included the following to my <head> tag:

<meta name="viewport" content="width=device-width; initial-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="apple-touch-icon" href="images/icons/appicon.png">
<link rel="apple-touch-startup-image" href="images/loading.png">

My goal here is to give the user:

the ability to turn a site into what's looks like a native app, which launches without any browser chrome. [link]

So, using Safari or whatever browser on iOS, when the user clicks on Add to Home Screen while opening my web app home page, an icon gets added to the Home Screen. When you click on it, a semi-native app gets launched perfectly.

The Problem? From the semi-native app, if I navigate to another page (i.e. click on any link which redirect to another page in the same site), this link gets loaded on the browser (a separate Safari session opens) and not in the same semi-native app.

So,

Upvotes: 4

Views: 368

Answers (1)

Dr. Banana
Dr. Banana

Reputation: 435

iOS treats links in Web Apps as something that should be opened in Safari. For more information on how to solve this: iPhone Safari Web App opens links in new window

Upvotes: 2

Related Questions