iOS Standalone App 300ms Click Delay - ios

Last year webkit removed the 350ms delay for iOS. When I run my website in Safari's mobile browser, the delay no longer exists, and works as expected.
However, when I run my web application in standalone mode, the delay exists, and is blatantly obvious.
Here's my metatag that I'm using:
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, maximum-scale=1, width=device-width">
I've tried variations of the sort, without luck.
It's hard to find anything about standalone applications, none-the-less this apparent issue.
Does anyone know why this 350ms delay click only occurs in standalone mode? As a workaround, I'm having to bring fastclick into the project, which isn't ideal.
Note: I'm running iOS 9.3.5 / iPhone 6

There seems to be no native workaround, and this appears to be a known issue, regardless of being fixed in webkit.
Begin Rant
Apples lack of support, and attention to detail for standalone apps is truly unbelievable; especially as of version 9.3.5.
Between this issue, and the major Youtube player issue on standalone apps. Perhaps Apple should stop worrying about removing the headphone jack, and adding some mystical "Touch Bar, and actually fix their damn platform.
End Rant
You'll have to use FastClick to solve the issue. Apply it only to iOS. You can go further, and only apply it to standalone apps, as it works fine if the app isn't in standalone.
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;
};

Apple recently released iOS 11 (11.2.6 in my case), with more support for progressive web apps (like reading manifest.json and other PWA features), and finally appears to have resolved this problem by no longer imposing the click delay.

There seems to run a different browser instance when you run it in standalone, probably an older version. Not known fix nor expected date either I am afraid.
As a workaround, you can try if ontouchend may work for your case

Related

whats the current state of navigator.mediaDevices.getUserMedia for audio on IOS

I know this has been asked before but those answers are a little dated and Apple keeps changing things. I have an PWA app that runs fine on mac (safari , chrome),windows (Chrome, edge), android (chrome, edge). But does not work on ios safari or chrome
I am testing on an IPad running ios 15.4
not sure which of navigator.mediaDevices.GetUserMedia, navigator.getUserMedia, navigator.webKitGetUSerMedia... is supposed to work
do I need to be served from HTTPS?
does audioWorklet work on any IOS browser (I can work without this, but prefer to use it)
OK well I now know a lot more about this so will add my own answer. This is microphone input
AudioWorklet works on current safari on IOS but there are many oddities to be aware of
console.log from the worklet is not reported by web inspector. So I ended up writing log messages to the worklet's messageport and logging them in the code that started the worklet
many audio examples do a lot of juggling to try to locate the 'getUserMedia' function. Safari will only work if is called like this
navigator.mediaDevices.getUserMedia
If you do
getUserMedia = navigator.mediaDevices.getUserMEdia || .... || .... ;
getUserMedia(....)
Safari will throw complaining that that function must be called a child of mediaDevices
The size of the inputs array spontaneously changes after 100 or so samples for no apparent reason. Starts out with inputs[0][0] and inputs[0][1]. Ie stereo input left and right. After 100 or so samples it suddenly only has inputs[0][0], ie mono.
the reporting of exceptions in the worklet in non existant, everything just silently fails.
async await code does not try catch properly
Ie this code
async foo(){
try{
..
await xxx();
...
catch(e){
log(e);
}
}
does not catch an exception thrown by xxx

Cordova trying to dial telephone number

I am trying to dial a phone number in iOS, however I only have the simulator and an iPod Touch to test on.
The code uses something along the lines of:
window.location.href = 'tel:01234567890';
Working fine with Android, but in iOS it dies with:
Failed to load webpage with error: The URL can't be shown
Now, I do realise this has been asked before, but the general consensus from some time ago was "It doesn't work, you'll need to use a plugin". There haven't been many questions on this for some time though, and what questions there are seem to suggest it works when doing it programmatically (as above with window.location.href). I have tried the iOS PhoneDialer and the newer version of the same plugin, but both have errors in XCode (ARC forbids explicit message send of 'release') - a bit of faffing and I can get this running, but then PhoneGap doesn't find the plugin - it really feels like I'm hitting a brick wall with this method, and I can't believe something as simple as this requires something so over the top.
I know you cannot auto-dial/auto-call a number for security reasons, but all I need to do is open the dialer with number pre-populated, which is surely no different to a mailto:info#example.com link opening your email client with the sender pre-populated?
So, my questions are:
Has this changed with a recent update to PhoneGap, iOS or XCode?
Or, is it a case that I cannot do this on an iPod or Simulator, and it will work fine on an iPhone?
How can I fix it? :)
You didn't specify which version of Cordova you are using so I'm going to assume version > 3.
Make sure that InAppBrowser, a plugin since version 3, is installed and then open the link by calling it through Javascript like this:
window.open('tel:12345678', '_system')
_system will open it with the systems own browser which in turn will open the call dialog, if you use it against http://maps.apple.com/ it will open in the maps app and similar for other apps which opens for special urls.
Remarks:
As described in the docs of the InAppBrowser plugin the window.open function won't be set automatically. You have to do it your self: window.open = cordova.InAppBrowser.open;. Instead you can directly use cordova.InAppBrowser.open('tel:12345678', '_system');
Make sure your number doesn't have any blankspaces in it (the +
prefix is okay). For example you could use a function like the following,
assuming num is a string.
Function:
function placeCall(num) {
if (window.cordova) {
cordova.InAppBrowser.open('tel:' + num.replace(/\s/g,''), '_system');
}
}
Below Code works perfectly fine for iphone:-
window.open('tel:123456', '_system');
Simulator doesn't support dialer. No need to waste time.
Make sure that the phone number in your href also doesn't have any formatting in it, as on iOS it causes the link not to work in a PhoneGap App. So for example, use tel:0390005555, and not tel:(03) 9000 5555.
I don't believe this is a Cordova issue. I know in native iOS you cannot bring up the dialer on the simulator or on an iPod touch. You will need to test this on an actual iPhone.
I know this is a late answer time.
Try by adding // to the url. Like this tel://xxxxxxxxx and see if it works.
Worked for me in IOS 8.4, iPhone 6, 6+ as of today.

IBM Worklight 5 - iOS app shows white screen on second launch

I'm having a problem with a hybrid app for iOS which I have written using Worklight 5. The problem is that the application only runs properly the first time it is launched, and after being closed in multi-tasking and relaunched, the app will not open properly and instead displays a white screen. The only way to get the application to run again is to delete it from the device completely and then re-install it.
This behaviour is the same in the iPad simulator and on a physical iPad.
I don't have any code to provide as all of the Objective-C is generated by Worklight and all I have written is the HTML5, CSS3 and Javascript and I think that's unlikely to be affecting it. Has anybody else experienced this issue and if so is there a way to resolve this problem? Thanks.
Actually the behavior sounds to me much more inline with changing the name of the HTML file itself and in application-descriptor.xml's mainFile element. Have you touched these? If yes, then you also need to change the name of the application's folder.
Here's something to try:
Open cordova.js inside the Xcode project.
Replace: execXhr.open('HEAD', "/!gap_exec", true);
With execXhr.open('HEAD', "/!gap_exec?" + +new Date, true);.
It's from a fix that was applied to Cordova 2.4. It adds a timestamp to the query param to prevent caching.
No idea if that will help, it sounds vaguely familiar to an issue I ran into.

iOS6 - removed console log for IPad - how to use web inspector on windows?

So iOS6 is out, horrah. Now, it appears as though Apple have removed the 'Developer Console' that used to exist in Safari. Great, I hear a lot of people say - it was limited.
But, it works on the device - now apparently you have to connect the device to a Mac to get web inspector?
Is this the only way of debugging with console? Is there a way of debugging with windows, safari? Please note, I don't mean just changing user-agent, which you can do on Safari Windows - that doesn't register touch events - just click.
If you don't have Mac OSX you can use this script as console replacement:
https://github.com/robotnic/waterbug
It shows error message, it's possible to log all kind of variables, you have to turn your iPhone or iPad 90° to the right to open the console.
A poor mans debugging console:
try {
var test = document.do.something();
}
catch (exc) {
alert(exc);
}
One can debug on the device by using bookmarklets (especially within Mobile Safari).
Debugging on the device can be very important if an error only appears live on the device but nowhere else. There is a variety of bookmarklets for developer, so choose the tool of your choice (e.g. Firebug Lite), add it to your bookmarks and use it right where you need it.
This may not be the Developer Console, but it is a method to debug much more accurate and job-oriented.
I wrote a blogpost on how to use bookmarklets on my weblog (there is also a list of other common testing tools and further bookmarklets):
http://hofmannsven.com/2013/laboratory/ios-bookmarklets/
UPDATE: Chrome released its Mobile DevTools which will make debugging (within Google Chome Mobile, Android Devices only) much easier. This will not fix the missing DevTools issue within Safari, but it might help to locate errors on a device:
https://developer.chrome.com/devtools/docs/remote-debugging
http://www.html5rocks.com/en/tutorials/developertools/mobile/
UPDATE2: Mozilla released a Firefox add-on to enable web development across browsers and devices: http://youtu.be/kEFbQwB81RE?t=1m58s
Have a look for weinre. It allows you to inspect a page running in Safari from another computer using a Chrome-like web inspector
You can use window.onerror to debug errors without a console. Simply add this code to your HTML document in its own <script> tag before any other Javascript code:
<script type="text/javascript">
window.onerror = function(e){
alert(e);
};
</script>
This will do so that whenever there is an error, the error message will be shown in an alert dialog box, which is visible in iOS Safari. It's important that the above code runs before the error you're trying to debug, and if you're debugging a syntax error, it's also important that it's in a separate <script> tag.
Instead of Safari on Windows you could use an app by Telerik called AppBuilder. I've found the instructions on this blog. You'll need to get an account to use the Telerik Platform though.
This will give you dev tools like the ones in Safari. I've used it on Win7 64 bit with regular web apps and Phonegap apps running on an iPad with iOS 7.1.
Like neno suggested, Telerik AppBuilder is a great applications. I am actually running Windows XP in a virtual machine on Linux only for the purpose of debugging my iPhone. Windows XP because in my case Windows 7 does regognize the iPhone, but iTunes and Telerik AppBuilder don't.
Looks like the built in console is gone. I tried plugging into a Windows 7 and opened Safari and could not locate the developer console. Then I read this article which confirmed it.
If you need to be able to test your site in both orientations then waterbug is not a good option, because it uses up the landscape orientation for its console view.
One decent option is to use Adobe Edge Inspect. You open your site on Chrome and open the app on your device and your device will mirror whatever page you have open on your desktop. Then you can use the Chrome dev tools to debug your content.

iOS: Did Apple disable HTML5 offline capability for web apps saved to the home screen?

I've been doing lots of work in getting a few web apps to work offline on iOS using the HTML5 manifest. I've ran across the typical problems everyone else has and fixed them and everything seems to be working fine—except in the case where I save the web app to the desktop on my iPhone 4.
If I do this and then enable airplane mode, I get the following alert when trying to access the app via the home screen: "your-app-name could not be opened because its not connected to the internet." Accessing the app via Safari browser works fine while offline.
If anyone knows if this is an error on my part, or even the slim possibility of a work around, do tell.
Even downloading the new Financial Times web app (very well done with extensive localStorage support) results in an error when accessing it offline from the home screen.
Technical specs: Running iPhone 4 with iOS 4.3.3 (but also saw the issue in 4.3.2)
After reading the comments (especially Rowan's) I ran more tests and found the answer:
No, Apple did not disable HTML5 offline capability for web apps saved to the home screen, it works - for the most part. There is a bug that will make it not work. It doesn't seem to have anything to do with your manifest setup (unless perhaps it downloaded a bad manifest or incomplete manifest at one point.) We don't know how widespread it is but the fix is to clear your Mobile Safari Cache.
Here's the steps:
Close the web app (make sure its not sticking around in the background).
Cleared Mobile Safari cache: Settings > Safari > Clear Cache
Reopened the app (for caching).
Close the web app again (make sure its not sticking around in the background).
Enabled "Airplane Mode": Settings > Airplane Mode
Reopened the app.
It should now work offline. If it doesn't then its probably a separate manifest issue in your app. Looks like a weird bug with the browser cache - or perhaps the cache was completely full? Who knows, but that's the answer. Thanks guys.
iOS seems to be very sensitive to load issues when offline.
I was getting your "could not be opened" error when offline on a page I was working on. The problem turned out to be that the page created an iframe pointing to a site that didn't have an AppCache. Removing those iframes fixed the issue.
In my case, I handled it using window.navigator.standalone which tells you whether you're running in an iOS homescreen app. The code looked like this:
if (!navigator.standalone) insertFrames();
add this to your html:
https://web.archive.org/web/20170201180939/https://jonathanstark.com/blog/debugging-html-5-offline-application-cache?filename=2009/09/27/debugging-html-5-offline-application-cache/
I found it massively useful - even though I've created my manifest file and compared it to other people's manifests this JavaScript debugging script gave me the clue I would have never found otherwise. I apparently had syntax error in my manifest ... long story short I had to remove everything and add the paths to each file/image one by one. The end result was the same however it worked... how weird!!! does whitespace / comments affect the syntax of the file?

Resources