Cordova – PhoneGap code as a web application

By Cordova

I am considering reusing my phonegap html, css and js code as a web application.
I will go through and remove any mobile features.

< p>The purpose is to have a web application that provides certain mobile application functions. I currently use very few mobile device functions. But I guess it will be troublesome to maintain my mobile application code every time I publish it.

< p>Have any of you tried this before? Is there a tip?

Through the responsive design, your phonegap code can run on almost any device. Learn about it The operating conditions (device and operating system) are very important so that you can respond accordingly. I pre-built a window.deviceInfo object, which contains the following information:

> window.deviceInfo.type : Pocket PC, tablet, desktop
> window.deviceInfo.brand: ios, android, microsoft, webos, blackberry
> window.deviceInfo.mode: browser, stand-alone, webview
> window.deviceInfo .mobile:true,false
> window.deviceInfo.phonegap:true,false

I use a container

to call the viewport to create my responsive container, and according to the device it is on Resize.

Demo: jsFiddle

This is the setting Initialization code for all content:

initializeEnvironment();
initializeDimensions();
initializePhoneGap( function () {
 //start app 
} );

First I set window.deviceInfo.

function initializeEnvironment() {
 //window.deviceInfo. type: handheld, tablet, desktop
 //window.deviceInfo.brand: ios, android, microsoft, webos, blackberry
 //window.deviceInfo.mode: browser, standalone, webview
 //window.deviceInfo.mobile: true, false 
 //window.deviceInfo.phonegap: true, false 

 var userAgent = window.navigator. userAgent.toLowerCase();
 window.deviceInfo = {};

 if (/ipad/.test( userAgent) || (/android/.test( userAgent) && !/mobile /.test( userAgent))) {
 window.deviceInfo.type ='tablet';
} else if (/iphone|ipod|webos|blackberry|android/.test( userAgent)) {< br /> window.deviceInfo.type ='handheld';
} else {
 window.deviceInfo.type ='desktop';
 };

 if ( /iphone|ipod|ipad/.test( userAgent)) {
 var safari = /safari/.test( userAgent );
 window.deviceInfo.brand ='ios';
 if ( window.navigator.standalone) {
 window.deviceInfo.mode ='standalone';
} else if (safari) {
 window.deviceInfo.mode ='browser';
 } else if (!safari ) {
 window.deviceInfo.mode ='webview';
 };
} else if (/android/.test( userAgent)) {
 window.deviceInfo.brand = 'android';
 window.deviceInfo.mode ='browser';
} else if (/webos/.test( userAgent)) {
 window.deviceInfo.brand ='webos'; 
 window.deviceInfo.mode ='browser';
} else if (/blackberry/.test( userAgent)) {
 window.deviceInfo.brand ='blackberry';
 window.deviceInfo.mode ='browser';
} else {
 window.deviceInfo.brand ='unknown';
 window.deviceInfo.mode ='browser';
} ;
 window.deviceInfo.mobile = (window.deviceInfo.type =='handheld' || window.deviceInfo.type =='tablet' );
};

Then I adjust the viewport size and anything else that needs it. Mobile devices use window.innerWidth and window.innerHeight to occupy the entire screen.

function initializeDimensions() {
 var viewport = document.getElementById('viewport' );
 if (win dow.deviceInfo.mobile) {
 viewport.style.width = window.innerWidth +'px';
 viewport.style.height = window.innerHeight +'px';
} else { 
 //requirements for your desktop layout may be different than full screen
 viewport.style.width = '300px';
 viewport.style.height = '300px';
} ;
 //set individual ui element sizes here
};

Finally, I use window.device (note that this is different from the deviceInfo object I created) to verify that phonegap is available and Ready. When my code runs on a device that should run phonegap, I poll the object instead of relying on the finicky deviceready event. When the initializePhoneGap() callback is called, the app is ready to start.

In the entire application, I wrap the phonegap function in if(window.deviceInfo.phonegap){}.

function initializePhoneGap( complete) {
 if (window.deviceInfo.brand =='ios' && window.deviceInfo.mode !='webview') {
 window.deviceInfo.phonegap = false;
 complete();
} else if (window.deviceInfo.mobile) {
 var timer = window.setInterval( function () {
 if (window.device) {
 window.deviceInfo.phonegap = true;
 complete();
 };
 }, 100 );
 window.setTimeout( function () {//failsafe
 if (!window.device) {//in webview, not in phonegap or phonegap failed
 window.clearInterval( timer );
 window.deviceInfo.phonegap = false;
 complete();
 };
 }, 5000 ); //fail after 5 seconds
} else {
 window.deviceInfo.phonegap = false ;
 complete();
 };
};

I am considering reusing my phonegap html, css and js code As a web application.
I will pass and delete any mobile features.

The purpose is to have a web application that provides some mobile application features, the mobile device features I currently use Very few. But I guess it will be troublesome to maintain my mobile app code every time I publish it.

Have any of you tried this before? Is there a tip?

Through responsive design, your phonegap code can run on almost any device. It is very important to understand its operation (device and operating system), so You can respond accordingly. I pre-built a window.deviceInfo object, which contains the following information:

> window.deviceInfo.type: Pocket PC, Tablet PC, Desktop
> window.deviceInfo.brand: ios, android, microsoft, webos, blackberry
> window.deviceInfo.mode: browser, standalone, webview
> window.deviceInfo.mobile: true,false
> window. deviceInfo.phonegap: true, false

I use a container

to call the viewport to create my responsive container, and adjust the size according to the device it is on.

Demonstration: jsFiddle

This is the initialization code for setting up all content:

initializeEnvironment();
initializeDimensions();
initializePhoneGap( function () {
 //start app 
} );

< p>First I set window.deviceInfo.

function initializeEnvironment() {
 //window.deviceInfo.type: handheld, tablet, desktop
 / /window.deviceInfo.brand: ios, android, microsoft, webos, blackberry
 //window.deviceInfo.mode: browser, standalone, webview
 //window.deviceInfo.mo bile: true, false 
 //window.deviceInfo.phonegap: true, false 

 var userAgent = window.navigator.userAgent.toLowerCase();
 window.deviceInfo = { };

 if (/ipad/.test( userAgent) || (/android/.test( userAgent) && !/mobile/.test( userAgent))) {
 window. deviceInfo.type ='tablet';
} else if (/iphone|ipod|webos|blackberry|android/.test( userAgent)) {
 window.deviceInfo.type ='handheld';
} else {
 window.deviceInfo.type ='desktop';
 };

 if (/iphone|ipod|ipad/.test( userAgent)) {< br /> var safari = /safari/.test( userAgent );
 window.deviceInfo.brand ='ios';
 if (window.navigator.standalone) {
 window.deviceInfo. mode ='standalone';
} else if (safari) {
 window.deviceInfo.mode ='browser';
} else if (!safari) {
 window.deviceInfo .mode ='webview';
 };
} else if (/android/.test( userAgent)) {
 window.deviceInfo.brand ='android';
 window.deviceInfo.mode ='browser'; 
} else if (/webos/.test( userAgent)) {
 window.deviceInfo.brand ='webos';
 window.deviceInfo.mode ='browser';
 } else if (/blackberry/.test( userAgent)) {
 window.deviceInfo.brand ='blackberry';
 window.deviceInfo.mode ='browser';
} else {< br /> window.deviceInfo.brand ='unknown';
 window.deviceInfo.mode ='browser';
 };
 window.deviceInfo.mobile = (window.deviceInfo.type = ='handheld' || window.deviceInfo.type =='tablet' );
};

Then I adjust the viewport size and anything else that needs it. Mobile devices use window. innerWidth and window.innerHeight to occupy the entire screen.

function initializeDimensions() {
 var viewport = document.getElementById('viewport' );
 if (window.deviceInfo.mobile) {
 viewport.style.width = w indow.innerWidth +'px';
 viewport.style.height = window.innerHeight +'px';
} else {
 //requirements for your desktop layout may be different than full screen 
 viewport.style.width = '300px';
 viewport.style.height = '300px';
 };
 //set individual ui element sizes here
 };

Finally, I use window.device (note that this is different from the deviceInfo object I created) to verify that phonegap is available and ready. When my code runs on the device that should run phonegap, I will poll the object instead of relying on the finicky deviceready event. When the initializePhoneGap() callback is called, the application is ready to start.

Throughout the application, I wrap the phonegap function in if (window.deviceInfo.phonegap){}中.

function initializePhoneGap( complete) {
 if (window.deviceInfo.brand =='ios' && window. deviceInfo.mode !='webview') {
 window.deviceInfo.phonegap = false;
 complete();
} else if (window.deviceInfo.mobile) {
 var timer = window.setInterval( function () {
 if (window.device) {
 window.deviceInfo.pho negap = true;
 complete();
 };
 }, 100 );
 window.setTimeout( function () {//failsafe
 if (!window .device) {//in webview, not in phonegap or phonegap failed
 window.clearInterval( timer );
 window.deviceInfo.phonegap = false;
 complete();
 };
 }, 5000 ); //fail after 5 seconds
} else {
 window.deviceInfo.phonegap = false;
 complete();
 }; 
};

, , , , ,

Leave a Comment

Your email address will not be published.