Can mobile web apps run in the background? (iOS & Android) - javascript

Can mobile web apps run in the background? I'm mostly interest in iOS & Android.
Thanks!

Since this is a situation that changes almost daily, I'll post an updated answer. This applies to the recent releases of these browsers but may change tomorrow!
My music app is HTML5 and needs to run in the background. The support for that varies depending on mobile browser.
Safari on iOS: will continue to play one or two songs in the background
Native browser on Android: will play one song then stops
Firefox on Android: will stop when screen locks or browser loses focus or song ends
Dolphin on Android: plays in background but eventually stops
Opera on Android: Excellent background support! Javascript continues to run and music continues to play even when screen is off or Opera is sent to the background. Opera even puts a play/pause toggle into the notification page. Yay.
Here is a related SO question.

Nope, they can't. On Android you could conceivably install a different browser, but it's not possible on the stock one. #jgillman points out the exception of audio in iOS but that's the only exception I'm aware of.

iOS allows audio from a web app (Mobile Safari) to be played in the background. I don't know about other events though.

You can't run web app in the background. To enable most of the native features, you should develop native application.

At the time of this answer, Firefox mobile and Opera mobile for Android do allow javascript to run in the background, even with the screen locked.

Related

Scrolling differences on Safari and Chrome (iOS) can you test for them?

It used to be (before iOS 8) that Safari couldn't natively animate on scroll, you had to stop scrolling to see the animations. Safari solved that issue, but when accessing the same website on Chrome (running in iOS) the issue persists. I read that chrome hasn't yet updated this on iOS. I know that it works great on Android... so... Is there a way to test for this "feature" either with modernizr or other js? I would like to disable animations on scroll if they are not supported. I've been able to accomplish this by checking which browser the user is using, but it would be easier if I could just check whether the functionality is available.
Before iOS 8, iOS would pause painting while the user was scrolling. This behavior was discontinued for applications using WKWebView but remains for browsers using UIWebView — this is why you only see the old behavior for certain third-party applications.
One approach is to detect whether your page is loaded inside WKWebView or not. An answer to another question suggests testing for indexedDB support. indexedDB is the only HTML5 feature difference between the WKWebView and UIWebView.
The snippet from the other answer suggests how to do this:
if (navigator.platform.substr(0,2) === 'iP'){
//iOS (iPhone, iPod or iPad)
if (window.indexedDB) {
//WKWebView
}
}

Change browser's background color (Internet Explorer Mobile)

I'm developing a mobile web application on Windows Phone.
I chose Cordova as my platform for developing a native app using a WebView.
My problem is that when I'm scrolling to the top/bottom of the page and pull it. Internet Explorer shows what's behind the page : a white background.
Though Internet Explorer has the same behavior when displaying web pages, I would like to know if there is any way (using HTML, CSS or JS) to change this color or simply prevent the browser from showing it.

Avoid screen locking on mobile website

Is there any way of preventing a device to "sleep" when on the website?
(Desirable because of playing YouTube videos from a device on a website)
Look at this post
Prevent iOS mobile safari from going idle / auto-locking / sleeping?
It seems like it is currently not possible to implement. Youtube has this feature because they are using quicktime that keeps the device awake.

Get continuous scroll events in iOS Chrome

In Safari Mobile on iOS <8, all Javascript was paused while the user was scrolling. Since the release of iOS 8, this is no longer the case, as you can read here:
http://developer.telerik.com/featured/scroll-event-change-ios-8-big-deal/
This is great news. Executing Javascript while scrolling (if done right), opens the possibility for many usability enhancements (like sticky menus) and effects (like parallax).
Is there a way to get the same thing in Chrome Mobile on iOS?
The same website states that the first mobile browser that supported live scroll events was Chrome on Android 4.0. If that's the case, why is it still disabled in the newest Chrome on iOS?
This might be the answer:
https://code.google.com/p/chromium/issues/detail?id=423444
If the new Javascript handling is tied to the new Nitro Javascript Engine used in Safari Mobile (and in WKWebView), then we will have continuous scroll events in Chrome Mobile as soon as they switch to use WKWebView instead of UIWebView.
EDIT: As of version 48.0.2564.87, Chrome uses WKWebView on iOS, and continuous scroll events are working!

Device Motion API on android should work

For some reason, when using a Galaxy S3, I'm able to use the example demo from HTML5Rocks about Device Motion and get acceleration values from the phone's hardware.
Demo: http://www.html5rocks.com/en/tutorials/device/orientation/devicemotionsample.html
But I can't seem to get the code working on my own website. It should just be:
if((window.DeviceMotionEvent)||('listenForDeviceMovement'in window))
{window.addEventListener('devicemotion',deviceMotionHandler3,false);
function deviceMotionHandler3(eventData){var
acceleration=eventData.accelerationIncludingGravity;
...
Any ideas why this code would work for the website above, but not when I copy it into a blank html page?
Are you sure the device you're testing on supports detecting device motion?
Are you accessing the web page from a mobile device browser?
When I click on the link you provide from my PC I'm told that the device doesn't support the device motion event.

Categories

Resources