Home » Javascript » Phonegap/vue js nothing appear on my android phone (withscreen) but it works on my browser

Phonegap/vue js nothing appear on my android phone (withscreen) but it works on my browser

Posted by: admin November 1, 2017 Leave a comment

Questions:

I’am doing a cross-platform application (android/ios), so I am using phonegap and vue js.

I run phonegap serv on my ubuntu with: sudo phonegap serv

If I go on the ip (that phonegap tell me) on my phone with the phonegap app I have nothing, just white screen, but on my browser everything works well.

I tried to use weinre to see my log (in the html I mask my ip that why I put a X but in my real file is just my ip), but in my console log I have nothing, but in inspector if I go on the div and I click on it my screen phone became blue (like when you inspect a web page) so I think the debugger work but not the console.

here my index.html:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Vue Stack 2.0</title>
    <link rel="stylesheet" type="text/css" href="css/app.css">
    <script src="http:/X:8080/target/target-script-min.js#anonymous"></script>
            <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

</head>
<body>
    <div id="app"></div>
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script> 
<!-- 
  <script src="js/materialize.js"></script>
        <script src="js/validate.js"></script>
 -->    <script src="js/app.js"></script>
        <!-- <script src="https://unpkg.com/[email protected]/dist/vue-validator.min.js"></script> -->

    <script type="text/javascript">
    app.initialize();
    $(document).bind("mobileinit", function() {
        $.support.cors = true;
        $.mobile.allowCrossDomainPages = true;
    });
    </script>

</body>
</html>

my config.xml:

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.phonegap.Societhy" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
<name>Societhy</name>
<description>Hello World sample application that responds to the deviceready event.</description>
<author email="[email protected]" href="http://phonegap.com">PhoneGap Team</author>
<content src="index.html" />
<preference name="DisallowOverscroll" value="true" />
<preference name="android-minSdkVersion" value="14" />
<plugin name="cordova-plugin-battery-status" source="npm" spec="~1.1.1" />
<plugin name="cordova-plugin-camera" source="npm" spec="~2.1.1" />
<plugin name="cordova-plugin-media-capture" source="npm" spec="~1.2.0" />
<plugin name="cordova-plugin-console" source="npm" spec="~1.0.2" />
<plugin name="cordova-plugin-contacts" source="npm" spec="~2.0.1" />
<plugin name="cordova-plugin-device" source="npm" spec="~1.1.1" />
<plugin name="cordova-plugin-device-motion" source="npm" spec="~1.2.0" />
<plugin name="cordova-plugin-device-orientation" source="npm" spec="~1.0.2" />
<plugin name="cordova-plugin-dialogs" source="npm" spec="~1.2.0" />
<plugin name="cordova-plugin-file" source="npm" spec="~4.1.1" />
<plugin name="cordova-plugin-file-transfer" source="npm" spec="~1.5.0" />
<plugin name="cordova-plugin-geolocation" source="npm" spec="~2.1.0" />
<plugin name="cordova-plugin-globalization" source="npm" spec="~1.0.3" />
<plugin name="cordova-plugin-inappbrowser" source="npm" spec="~1.3.0" />
<plugin name="cordova-plugin-media" source="npm" spec="~2.2.0" />
<plugin name="cordova-plugin-network-information" source="npm" spec="~1.2.0" />
<plugin name="cordova-plugin-splashscreen" source="npm" spec="~3.2.1" />
<plugin name="cordova-plugin-vibration" source="npm" spec="~2.1.0" />
<plugin name="cordova-plugin-whitelist" source="npm" spec="~1.2.1" />
<icon src="icon.png" />
<platform name="android">
<icon density="ldpi" src="www/res/icon/android/drawable-ldpi-icon.png" />
<icon density="mdpi" src="www/res/icon/android/drawable-mdpi-icon.png" />
<icon density="hdpi" src="www/res/icon/android/drawable-hdpi-icon.png" />
<icon density="xhdpi" src="www/res/icon/android/drawable-xhdpi-icon.png" />
<icon density="xxhdpi" src="www/res/icon/android/drawable-xxhdpi-icon.png" />
<icon density="xxxhdpi" src="www/res/icon/android/drawable-xxxhdpi-icon.png" />
<splash density="land-ldpi" src="www/res/screen/android/drawable-land-ldpi-screen.png" />
<splash density="land-mdpi" src="www/res/screen/android/drawable-land-mdpi-screen.png" />
<splash density="land-hdpi" src="www/res/screen/android/drawable-land-hdpi-screen.png" />
<splash density="land-xhdpi" src="www/res/screen/android/drawable-land-xhdpi-screen.png" />
<splash density="land-xxhdpi" src="www/res/screen/android/drawable-land-xxhdpi-screen.png" />
<splash density="land-xxxhdpi" src="www/res/screen/android/drawable-land-xxxhdpi-screen.png" />
<splash density="port-ldpi" src="www/res/screen/android/drawable-port-ldpi-screen.png" />
<splash density="port-mdpi" src="www/res/screen/android/drawable-port-mdpi-screen.png" />
<splash density="port-hdpi" src="www/res/screen/android/drawable-port-hdpi-screen.png" />
<splash density="port-xhdpi" src="www/res/screen/android/drawable-port-xhdpi-screen.png" />
<splash density="port-xxhdpi" src="www/res/screen/android/drawable-port-xxhdpi-screen.png" />
<splash density="port-xxxhdpi" src="www/res/screen/android/drawable-port-xxxhdpi-screen.png" />
</platform>
<platform name="ios">
<icon height="57" platform="ios" src="www/res/icon/ios/icon.png" width="57" />
<icon height="114" platform="ios" src="www/res/icon/ios/[email protected]" width="114" />
<icon height="40" platform="ios" src="www/res/icon/ios/icon-40.png" width="40" />
<icon height="80" platform="ios" src="www/res/icon/ios/[email protected]" width="80" />
<icon height="50" platform="ios" src="www/res/icon/ios/icon-50.png" width="50" />
<icon height="100" platform="ios" src="www/res/icon/ios/[email protected]" width="100" />
<icon height="60" platform="ios" src="www/res/icon/ios/icon-60.png" width="60" />
<icon height="120" platform="ios" src="www/res/icon/ios/[email protected]" width="120" />
<icon height="180" platform="ios" src="www/res/icon/ios/[email protected]" width="180" />
<icon height="72" platform="ios" src="www/res/icon/ios/icon-72.png" width="72" />
<icon height="144" platform="ios" src="www/res/icon/ios/[email protected]" width="144" />
<icon height="76" platform="ios" src="www/res/icon/ios/icon-76.png" width="76" />
<icon height="152" platform="ios" src="www/res/icon/ios/[email protected]" width="152" />
<icon height="29" platform="ios" src="www/res/icon/ios/icon-small.png" width="29" />
<icon height="58" platform="ios" src="www/res/icon/ios/[email protected]" width="58" />
<icon height="87" platform="ios" src="www/res/icon/ios/[email protected]" width="87" />
<splash height="1136" platform="ios" src="www/res/screen/ios/[email protected]~iphone.png" width="640" />
<splash height="1334" platform="ios" src="www/res/screen/ios/Default-667h.png" width="750" />
<splash height="2208" platform="ios" src="www/res/screen/ios/Default-736h.png" width="1242" />
<splash height="1242" platform="ios" src="www/res/screen/ios/Default-Landscape-736h.png" width="2208" />
<splash height="1536" platform="ios" src="www/res/screen/ios/[email protected]~ipad.png" width="2048" />
<splash height="768" platform="ios" src="www/res/screen/ios/Default-Landscape~ipad.png" width="1024" />
<splash height="2048" platform="ios" src="www/res/screen/ios/[email protected]~ipad.png" width="1536" />
<splash height="1024" platform="ios" src="www/res/screen/ios/Default-Portrait~ipad.png" width="768" />
<splash height="960" platform="ios" src="www/res/screen/ios/[email protected]~iphone.png" width="640" />
<splash height="480" platform="ios" src="www/res/screen/ios/Default~iphone.png" width="320" />
</platform>
<platform name="wp8">
<icon height="99" platform="wp8" src="www/res/icon/wp8/ApplicationIcon.png" width="99" />
<icon height="159" platform="wp8" src="www/res/icon/wp8/Background.png" width="159" />
<splash height="1280" platform="wp8" src="www/res/screen/wp8/screen-portrait.jpg" width="768" />
</platform>
<platform name="windows">
<icon height="150" platform="windows" src="www/res/icon/windows/Square150x150Logo.scale-100.png" width="150" />
<icon height="30" platform="windows" src="www/res/icon/windows/Square30x30Logo.scale-100.png" width="30" />
<icon height="50" platform="windows" src="www/res/icon/windows/StoreLogo.scale-100.png" width="50" />
<splash height="300" platform="windows" src="www/res/screen/windows/SplashScreen.scale-100.png" width="620" />
<icon height="120" platform="windows" src="www/res/icon/windows/StoreLogo.scale-240.png" width="120" />
<icon height="44" platform="windows" src="www/res/icon/windows/Square44x44Logo.scale-100.png" width="44" />
<icon height="106" platform="windows" src="www/res/icon/windows/Square44x44Logo.scale-240.png" width="106" />
<icon height="70" platform="windows" src="www/res/icon/windows/Square70x70Logo.scale-100.png" width="70" />
<icon height="71" platform="windows" src="www/res/icon/windows/Square71x71Logo.scale-100.png" width="71" />
<icon height="170" platform="windows" src="www/res/icon/windows/Square71x71Logo.scale-240.png" width="170" />
<icon height="360" platform="windows" src="www/res/icon/windows/Square150x150Logo.scale-240.png" width="360" />
<icon height="310" platform="windows" src="www/res/icon/windows/Square310x310Logo.scale-100.png" width="310" />
<icon height="150" platform="windows" src="www/res/icon/windows/Wide310x150Logo.scale-100.png" width="310" />
<icon height="360" platform="windows" src="www/res/icon/windows/Wide310x150Logo.scale-240.png" width="744" />
<splash height="1920" platform="windows" src="www/res/screen/windows/SplashScreenPhone.scale-240.png" width="1152" />
</platform>
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
<plugin name="cordova-plugin-statusbar" spec="~2.2.3" />
<plugin name="cordova-plugin-crosswalk-webview" spec="https://github.com/crosswalk-project/cordova-plugin-crosswalk-webview">
<variable name="XWALK_VERSION" value="23+" />
<variable name="XWALK_LITEVERSION" value="xwalk_core_library_canary:17+" />
<variable name="XWALK_COMMANDLINE" value="--disable-pull-to-refresh-effect" />
<variable name="XWALK_MODE" value="embedded" />
<variable name="XWALK_MULTIPLEAPK" value="true" />
</plugin>
</widget>

my app.js:

import { Vue, router, store } from './boot/core'
import App from './components/app.vue'
import io from 'socket.io-client';
import VueSocketio from 'vue-socket.io';
import VueToastr from '@deveodk/vue-toastr'
// You need a specific loader for CSS files like https://github.com/webpack/css-loader
// If you would like custom styling of the toastr the css file can be replaced
var Vue = require('vue');
var VueCookie = require('vue-cookie');
//require('jquery-toast-plugin')
var socketio = io('http://localhost:4242/');
// Tell Vue to use the plugin
Vue.use(VueSocketio, socketio);
Vue.use(VueCookie);
Vue.use(VueToastr, {
defaultPosition: 'toast-top-right',
defaultType: 'info',
defaultTimeout: 4000
});
var vm = new Vue({
router : router,
el: 'app',
render: h => h(App),
data: { store },
sockets:{
connect: function(){
console.log('socket connected');
},
sessionId: function(val){
console.log('sessionId');
console.log(val);
this.store.sessionId = val;
},
txResult: function(val){
console.log(val)
console.log("txResult");
this.$toastr('success', 'Success', val.event);
this.store.txResult = val.event;
}
},
methods: {
/**
* The Application method
*
* @module App
*/
/**
* @method getJSONData
* @param {Object} object - data
* get the json of a data
*/
getJSONData(json) {
if (this.isPhoneGap()) {
console.log("PJSON: " + json.data)
console.log("PJSON: " + json.data.toString())
return json.user;
}
else {
console.log("BJSON: " + JSON.parse(json.data))
console.log("BJSON: " + JSON.parse(json.data).toString())
return JSON.parse(json.user);
}
},
/**
* @method ajaxRequest
* Basic ajax request for the edition 
*/
ajaxRequest(type, route, params, success, error) {
var res = "";
var url = 'http://localhost:4242/login';
var xhr = $.ajax({
url: route,
async: false,
dataType : "json",
type: type,
contentType: "application/json; charset=utf-8",
xhrFields: { withCredentials: true },
crossDomain: true,
data: JSON.stringify(params),
beforeSend: setAuthToken,
success: success,
error: error,
cache: false,
})
},
/**
* Set the token of authentification
* @method setAuthToken
* @param {Object} json object who contains the token
*/
setAuthToken(request) {
if (this.store.auth_data != null) {
request.setRequestHeader("Authentification", this.store.auth_data.token);
}
},
/**
* Check if the application turn on phonegap
* @method isPhoneGap
*/
isPhoneGap() {
return (window.cordova || window.PhoneGap || window.phonegap) 
&& /^file:\/{3}[^\/]/i.test(window.location.href) 
&& /ios|iphone|ipod|ipad|android/i.test(navigator.userAgent);
},
/**
* Set the auth data
* @param {Object} json object with all the information about the user
* @method setAuthData
*/
setAuthData(_auth_data) {
this.store.auth_data = _auth_data;
},
}
})
window.vue = vm;
Answers: