添加到iPhone的主屏幕后，Web应用程序的响应速度会降低 [英] Web app feels less responsive when added to iPhone's home screen

问题描述

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

我通过将此添加到网络应用程序index.html：

 < meta name =apple-mobile-web-app-capablecontent =yes> ; 
< meta name =apple-mobile-web-app-titlecontent =Angular NavTabs> 
  

如果你有几分钟，

解决方案

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

使用 FastClick 库应解决问题。

要在Angular应用程序中使用它，请安装npm包：

npm安装--save fastclick


然后将此添加到 main.ts file：

  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

希望有所帮助。

This Angular 2 app feels less responsive when added to the Home Screen on the iPhone that when running inside Safari.

I made it web app capable by adding this to index.html:

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

If you have a couple of minutes, check it out on Github Pages.

Switching between tabs feel very responsive when it runs in Safari. However, it feels lagging when the app is launched from the Home Screen.

Is there something that I could change in or add to the code to fix this behavior?

Note: The same thing happens if I remove the animations from the app.

I recorded a couple of animated GIFs to try to show the difference but it's difficult to appreciate unless you're actually interacting with the app.

解决方案

You're experiencing the infamous "300ms seconds delay", which was fixed for quite some time in Safari Mobile, but still here once your app is added to the home screen.

Using the FastClick library should solve the problem.

To use it in an Angular application, install the npm package:

npm install --save fastclick

Then add this to your main.ts file:

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

Edit:

With iOS 11, web-apps added to the home sreen will now be hosted in a WKWebView instead of UIWebView, which will make use of FastClick obsolete: https://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Safari_11_0/Safari_11_0.html

Hope it helps.

这篇关于添加到iPhone的主屏幕后，Web应用程序的响应速度会降低的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！