添加到 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

您遇到了臭名昭著的“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

希望对您有所帮助。