Anyone familiar with phonegap ? [resolved]

[SBSP]

I created an app and its running like a dream! Only problem is if I leave it open and go back to the home screen it will still continue to work for a short while but then pauses and goes to sleep.

For the last couple of days now I have been trying to get it to run in the background but for the life of me I just cannot get it right.
I tried various libraries and most of their documentation refers to Cordova with a slightly different project folder structure and it isnt working out for me.

Anyone willing to share a basic project with background service functionality with me that I can learn from (Very basic please I'm still new to this)

 

[scudsucker]

I am familiar with PhoneGap.

I used it in a year long project, in theory as a way to get a cross platform project going quickly.

I do not have an example project to show background services running; but based on the aforementioned experience... if you can, do not use PhoneGap. Do your best to get native platform app devs; it's going to be much more expensive but also much more chance your app will succeed.

People have used PhoneGap and succeeded; but I don't think it's a great idea. When you hit a problem like yours it's time to go to native code because fixing the problem in PhoneGap is going to be too much complicated and research-heavy work.

Basically nothing current is sufficiently decent cross platform. It's possible but bad. We can wait a year or two until Apple, Microsoft & Android agree on some software standards

 

[SBSP]

Thanks scudsucker. Advice taken. Will most certainly get into doing things natively.
I 'm still going to try and get this to work though. I really need this app to work. I'm desperate!

 

[[)roi(]]

Basically nothing current is sufficiently decent cross platform. It's possible but bad. We can wait a year or two until Apple, Microsoft & Android agree on some software standards

They're not going to agree; why would they ever support a solution that makes it easy for their customers to switch to their competitors.

Plus hardware, operating system and UI/UX differences alone make this a flawed task from the onset; the compromises to achieve even a moniker of interoperability, only end up being passed to the customers, and I don't know about you, but I certainly don't stick with any app that makes those types of compromises.

 

[Kosmik]

Phonegap/ionic/cordovo are great for cross system apps within reasons. If it's a app that just needs to work similar to a basic crud or display function then your fine. As soon as you touch very hardware specific actions or background tasks, native makes more sense. Some hardware is still fine ie: GPS and camera, items that use standard libraries but more specific or specialised can be an issue and as someone said, it can be more trouble than worth trying to make it cross platform vs specific.

 

[[)roi(]]

Phonegap/ionic/cordovo are great for cross system apps within reasons. If it's a app that just needs to work similar to a basic crud or display function then your fine. As soon as you touch very hardware specific actions or background tasks, native makes more sense. Some hardware is still fine ie: GPS and camera, items that use standard libraries but more specific or specialised can be an issue and as someone said, it can be more trouble than worth trying to make it cross platform vs specific.

Aside from what you already covered re limitations; the biggest issue overall is an inconsistent UX on the target platform; that on its own should be a deal breaker. Honestly if your requirement is so lightweight then I'd ask why it's an app in the first place? Just create a web page.

 

[Kosmik]

Aside from what you already covered re limitations; the biggest issue overall is an inconsistent UX on the target platform; that on its own should be a deal breaker. Honestly if your requirement is so lightweight then I'd ask why it's an app in the first place? Just create a web page.

Some folks prefer but the same services that power the webpage, power the app so it's just another frontend really.

 

[[)roi(]]

It's often easy to spot a webview based app. Clunky and leave you feeling like someone tried to reinvent the phone UI. React Native is closer and a better overall UX.

Still can fairly easily spot the React Native apps; they're generally memory hogs and no where near as responsive, plus the UX is usually not consistent with the target platform.

 

[FatBoySlim]

I use PG quite extensively, haven't needed background services yet though, have you searched on NPM they have quite a number of plugins, can't say ive tested or used them. Not sure how much time you have but I don't mind sussing it out this week and giving you some feedback.

 

[SBSP]

For what it's worth. I finally got it to work.

But unfortunately not with PhoneGap. I used stock cordova and then added this library
https://github.com/katzer/cordova-plugin-background-mode by running

$ cordova plugin add cordova-plugin-background-mode

and copied the the PhoneGap project files over to the new cordova project. Been running for 3 hours and its still active.

You have to enable and send the app in to BG mode. Altough there is functionality to override the back button to send to BG mode instead of closing the app which I havent tested yet, I dont see anything for when you press the home button.

[EDIT]
Some sample code if anyone ever come across this post in future.

Start a new project ,

$ cordova create hellobackground com.example.hellobackground "Hello Background"

$cordova platform add android

$ cordova plugin add cordova-plugin-background-mode

Replace index.html and index.js contents with the below.
index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
    <!-- This is a wide open CSP declaration. To lock this down for production, see below. -->
    <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />
    <!-- Good default declaration:
    * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
    * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
    * Disables use of eval() and inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
        * Enable inline JS: add 'unsafe-inline' to default-src
        * Enable eval(): add 'unsafe-eval' to default-src
    * Create your own at http://cspisawesome.com
    -->
    <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: 'unsafe-inline' https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *" /> -->


    <title>Cordova Background  - Example</title>
    

</head>

<body>
    <div class="app">   

                    <button  class="btn  btn-md btn-default" id = "idEnableBGMode">Enable BG Mode</button>                   
                    <button  class="btn  btn-md btn-default" id = "idDisableBGMode">Disable GB Mode</button>
                    <button  class="btn  btn-md btn-default" id = "idCheckBGMode">Check BG Mode</button>
                    <button  class="btn  btn-md btn-default" id = "idPushtoBG">Push to BG</button>           
                

        

            
    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
        app.initialize();
    </script>
</body>

</html>

index.js

var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // 'load', 'deviceready', 'offline', and 'online'.
    bindEvents: function() {
        
    },
    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 'receivedEvent'
    // function, we must explicitly call 'app.receivedEvent(...);'
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
        

        
    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);

    }
};

//**********************************************************************************************
//BOF BUTTON DECLARAES
//**********************************************************************************************
document.getElementById("idCheckBGMode").addEventListener("click", funcCheckBGMode);
document.getElementById("idEnableBGMode").addEventListener("click", funcEnableBgMode);
document.getElementById("idDisableBGMode").addEventListener("click", funcDisableBgMode);
document.getElementById("idPushtoBG").addEventListener("click", funcPushtoBG);
//**********************************************************************************************
//EOF BUTTON DECLARAES
//**********************************************************************************************

//**********************************************************************************************
//BOF Functions
//**********************************************************************************************
function funcCheckBGMode()
{
    var BGMode=cordova.plugins.backgroundMode.isActive();
    alert(BGMode);
}
function funcEnableBgMode()
{
    cordova.plugins.backgroundMode.enable();
    cordova.plugins.backgroundMode.disableWebViewOptimizations();
}
function funcDisableBgMode()
{
    cordova.plugins.backgroundMode.disable();
}
function funcPushtoBG()
{
    cordova.plugins.backgroundMode.moveToBackground();
}
//**********************************************************************************************
//EOF Functions
//**********************************************************************************************

//**********************************************************************************************
//BOF Timers
//**********************************************************************************************

//**********************************************************************************************
//EOF Timers
//**********************************************************************************************

 

[FatBoySlim]

For what it's worth. I finally got it to work.

But unfortunately not with PhoneGap. I used stock cordova and then added this library
https://github.com/katzer/cordova-plugin-background-mode by running

$ cordova plugin add cordova-plugin-background-mode

and copied the the PhoneGap project files over to the new cordova project. Been running for 3 hours and its still active.

You have to enable and send the app in to BG mode. Altough there is functionality to override the back button to send to BG mode instead of closing the app which I havent tested yet, I dont see anything for when you press the home button.

[EDIT]
Some sample code if anyone ever come across this post in future.

Start a new project ,

$ cordova create hellobackground com.example.hellobackground "Hello Background"

$cordova platform add android

$ cordova plugin add cordova-plugin-background-mode

Replace index.html and index.js contents with the below.
index.html

Enable BG Mode 
Disable GB Mode
Check BG Mode
Push to BG

index.js

var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {

},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicitly call 'app.receivedEvent(...);'
onDeviceReady: function() {
app.receivedEvent('deviceready');



},
// Update DOM on a Received Event
receivedEvent: function(id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');

listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');

console.log('Received Event: ' + id);

}
};

//**********************************************************************************************
//BOF BUTTON DECLARAES
//**********************************************************************************************
document.getElementById("idCheckBGMode").addEventListener("click", funcCheckBGMode);
document.getElementById("idEnableBGMode").addEventListener("click", funcEnableBgMode);
document.getElementById("idDisableBGMode").addEventListener("click", funcDisableBgMode);
document.getElementById("idPushtoBG").addEventListener("click", funcPushtoBG);
//**********************************************************************************************
//EOF BUTTON DECLARAES
//**********************************************************************************************

//**********************************************************************************************
//BOF Functions
//**********************************************************************************************
function funcCheckBGMode()
{
var BGMode=cordova.plugins.backgroundMode.isActive();
alert(BGMode);
}
function funcEnableBgMode()
{
cordova.plugins.backgroundMode.enable();
cordova.plugins.backgroundMode.disableWebViewOptimizations();
}
function funcDisableBgMode()
{
cordova.plugins.backgroundMode.disable();
}
function funcPushtoBG()
{
cordova.plugins.backgroundMode.moveToBackground();
}
//**********************************************************************************************
//EOF Functions
//**********************************************************************************************

//**********************************************************************************************
//BOF Timers
//**********************************************************************************************

//**********************************************************************************************
//EOF Timers
//**********************************************************************************************

Fantastic, happy to see you came right with it.