Reputation: 6849

Phonegap web app in regular desktop browsers

If I develop a web app in phonegap, can the same web app be made to run in regular desktops/laptops inside a browser?

Upvotes: 41

Answers (18)

TimJowers2

Reputation: 228

You can install an Android VM and run it on your desktops/Macs/Cisco office terminals/phones/etc. What you are probably asking is if you can have a single code base. The answer is 99% yes. You need a few "extra" files for phonegap (index.html, config) but other than that you can deploy the same code to both places. It works fine. Well, there are "gotchas" such as <input type="number"> not working right on some phones/tablets and datalist not being supported in current Android version and a bunch of others. Also issues with layout which you can address somewhat with media-query. But, yet, same code base in both places. Just do AJAX to webservices and its all good. HTML lives locally within your app, if you want.

The PhoneGap app is 99% identical to the WebApp. In fact, the exact same folder is zipped and uploaded to build.phonegap as is copied to the web portal. Exactly as stated above, you can use the same web app and it DOES run in a web browser. BTW, you can use the camera from HTML/js and DO NOT need PhoneGap-specific code. Same for GPS (though you'll need some robust code to make it work on many of the phones). Accelerometer and other hardware would of course be exceptions; but, duh!

In fact, my answer is one of only two which points out lots of the issues you'll hit. Also, need to point out the mess of device pixels. You can finesse with CSS and percentage layout and then use media-query to add custom CSS mods for tablet, newer phones, etc. It becomes a mess of course. You end up making nearly custom screens for tablet, phone, and other display sizes if you want even better support. Then you learn to make UI widgets/fragments/whatever and make them smart. A simple example is using jquery datatable and changing the columns when on smaller devices (hide lower information content columns). Etc. Change radio buttons to selects and such on smaller phones. And so on. Of course, you'll end up having to invent your own droplist or using one from jquery UI etc since the Android tablet implementation of html select blows.

Upvotes: 0

codevision

Reputation: 5560

Right now you could use browser platform together with Cordova.

You could install it using regular Cordova CLI command cordova platform add browser

Then installing standard Cordova plugins they provide same programming interface as on the device. Forexample take a look at https://github.com/apache/cordova-plugin-camera/#supported-platforms. Howether support not 100% compatible with device, but Cordova team try bring as much as possible compatible solution to browser as a platform

Upvotes: 2

GowriShankar

Reputation: 1654

Using Ripple Emulator in chrome you can run you phonegap app.

PhoneGap is an application framework that enables you to build natively installed applications using HTML and JavaScript.

The easiest way to think of PhoneGap is a web view container that is 100% width and 100% height, with a JavaScript programming interface that allows you to access underlying operating system features.

More Detail about Phonegap

Upvotes: 0

Vinod Ratnakar

Reputation: 29

There is a tool to run any android app on the system. the tool name is 'bluestack' it can run any android app on systems.

Upvotes: 0

PRBEHERA8

Reputation: 31

It will definitely run on desktop, IF you do it in right way.

I do this with many of my apps,But it`s good to wrap your device specific event listeners like:

onDeviceReady: function()  {

      // Your Code  for Device event listner

    },false);

And initialize the function

document.addEventListener("deviceready", onDeviceReady, false);

Upvotes: 0

don_garstino

Reputation: 21

If your phonegap application doesn't depend on any native code, then yes you can simply use the html, css & js files needed to create a web application. If your phonegap app uses any phonegap plugins or phonegap specific javascript calls, then you simply need decided on how these should be implemented on a web application.

Upvotes: 1

Paul Beusterien

Reputation: 29582

Check out the Ripple Chrome plugin to run PhoneGap apps along with device-type emulation in the Chrome browser.

Upvotes: 29

Suraj Shaha

Reputation: 31

Try this : https://github.com/icblenke/phonegap-mac

I tried one sample and it worked great..Hope this Helps!!

Upvotes: 0

Amnon

Reputation: 2898

I was surprised that I could find no simple way to test the application in a desktop browser so I started a GitHub project that makes the process a no brainer. Currently only a limited number of plugins are emulated, but I'll add more and hopefully contributions will help complete the other plugins faster. Also planned is support for selecting different screen sizes and other customisations. Hope it helps.

Upvotes: 1

pppontusw

Reputation: 454

It will definitely run on desktop and on a webserver whatever, IF you do it right.

I do this with many of my apps and things to note is:

CORS is allowed in PhoneGap but may not be on Desktop browsers
Cordova/PhoneGap APIs won't work and can throw errors if you try to call them

Good practice is to wrap your device specific event listeners etc. in the onDeviceReady function as:

    onDeviceReady: function() {
    // Register the device event listeners
    document.addEventListener("backbutton", function (e) {
        console.log("default prevented");
        e.preventDefault();
    }, false );
    document.addEventListener("resume", onDeviceResume, false);

and register that in the initialize function

document.addEventListener("deviceready", onDeviceReady, false);

Apart from that I use a primitive function to assign the variable "phonegap" that I can reference if I need to know what platform we are on, or if we are desktop (in which case it will be false).

    isPhoneGap: function() {
    var is = false;
    var agent = navigator.userAgent.toLowerCase();
    var path = window.location.href;
    if (path.indexOf("file://") != -1) {
        if (agent.indexOf("android") != -1) {
            is = "android";
        } else if (agent.indexOf("iphone") != -1 || agent.indexOf("ipad") != -1 || agent.indexOf("ipod") != -1) {
            is = "ios";
        } else if (agent.indexOf("iemobile") != -1) {
            is = "wp";
        }
    }
    return is;
},

Not super pretty but hope this helps.

Upvotes: 5

Pete

Reputation: 4622

As Remy said, most of the standard stuff you write will be fine, but you'll need to wrap certain methods that use the camera/accelerometer to see if you're in an app or not.

Athough a better solution is to use feature detection, as you can upload pictures and use the camera with the HTML input in a mobile website, I'm pretty sure you can access the web cam in certain versions of Desktop Chrome now.

If you want to build a properly universal app, you'll need to use lots of feature/device detection, or have a central core product, and use something like Git Submodules to include and extend it as a Phonegap app.

There is no single, easy, standardised way of doing it.

Upvotes: 0

MugosDynamic

Reputation: 99

Not in browser but Phonegap have Windows 8 support so if you compile your application as here

; you can run your application just on w8 but i didn't try that.

Upvotes: 5

Flavio Bontà

Reputation: 164

if you use a mac, open terminal and disable web security

open -a /Applications/Google\ Chrome.app --args --allow-file-access-from-files --disable-web-security

open your homepage.html and ENJOY :)

Upvotes: 0

Raghav

Reputation: 655

Since the phone gap applications are build using JS, HTML and CSS, You can access these HTML file and run in browser. but your code has access to any device specific calls then it will throw error.

Upvotes: 0

Antoine

Reputation: 558

You can also try to run your app in Chrome by using the --disable-web-security command line option. It will allows you to perform some "mobile" operations like cross-domain requests etc.

Hope this helps !

Upvotes: 0

pentaphobe

Reputation: 347

MacGap is quite an active project and seems to support the API quite well.

Alas it is only for Mac OSX, but might work as a good jump-off point?

Upvotes: 2

vf.

Reputation: 103

DesktopGap use embedded Chrome browser instead of IE. There is only Windows version.

Upvotes: 5

Remy Vanherweghem

Reputation: 3955

Yes...and no: Your webapp will run in desktop browsers yes, as it is made of html, css and javascript. The phonegap specific javascript calls (accelerometer, compass, file, etc) won't.

Basically, if you stick to standard yes you will be able to port relatively easily your app to most browser, the job at this point being mostly a work of theming.

Upvotes: 13

Phonegap web app in regular desktop browsers

Answers (18)

Related Questions