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

Question

这款Angular 2应用程序在iPhone上的主屏幕上添加时，在Safari中运行时感觉响应性较差。

我将其添加到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，试图展示差异，但除非您真的与应用互动，否则很难欣赏。

Answer 1

您正在体验臭名昭着的＃34; 300ms seconds delay＆＃34;，这在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

希望它有所帮助。