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

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.

Therefore, why is Twitter adding the web app capable meta tag not being capable of supporting the experience? My first answer is because of ignorance -with all due respect to the developers doing this. In fact, this is not happening only at Twitter, mostly every PWA out there today has the same problem.

Progressive Web Apps examples #

Flipkart, one of the first successful PWA in the Android-era has a much better UI when you add it to the home screen on iOS. It works fast, it has back buttons, excellent UI; but they have one problem: if you navigate to a section or to a product while in the browser and you add the web app to the Home Screen from there, you have an icon that points directly to that details page forever. Totally useless and confusing for the user. what will happen with the web app in a short-term future when that product is not available anymore?

Flipkart has almost a perfect web app on iOS, until you add it to the homescreen from an internal section

I think some developers that are creating PWA experiences running on Android think it’s harmless to add the Apple meta tag, but in fact, it does harm your user’s experience. You are keeping the user stuck on screens without the ability to navigate back, you are opening the browser on some situations making the whole experience confusing, you are not offering a good experience at all.

I’ve tried from pwa.rocks several Progressive Web Apps, and most of them are using the iOS meta tag irresponsibly -that means, with UX problems-, including:

• Google IO 2016: you can’t go back from the Sign in page
• AliExpress: you can browse categories, but if you click on a product, the browser is being opened losing your context
• Flipkart: deep linking problem
• Google Spaces: completely useless if you are -like me- under 2-way authentication. No way to log in in the web app, so I couldn’t even check if there is other problem there
• Washington Post: icon’s title problems, severe UI problems (menu dissapears, terrible scroll experience, some links open in browser.

From the PWAs using the iOS meta tag, Telegram has actually a good experience on iOS.

The Mobile Web App meta tag #

The Mobile Web App meta tag was introduced by Apple long time ago (8–9 years) and defines that your website is capable of offering all the experience without the need of a browser’s chrome UI, including back and forward navigation. The meta tag is:

<meta name=”apple-mobile-web-app-capable” content=”yes”>

You might think it’s an innocent meta tag, but in fact it’s a powerful and dangerous meta tag if you add it irresponsibly. You must provide a single page application solution offering back buttons inside the UI -or use location.href instead of normal <a> links if you don’t want them to be opened in the browser instead of your app’s container-.

This meta tag is the inspiration of the installation feature of current Progressive Web Apps concept, although the Chromium-based browsers implementation is now far more powerful using the Web App Manifest spec.

Why a PWA might have problems with this meta tag #

I really like the idea of progressive enhancement and because PWA has the P as “progressive” I like PWAs adding also support for iOS Home Screen Web Apps, not just the Web App Manifest that WebKit is not supporting. However, you need to understand the big differences in terms of UX that affects badly the solution you are offering if you don’t pay enough attention.

The main differences are:

• 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, such as in the Flipkart example.
• On iOS you don’t have a physical or logical back button or gesture. You must provide it inside the UI, always. That means, you can’t use OAuth login mechanisms as a top level document (no way to go back).
• On iOS the engine is not the same as the browser, there are differences in compatibility, bugs and they work in separate containers for cookies and local storages. You must test it there.
• On iOS you can’t use transparent icons, and most PWA are using a circular icon for Android, keeping the same for iOS where the transparent color becomes black and doesn’t seem like a good idea.

PWA Icons when added to iOS shows a transparent original background not compatible with iOS guidelines

What these web apps should be doing #

While we wait to see if Apple evolves the web app idea with support for the PWAs specs -mainly Web App Manifest and Service Workers- or with something else, every web app today should use the mobile web app meta tag with responsibility.

Most of the examples I mentioned before have two options:

1. Remove the meta tag. You can keep the icon and meta for the title, while not offering a full screen experience. Then, the experience will open inside the browser and everyone will be happy on iOS. No UX problems.
2. Understand how iOS web app works and update the experience. That will involve: a) adding back navigation everywhere, b) create a SPA experience or use location.href instead of links for internal navigation, c) if the load process is done in fullscreen mode (navigator.standalone==true), always load the home screen not matter what the stored URL says and please d) don’t suggest me to “download an app” if I’m already inside an app-like experience.

You can get more details on how to create a successful Progressive Web app on iOS check the chapter on that topic on my book “Programming the Mobile Web, 2nd. edition” or the Mobile HTML5 video training.

And although I’m making responsability of these problems to the web developers, I also want Apple to improve the experience, resolve ancient bugs and let us have more power for this kind of web apps. It was their invention, but Apple didn’t evolve the web app platform in 8 years. It’s time for an update; the PWA movement makes this a good moment to start supporting the Web App Manifest or -at least- a better solution than the one available today.