All about Standalone/ Add To Home Screen Apps.
Nowadays, PWAs are trying to make the user experience on Mobile Web great again. One important part of PWAs is making them accessible like real apps via Add To Home Screen feature.
Implementation
On iOS, Safari supported Meta Tags since very long time.
<meta name=”apple-mobile-web-app-capable” content=”yes”>
Btw, Chromium-based browsers implemented Web App Manifest spec for a while.
Recently, Safari 11.1 is looking forward to supporting this spec.
But it will take a while for this spec to become a standard that supported widely https://caniuse.com/#feat=web-app-manifest.
Issues
Links are opened to Mobile Safari when using standalone app
Check out the fix https://gist.github.com/kylebarrow/1042026
HTML5 mobile boilerplate includes this fix since sixyears ago.
UX issue on iOS
In standalone mode, iOS will hide the header and also the navigation bar where functionalities like Back button lives. If your UI doesn’t support this situation, it would make your user experience terrible. Users won’t have any way to go back.
Read more via Don’t use iOS meta tags irresponsibly in your Progressive Web Apps/
So in order to use this feature, we need to make sure the UX issue is resolved or consider removing this feature on iOS, like the way Twitter Lite did :D.
