Reasons why cordova app behave differently in Safari and iPhone6 - ios

I'm deploying a cordova app for iOS. When debugging I run it on Safari browser (with ionic serve. I also tried ionic serve --lab) and on the iPhone with XCode.
But both results behave differently. In the browser it shows the desired result. Neither the app on the phone nor the browser are showing errors.
What could be the reasons? Aren't they suppose to show the exact same result (I'm not only referring to the design but also the behaviours)?
Since I'm using moment.js it would show this weird behaviour. Any known issues with moment.js in combination with iPhone?

Related

How to run webXR(AR) on iOS device?

I tried running https://threejs.org/examples/#webxr_ar_cones example on my iPad(iOS 14.4.1).
I tried to run it in XRViewer, Chrome, and Safari but the example's AR button says "WEBXR NOT AVAILABLE".
So is it currently not possible to run webXR (AR) apps on an iOS device?
As the engine of all of those browsers is eventually safari and safari doesn't support WebXR at the current moment, this is the expected behavior.
There were a few attempts (maionly mozilla's https://github.com/mozilla-mobile/webxr-ios), but it is up to apple to add support for it in its core engine.

flutter web freezes on iphone ios, but not on ipad ios when hosted on firebase. Flutter bug? firebase hosting bug? ios bug?

I've been working on a flutter web app recently using firebase hosting, and it was working fine until last night. Specifically, the site loads but the interface does not react to user input only on iphone iOS. (i.e. it works properly on ios ipad)
I tried a variety of things to figure out where the problem lies:
downgraded flutter channel master -> dev + stable (currently using
dev, but first noticed on master)
created numerous projects on firebase to host these site.
reinstalled firebase-tool CLI
tested on a variety of devices
The easiest way I could recreate this is by creating the following website using the default app created by "flutter create", then performing firebase init, creating a project and then deploying the site. Here it is:
hostingweirdness.firebaseapp.com
also
hostingweirdness.web.app
What I'm seeing is that the site works perfectly for:
desktop browsers (chrome,firefox)
android browsers (chrome),
ipad safari
However, the blue "+" button is unresponsive for:
iphone (safari and chrome)
ipad chrome.
I'd also like to note that I'm able to see the same thing using the iphone simulator for Xcode: works for iphone, not for ipad.
Could you test those sites with your devices and see if you're getting the same thing?
Any ideas what it might be, or other ideas for troubleshooting?
Any ideas who I can contact to submit a bug report? I'm leaning towards a flutter issue since it's in beta, but changing the channel made no difference, and the fact that it happened all of a sudden makes me think that there could be other culprits.
This was, indeed, a bug. It's been addressed as of April 13th per this issue here:
https://github.com/flutter/flutter/issues/54269
and they merged the code into flutter here:
https://github.com/flutter/engine/pull/17595

ffmpeg.js running extremely slow in iOS cordova (but fine in iOS safari?)

I'm trying to create a phonegap app that converts videos into maybe 30 or so jpeg frames..
This page converts a bigbuckbunny video into 30 frames > https://www.pewify.com/test/ (taken from https://bgrins.github.io/videoconverter.js/demo/)
It runs fine on an iPhone x running iOS 12 in mobile safari, it takes about 12-15 seconds to complete, but the same code packaged into a iOS cordova app running on the same phone will take almost 160 seconds to complete (both end results the same, but almost 10x as long), it works fine for android browsers or an android cordova app though
I'm using cordova android 7.0 and cordova ios 4.5.4 (phonegap cli-8.0.0) for the app
I've tried removing all unneeded plugins with just the bare minimum code but to no effect, it still runs just as slow
From what i understand phonegap is just using a webview similar to safari to render the app but in this case it works but much slower, on top of that the phone starts to get heated up (presumably doing some intensive CPU?)
Did read something about using WKWebview being faster in cordova instead but that messes up the app with lots of CORS and 'operation insecure" errors so have decided not to implement that for now (unless that is the solution?)
Hopefully someone can point me in the right direction as i'm not exactly sure what is the issue here as it works somewhat flawlessly in android (both chrome and phonegap) but only in iOS safari and not the phonegap app
Ok solved it, it was indeed WKWebview and it executed normally. I read somewhere that the webview in cordova and the webview in mobile safari is different hence the difference in speed (nitro js engine?)
For anyone interested, I used "cordova-plugin-wkwebview-file-xhr" to enable WKWebview and certain fixes to bypass CORS issues,ran the same code on it (had to use an inline blob when creating the worker though to bypass , taken from here Web workers without a separate Javascript file?)
Video conversion now runs as expected (12-ish seconds), hopefully this helps someone who might be facing slow execution of code on iOS phonegap..

Polymer WebApp hosted on Firebase after update to iOS 10 start from homescreen stops working

A Polymer Progressive Web App based on PolymerStarterKit 1.3.0 works on all platforms (Windows with Chrome, Firebase, IE or MAC Safari, Android with Chrome and iOS with Safari etc).
After updating my Test-iPhone to iOS 10.0.2 it is no longer possible to start the application from the home screen. A blank screen is shown.
When I use Safari on the iPhone, the page is displayed after a second load.
There is an issue reported on Github. Looks like the issue I have shown here. The hint comes from firebase-support.
News:
Updated webcomponentsjs in my app to 0.7.23. Same issue with my Test-iPhone5 iOS 10.x. as described above. Strange is that my users with iPhone6 or 6s have no problems using the app.

Debugging PhoneGap on Device

Normally I'm a JEE guy but these days I'm working on a mobile app. I chose PhoneGap because there are not so many needs to UI and I thought this would be the easiest way to serve the app on many platforms.
I'm wondering if my setup is good and if it's possible to get console output when running on the device. I'm working on MacOS and iPhone6.
I installed PhoneGap and Cordova via npm and serving the files with phonegap serve.
For local debugging I'm using the chrome plugin "Ripple".
For debugging on the device I'm using the PhoneGap Developer App from the AppStore, together with weinre on my Laptop to get some debugging data. In weinre I can see everything except console outputs. Is this normal? Or any idea how I could get the console to weinre, too?
I also found some tutorials on the web using XCode and some native iPhone emulator but didn't get this working yet. Which way is the more preferable way of debugging on device?
You don't need any tool for debugging cordova app. For iOS just start the app in stimulator and start safari. In safari go to Develop > 'your pc name' > ios simulator.
http://webdesign.tutsplus.com/articles/quick-tip-using-web-inspector-to-debug-mobile-safari--webdesign-8787
For Android run the app in your device and in the chrome go to http://chrome://inspect/#devices
Weinre is quite old and should not be be used anymore, instead, you want to use the remote debugging tools in your browser. For iOS, you can use Safari to debug your Cordova app. I've got a full article here, https://dzone.com/articles/overview-mobile-debugging, but the process involves doing one setting on your mobile device, and then simply opening up Safari and going to the debug menu. You can also do this with Chrome and Android apps.
Another option is GapDebug (https://www.genuitec.com/products/gapdebug/) which lets you do iOS and Android together in one Chrome tab.

Resources