300 ms standalone iOS application

Question

Last year, webkit removed the delay of 350 ms for iOS . When I launch my site in the Safari mobile browser, the snooze no longer exists and works as expected.

However, when I run my web application offline, the delay exists and is clearly obvious.

Here is my metatag that I use:

<meta name="viewport" content="initial-scale=1.0, user-scalable=no, maximum-scale=1, width=device-width"> 

I tried options of this kind, with no luck.

It is hard to find anything about standalone applications, however, this is an obvious problem.

Does anyone know why this 350 second click lingers only offline? As a workaround, I need to bring fastclick to the project, which is not ideal.

Note. I am running iOS 9.3.5 / iPhone 6

Answer 1

There seems to be no workaround, and this seems like a known issue, regardless of being fixed in webkit.

Start repeat

Apples do not support, and the attention to detail for stand-alone applications is truly incredible; especially since version 9.3.5.

Between this problem and the main problem of Youtube player in standalone applications. Perhaps Apple should stop worrying about removing the headphone jack and add some kind of mystical “Touch Bar” and actually fix its damn platform. End ant

To solve the problem you will need to use FastClick . Apply it only to iOS. You can go further and apply it only to standalone applications, as it works great if the application is not offline.

My script tag is placed after the DOM, and the initialization looks like this:

  if (isIos() && isRunningStandalone()) { // Initialize Fast Click // Even with the latest webkit updates, unfortunatley iOS standalone apps still have the 350ms click delay, // so we need to bring in fastclick to alleviate this. // See https://stackoverflow.com/questions/39951945/ios-standalone-app-300ms-click-delay if ('addEventListener' in document) { document.addEventListener('DOMContentLoaded', function () { FastClick.attach(document.body); }, false); } } isIos = function () { // Reference: https://stackoverflow.com/questions/9038625/detect-if-device-is-ios#answer-9039885 return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream; }; isRunningStandalone = function () { // Bullet proof way to check if iOS standalone var isRunningiOSStandalone = window.navigator.standalone; // Reliable way (in newer browsers) to check if Android standalone. // https://stackoverflow.com/questions/21125337/how-to-detect-if-web-app-running-standalone-on-chrome-mobile#answer-34516083 var isRunningAndroidStandalone = window.matchMedia('(display-mode: standalone)').matches; return isRunningiOSStandalone || isRunningAndroidStandalone; }; 

Answer 2

Apple recently released iOS 11 (11.2.6 in my case), with more support for progressive web applications (e.g. reading manifest.json and other PWA features) and finally resolved this problem by no longer imposing a click delay.

Answer 3

It seems that another instance of the browser is starting when you start it offline, possibly in an older version. It is unknown whether to fix or the expected date, I am afraid.

As a workaround, you can try if ontouchend can work for your business