添加到iPhone的主屏幕时,Web应用程序的响应速度会变慢

这个Angular 2应用程序在iPhone上运行时在iPhone上的主屏幕上感觉不到反应。

我把它添加到index.html中,使它成为了web应用程序:

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

如果你有几分钟, 请在Github Pages上查看 。

在Safari中运行时,切换标签感觉非常敏感。 但是,从主屏幕启动应用程序时,感觉会比较滞后。

有什么我可以改变或添加到代码来解决这种行为?

注意:同样的事情发生,如果我从应用程序中删除animation。

我录制了几个GIFanimation,试图展示它们之间的差异,但除非实际上与应用程序交互,否则很难去欣赏。

在Safari中运行的应用

从主屏幕运行的应用程序

您正在经历着在Safari Mobile中已经修复了一段时间的臭名昭着的“ 300ms秒延迟 ”,但是一旦您的应用程序被添加到主屏幕,仍然在这里。

使用FastClick库应该可以解决这个问题。

要在Angular应用程序中使用它,请安装npm包:

npm install --save fastclick

然后将其添加到您的main.ts文件中:

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

编辑

使用iOS 11,添加到家庭屏幕上的networking应用程序现在将被托pipe在WKWebView中,而不是UIWebView,这将使FastClick过时: https : //developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari /Safari_11_0/Safari_11_0.html

希望能帮助到你。