ios – 添加到iPhone的主屏幕后,Web应用程序的响应速度会降低

当在Safari中运行时,这个Angular 2应用程序在添加到iPhone的主屏幕时感觉不太敏感.

我通过将其添加到index.html来使其成为web应用程序:

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

如果你有几分钟,check it out on Github Pages.

在Safari中运行时,在标签之间切换会感觉非常敏感.但是,当从主屏幕启动应用程序时,它会感觉滞后.

有什么东西我可以更改或添加到代码来修复此行为?

注意:如果我从应用中删除动画,也会发生同样的事情.

我录制了几个动画GIF以试图显示差异,但除非你真的与应用程序进行交互,否则很难欣赏.

App running in Safari

App running from Home Screen

最佳答案
您正在体验臭名昭着的“300ms seconds delay”,这在Safari Mobile中已经修复了一段时间,但是一旦您的应用程序添加到主屏幕,它仍然存在.

使用FastClick库可以解决问题.

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

npm install –save fastclick

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

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

编辑:

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

希望能帮助到你.

转载注明原文:ios – 添加到iPhone的主屏幕后,Web应用程序的响应速度会降低 - 代码日志