Web app feels less responsive when added to iPhone's home screen

Question

This Angular 2 app feels less responsive when added to the Home Screen on the iPhone that when running inside Safari.

I made it web app capable by adding this to index.html:

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

If you have a couple of minutes, check it out on Github Pages.

Switching between tabs feel very responsive when it runs in Safari. However, it feels lagging when the app is launched from the Home Screen.

Is there something that I could change in or add to the code to fix this behavior?

Note: The same thing happens if I remove the animations from the app.

I recorded a couple of animated GIFs to try to show the difference but it's difficult to appreciate unless you're actually interacting with the app.

Answer 1

You're experiencing the infamous "300ms seconds delay", which was fixed for quite some time in Safari Mobile, but still here once your app is added to the home screen.

Using the FastClick library should solve the problem.

To use it in an Angular application, install the npm package:

npm install --save fastclick

Then add this to your main.ts file:

import * as fastClick from 'fastclick';
fastClick.attach(document.body);

Edit:

With iOS 11, web-apps added to the home sreen will now be hosted in a WKWebView instead of UIWebView, which will make use of FastClick obsolete: https://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Safari_11_0/Safari_11_0.html

Hope it helps.