Don’t use iOS meta tags irresponsibly in your Progressive Web Apps

⚠️ Updated version of this article ⏩ firt.dev

In the last months I’ve seen several apps creating what is known as a “Progressive Web App”. After 10 years of advocating using web technologies to create web experiences, this is a great time. Although I want to focus here on a big user experience issue that most of these apps are having today on Safari on iOS because of a meta tag that is being used irresponsibly.

The twitter example

Let’s start with a demo of the problem using the Twitter web app on an iOS device. You go to https://twitter.com on Safari on iOS and you decide to add it to your Home screen.

As you can see, after you add it to the Home Screen, you have an icon -the same as the native app- and you might think it’s a shortcut to the web app. Well, because Twitter has used the mobile web app capable meta tag, iOS thinks the website is now officially a web app. That means that it runs in full screen mode: no URL bar, no navigation toolbar, no navigation gestures.

The problem is that the Twitter web app is not prepared for being an iOS web app; for example, if you go to “About”, you can’t go back -you are stuck, you need to close the app and start again-. If you try to login or register it opens the experience in Safari out of the scope of the web app making the icon useless because you can’t see your own Twitter account on the web app.