Keep web links in fullscreen view on iOS

Share this:

On iOS, you can easily save a regular webpage to the home screen and let it load into fullscreen using the <meta name="apple-mobile-web-app-capable" content="yes">. However, that alone is not enough as any links on your first page saved on the home screen will load in an in-app browser view since its not really a progressive web app (PWA). But I’ve found a simple solution for my web app to get it to always load its links in the fullscreen view on iOS.

Keeping links in fullscreen view on iOS

Web app links loads in fullscreen view on iOS

The trick is to use the scope configuration in the Web App Manifest. The following is the example of my app.webmanifest file. With the scope “/”, it basically loads everything from the same domain in the fullscreen view just like an app on iOS.

Another configuration you should set on the web app manifest is the display setting. Standalone will load the web app with the same look and feel of a native standalone application where the standard system UI elements will remain. On the iPhone, this means the time and status bar will still be displayed.

{
  "name": "SG Carparks",
  "scope": "/",
  "display": "standalone",
  "icons": [
    {
      "src": "apple-touch-icon.png",
      "sizes": "180x180",
      "type": "image/png"
    }
  ]
}

Make sure you load the web app manifest file in the header of your html page.

<link rel="manifest" href="/app.webmanifest">

That’s it. Now all your links that’s within the scope of your web app will load in the same view when you save the web app on the iOS Home Screen.


Read also: How to Go on your iPad




If this post has been useful, support me by buying me a latte or two 🙂
Buy Me A Coffee
Share this:

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.