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

Question

当在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">

如果您有几分钟的时间,请在Github Pages上查看.

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

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

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

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

Answer 1

您正在经历臭名昭着的" 300毫秒秒延迟 ",这在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

希望能帮助到你.