"localhost" means "this machine", so if you try to connect to localhost from a mobile device, it will try to connect to itself, but you don't have a server on the device, you have it in your computer, so you have to use the computer local IP.
I suppose it's the same IP that Desktop app uses, so you should change your url from localhost:8888 to 192.168.4.109:8888.
Thank you for your reply.
It is true I can swap between using localhost and 192.168.4.109. However, the issue remains the same. PhoenGap desktop for instance is using port 3000, and MAMP is using port 8888 and in that case the PhoneGap App will not be able to talk to the MAMP server (i.e. PhoneGap and MAMP are using two different ports). If we set them both to port 3000 or 8888, then PhoneGap desktop will refuse to start the server (i.e. ports overlapping)
The truth is I haven't tested it on the developer app, but doing what I told you and using the CLI to compile the app works. Not sure if using the developer app might cause the connection to the local IP to fail.
What I know is that you have to use different ports, the desktop app uses a server to stream the files to the developer app, and you have a mamp server with your database and it uses another port. You can have all the servers you want on your development computer as long as every server use a different port and you use that port to connect to that server.
If you want to make sure that the connection between the phone and the computer works and the MAMP server is accesible, put http://192.168.4.109:8888 on mobile safari or mobile chrome and see what happens. If you are able to see the server message, then the desktop or the developer app is messing with something. You can then upload the files you have on the MAMP server to a free webserver on internet and connect to it instead of using a local server.