PhoneGap loading although script is running - javascript

I am developing a reasonably large application on PhoneGap version 2.8 for Android. The issue that I can't seem to fix or even understand why it is happening is described as follows. When I start the application, initially a white screen is shown, which is completely fine since I undestand that it takes a moment or two to launch cordova. I have added a plugin to the project that puts the application to the background when user clicks "back" button in the "home" view. I can see that my app is still running in the task manager which is all fine and dandy. If I click on the app to bring it to foreground, app returns to foreground but views blank white screen for ~3 seconds, after which my view is rendered. I am wondering if there is any way I could speed up whatever the process is going on. I have noticed that it doesn't happen if my app isn't installed with APK but is run by IDE in debug mode (in which case it runs instantly just like any other normal app), but it still persists, if I click on the app icon in the apps menu.
I know that onDeviceReady event is fired way before the blank screen is gone. I know that some html is added into DOM tree. By the time white screen disappears even my ajax request is back with more data to be displayed on the screen. I know that whatever is, that effect is not because of my scripts being loaded in.
I suspect that this is effect is due to Phonegap taking a moment to restore it's Activity, or WebView to restore (if that makes sense).
I have tested that on different physical devices (Galaxy S2 and S3, HTC One X).
There is alot of optimization still to be done (memory is leaking somewhere, and there seems to be alot of performance issues with older phones eg. HTC One V).
I have tried to show Splashscreen while the white screen is up, but it is hard to estimate, when i should hide it (javascript seems to be running asynchroniously in relation to white screen).
Perhaps anyone would be kind enough to explain what is causing the white screen to be present and what could be done to resolve that issue.
Much obliged,
Erich

Related

HTML5 website running geolocation and audio output while phone screen is off?

Very similar questions in the past:
HTML5 website running while phone screen is off?
HTML5 mobile app running while phone screen is off?
But now it's 2020... and just a few months ago this worked on firefox. I created a small test page that should "speak" every ~10 seconds and tell you the x/y offset in meters from when you first loaded the page. When the screen is on it also shows you this on a map.
https://supplyrunner.netlify.app/test0/index.html
When the screen was turned off I could not get this working using chrome on my android phone but it worked with firefox. I didn't think the support would get dropped so I didn't note the version of that browser. Now it no longer seems to work with the latest firefox, chrome, or Opera (with the screen off).
Is there anything I can do to tell these browsers to continue running in the background? I looked at requesting wakelocks (https://developer.mozilla.org/en-US/docs/Archive/B2G_OS/API/Navigator/requestWakeLock) but that didn't work on firefox and had no effect on chrome.
Is there another browser I can use that has more reasonable behavior or options? I believe a user should have the option to run webapps in the background, even if it means explicitly running the browser in a different mode (similar to incognito) for the sake of security and transparency.
Is there anything I can do in my JS code (web workers?) to force some code to run in the background? Can this code access geolocation and the speech API (so it can talk to the user).
Worse case option: Are there any apps I can run that would simulate a screen lock such that a user could run the webpage, then run this app instead of locking their screen, allowing the page to continue running while the screen turns black and becomes unresponsive to touch (so they can put the phone in their pocket), but the OS doesn't register this as a "screen off" event?
Are there any other alternatives that I haven't thought of?
Note that I have an application that requires background geolocation and access to audio out (to speak or play sounds). This was originally written as a native android app but in the past year I have refactored it to be a webapp to avoid issues with google API keys and licenses, to make it OS agnostic (iOS and android), and also to make it much simpler to extend and customize. Going back to a native app is not an option.
Edit:
Here is a simpler page that shows the same issue (with no map) in less than 50 lines of JS/html combined: https://supplyrunner.netlify.app/test1/index.html
I noticed that firefox on android actually still allows some things, like youtube videos, to keep running media in the background with the screen off, but seems to no longer run JS so window.speechSynthesis.speak() and navigator.geolocation.getCurrentPosition() don't work.

Expo bug - After a crash, the Android Back Button causes standalone app to be put into the background

We’re running into an issue where after the app “crashes” and reloads (user gets kicked back to the first screen), whenever the user presses the Android Back Button, the app gets put into the background. I was able to reproduce this with the default “Tabs” project that’s provided by CRNA on Expo 31 SDK (link: https://exp-shell-app-assets.s3.us-west-1.amazonaws.com/android/%40allen.lin/split-screen-poc-c25e728a483c4c71ba9109ac70a93ef1-signed.apk 1) with no additional code added. The current work around is to have the user open up the app switcher and kill and re-open the app.
Here are some steps to consistently reproduce it on a Google Pixel 2 Phone (or any other phone with the split-screen feature), which will cause the app the reload:
Open the app.
Tap on any of the tabs to switch to different screens (i.e. “Links”). Pressing the Android Back Button should put the user back to the “Home” tab.
From here, activate the split-screen feature by long-pressing the Square icon located at the bottom of the device (where the Back and Home buttons are). This will cause the app to crash and reload.
Get out of the split screen view by dragging the black horizontal bar at the center of the screen to the bottom of the screen so that the app is focused again. This will again cause the app to crash and reload.
Tap on the “Link” tab again.
Now press the Android Back Button. The app should be minimized.
I tried looking at ADB Logcat but there was too much noise in the logs. One line did stick out when I grep’d the logs for ‘exception’ though:
12-05 16:03:07.137 23448 23448 E j : Runtime exception in RNObject when calling method getCurrentReactContext: java.lang.NullPointerException: null receiver
I also saw some calls to moveTaskToBack() being made when the back button is pressed.
Just to be clear, this is not linked to the Split-Screen feature on Android devices. One of my colleagues was able to reproduce this on his XiaoMi A1M1 device (running Vanilla Android 8.1.0 – he’s on the Android One program) in our main Expo app (SDK 30). His device does not have the split-screen feature and he still saw this problem. I think our actual app might’ve crashed on his device due to some code problem.
Is this a known issue in Expo? Is there a workaround to avoid this Android Back Button problem?
EDIT: Being tracked by Expo engineers here: https://github.com/expo/expo/issues/1786. Main problem on Android seems to be memory pressure causing apps to get killed.
Might be a react-native issue.

Noticeable pause and stutter between page navigation

I recently started uses Onsen-ui, and I am having a lot of fun with it.
I am using crosswalk for my Android application and this has gotten rid of almost every performance issue I've had. Pages scroll smoothly and everything is super responsive!
The only issue that remains is that there is a noticeable stutter between page changes. When I tap the button to go back (or to navigate forward to another page), the app will seem to 'pause' very briefly (similar to the 300ms click issue, but not the same because everything else is instantly responsive), then it will proceed to play the first one or two frames of the page transition animation, stutter again, and then complete the animation smoothly.
This is very jarring and really ruins the experience in an app where you navigate from page to page frequently!
I don't known what's causing the issue, but if I had to guess I would say that the first stutter is caused by AngularJs loading in the template data and the second is AngularJs actually processing the data once it is loaded (binding to all the properties - or whatever the correct term is! I'm new, forgive me :) ). Maybe the issue could be resolved by caching templates if angular supports such a thing?
Of course this is just a guess, love to hear if you guys had similar issues and would love a solution!
Note that this is tagged as Android + Crosswalk, but I don't mean to single out Android. The issue might be persistent in iOS too, but I don't have an iOS device to test on.

jQuery mobile panel not fully rendering on device

I have been creating this app for mobiles using Phonegap and jquery mobile, all has been going well until I try and run it on my actual device (HTC Flyer Android 3.2.1). There appears to be some kind of rendering issue.
Just to note this only appears to happen on device, not when using an emulator, or in a browser on my computer. When I slide right to open the settings panel it does not fully render. Pictures will show this better:
This is what is supposed to happen when the panel opens:
But this is what actually happens:
When I touch the button or heading on the panel it seems to refresh itself and render's fine, which is odd, as both of the above are screen captures form device.
Upon discovering this I added this code:
$("#SettingsPanel").trigger("create");
To see if recreating it would help. I know this isn't a great thing to do preformance wise but I had no other idea's
I wanted to test on another more powerful device to see if it was a performance thing, but I don't have any other devices to test on.
So now I'm stuck and I'd like some help please.

Mobile Safari crash first time page is loaded

I've built a Javascript-heavy web app and recently tweaked it to work on iPad (it needed tweaks because it allows drawing by moving the mouse around, and onmousedown/onmousemove would not get triggered until finger release).
Now, with the tweaks, the app runs fine on Mobile Safari. I'm seeing a problem, however, where the first time I try to load the app on the iPad, it often crashes Mobile Safari. However, reopening the browser and refreshing the page loads the app perfectly and it's fully usable. After doing some research I found out that the most common cause for Mobile Safari crash is over 6MB of pictures or multiple pictures loaded through Javascript. My app only uses images for icons, so the total image size is actually very small (probably under 100KB total), my JS code, however, is 2.5MB uncompressed and 350KB compressed using gz (which is how I'm sending it to the client).
I've also read that loading images through CSS can avoid crashes due to the image size limit. I figured it was worth a try since it's also possible the crash is due to large number of images, not just total image size. After changing some of my icons to be rendered using CSS background-image property, the crash seemed to have gone. I decided to go a step further and tweak all other icons to render using CSS backgrounds as well. After changing all of my images to be rendered using CSS, all of a sudden the crash seems to be back.
Which leads me to several possible conclusions:
A.) Even the partial CSS fix I made did not actually help but somehow I got extremely lucky and saw no crash while reloading my app and restarting the iPad multiple times (then the crash is likely somewhere with my JS code or other parts of the page)
B.) I introduced some other issue when changing the rest of my icons to load through css (if that's the case, I wouldn't expect reloading the page to fix the issue, but it does)
C.) The crash is due to something in my Javascript unrelated to images (but then why does it load and work correctly after reload)
D.) iPad chokes when trying to render/uncompress that much Javascript at once (I haven't heard of this being an issue, but it's also rare to see a chunk of Javascript this big)
Does anyone know what other issues aside from 6MB image limit can cause Mobile Safari to crash the first time a page is loaded, but not the second?
If it helps, here is the link to my web app (this is the old version that loads images through JS): http://www.grafpad.com/grafpad/canvas/demo (it's written in Pyjamas, which is why there is so much generated Javascript).
Thanks
You need to remember that compared to your desktop the iPad is seriously underpowered. Its particularly limited in memory. I noticed right away that there were many, many script blocks on the page. Without tearing your app apart completely to try and find the culprit you might start by combining, just to see if its just dealing with that many nodes that is causing the crash.

Categories