When not to use mobile-web-app-capable

Question

I've read on how adding

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

to your HTML will allow users to add that page to their home screen and use it as an App. So I'm wondering whether it would make sense to add these meta tags to pretty much all the HTML I generate. After all, the user doesn't have to install them as apps, but if they choose to do so, why should I prevent that?

I'm mostly thinking about unauthenticated content here which is static from a HTML server perspective, although it may well be interctive thanks to client-side JavaScript. To give you an idea, think about single-page tutorials, perhaps with some interactive code demo in it. Something like that.

• Am I making any promises by adding these tags?
• In what situations should I avoid adding them?

Answer 1

The only "promise" that you are making by using those tags is that your website can be used navigated without the browser buttons. Most websites don't have dedicated "back" buttons, and users would end up hitting dead ends.

You do suggest that a basic portion of the site can be run without an internet connection, otherwise, why bother? There should be some reason to add it to your homescreen over simply using bookmarks. You should avoid using these tags when there is no clear benefit to the user over a regular bookmark.

---

With your example, tutorials could be pretty cool as a app-like shortcut, especially if all of the content is cached and users can access it instantly, without an internet connection. However, you should consider that your users might want to reference multiple tutorials while they are working. Filling your users' homescreens up with icons for one-page "apps" that they need to switch between would be less convenient than just using browser tabs.

If you can add features that improve the "multiple browser tabs" scenario, that would be the ideal way to use the mobile-web-app-capable tag. Try making an app that combines multiple related tutorials together, and simple searching through the content in the front-end.