I am trying to deploy a mobile webapp using PhoneGap build. The webapp is ran through Docker, using HTML, CSS, and JS on the front end, connected to a Python, Apache, and SQL servers on the back end, running through docker.
This works fine as a website, and displays correctly on a mobile web browser. However, when I try to package the app using phonegap build, it displays only the index.html page.
I believe this may be an issue with the model view controller set up I am using for my webapp (so that multiple pages load inside the 1 page)
the pages are gotten as follows:
downloadTemplate (templateName, downloadCallback)
{
var that = this;
var url = window.location.href+"/views/"+templateName+"/"+templateName+".html";
var url = cordova.file.applicationDirectory+"/views/"+templateName+"/"+templateName+".html";
var header = document.getElementById("header-label");
header.value = url;
header.innerHTML = header.value;
var xhr = new XMLHttpRequest();
console.log("url: " + url);
xhr.onload = function()
{
var el = document.createElement( 'html' );
el.innerHTML = xhr.responseText;
//get body
el = el.getElementsByTagName("body")[0];
//console.log("el: " + el);
//store the template
that.cache[templateName] = el;
that.successCount++;
if (that.isDone())
{
downloadCallback();
}
};
xhr.onerror = function()
{
that.errorCount++;
if (that.isDone())
{
downloadCallback();
}
};
xhr.open("GET", url);
xhr.send();
}
the first var url works fine for the website, and as you can see I am attempting to replicate the href with the cordova plugin (provided when you build the application).
To my disappointment, this doesn't work using phonegap build. However, I downloaded phonegap desktop, put my code into the www folder, and I am able to make it work using the browser platform that it provides.
So it works at displaying on the emulated build experience via the browser, but no on either android or iOS. However, for some reason when I also connect to my docker-python-websocket (which is needed to get data for user profiles etc.) the website slows to a halt, and becomes unusable. Much of the JS functionality also appears to be useless / not working / not connected.
I have gone through literally every page of documents / articles on phonegap, and many more on ionic, cordova, stack, youtube, various smaller sites - and have found nothing to help. Not even examples of multi page project that may help me refactor my project.
Here is my index.html (with most of the js and css files left out, but examples remain):
<!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" />
<!--PhoneGap Setup - was originally in body, but moved here as cordova doesn't load in fast enough for when it's used in the function above -->
<!-- <link rel="stylesheet" type="text/css" href="css/index.css" />
<div class="app">
<h1>PhoneGap</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
</div> -->
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
PGA.initialize();
</script>
<!--App Name-->
<title>App Name</title>
<!--API's-->
<link href='https://fonts.googleapis.com/css?family=Bangers' rel='stylesheet'>
<link href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin" rel="stylesheet" type="text/css" >
<!--Icon-->
<link rel="icon" href="favicon.ico">
<link rel="shortcut icon" href="favicon.ico">
<!--APP css-->
<link rel="stylesheet" href="css/box.css">
<link rel="stylesheet" href="css/colors.css">
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" href="css/dashboard.css">
<link rel="stylesheet" href="css/defaults.css">
<link rel="stylesheet" href="css/overlay.css">
<link rel="stylesheet" href="css/sidebar.css">
<!--App js-->
<script src = "js/App.js"></script>
<!--App lib-->
<script src = "lib/ViewManager/ViewManager.js"></script>
<script src = "lib/ViewManager/Model.js"></script>
<script src = "lib/ViewManager/View.js"></script>
<script src = "lib/ViewManager/TemplateManager.js"></script>
<!--App models-->
<script src = "models/User.js"></script>
<!--Splash Screen-->
<script src = "views/splash/SplashController.js"></script>
<script src = "views/splash/SplashView.js"></script>
<link rel="stylesheet" href="views/splash/splash.css">
</head>
<body onload="main()"> <!-- This is how my website code works, creating a class "app" in js once the body loads -->
<!--Side Bar-->
<div class="header" id="app-header">
<p id="header-label"> Sport Craft </p>
<button class="hamburger" id="hamburger"></button>
</div>
<div class="side-bar" id="app-sidebar">
<ul>
<li id="sb-header">Options:</li>
<li id="sb-logout">Sign Out</li>
<li id="sb-cc">Pending</li>
<li id="manager-gr">Get Requests</li>
<li id="sb-back">Back</li>
<li id="sb-download">Download</li>
</ul>
</div>
<div class="side-bar-exit" id="app-sidebar-exit"></div>
<!--Pop Up-->
<div class="logpopup" id="achievement-unlock-pop">
<div id="achievement-unlock-pop-image"></div>
<label id="achievement-unlock-pop-title"> Title</label>
</div>
<div class="logpopup" id="logpopup">
<div id="lpu-header"><label>Logged</label></div>
<label id="lpu-text"></label>
<button class="exit" id="lpu-exit">X</button>
</div>
<!--Start Up Screen-->
<script src = "views/signin/SigninController.js"></script>
<script src = "views/signin/SigninView.js"></script>
<link rel="stylesheet" href="views/signin/signin.css">
<script src = "views/signup/SignupController.js"></script>
<script src = "views/signup/SignupView.js"></script>
<link rel="stylesheet" href="views/signup/signup.css">
<script src = "views/club/ClubController.js"></script>
<script src = "views/club/ClubView.js"></script>
<link rel="stylesheet" href="views/club/club.css">
<!--User Screens-->
<script src = "views/player/PlayerController.js"></script>
<script src = "views/player/PlayerView.js"></script>
<link rel="stylesheet" href="views/player/player.css">
<link rel="stylesheet" href="views/player/overlookbar.css">
<link rel="stylesheet" href="views/player/boxes.css">
<link rel="stylesheet" href="views/player/calc.css">
<script src = "views/manager/ManagerController.js"></script>
<script src = "views/manager/ManagerView.js"></script>
<link rel="stylesheet" href="views/manager/manager.css">
</body>
</html>
and this is my config file:
<?xml version='1.0' encoding='utf-8'?>
<widget id="ie.example.example.example"
version="1.0.0"
xmlns="http://www.w3.org/ns/widgets"
xmlns:gap="http://phonegap.com/ns/1.0">
<name>App Name</name>
<description>
Phone Gap App.
</description>
<author email="me@email.ie" href="http://example.example.ie">
My Name
</author>
<content src="index.html" />
<preference name="DisallowOverscroll" value="true" />
<preference name="android-minSdkVersion" value="14" />
<preference name="orientation" value="portrait" />
<preference name="fullscreen" value="true" />
<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-statusbar" source="npm" spec="~2.1.2" />
<plugin name="cordova-plugin-vibration" source="npm" spec="~2.1.0" />
<plugin name="cordova-plugin-whitelist" source="npm" spec="~1.2.1" />
<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/icon@2x.png" 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/icon-40@2x.png" 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/icon-50@2x.png" 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/icon-60@2x.png" width="120" />
<icon height="180" platform="ios" src="www/res/icon/ios/icon-60@3x.png" 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/icon-72@2x.png" 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/icon-76@2x.png" 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/icon-small@2x.png" width="58" />
<icon height="87" platform="ios" src="www/res/icon/ios/icon-small@3x.png" width="87" />
<splash height="1136" platform="ios" src="www/res/screen/ios/Default-568h@2x~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/Default-Landscape@2x~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/Default-Portrait@2x~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/Default@2x~iphone.png" width="640" />
<splash height="480" platform="ios" src="www/res/screen/ios/Default~iphone.png" width="320" />
</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>
</widget>
The weinre debugger provided by phonegap is able to detect the html elements, but displays nothing else.
If anyone has a Git example of how a full project with multiple html pages works, it would be super helpful (especially if it's connecting to an external server for data management).
edit
I got the pages loading on the device by changing:
var url = cordova.file.applicationDirectory+"www/views/"+templateName+"/"+templateName+".html";
However, just like with the browser, the pages lack all functionality
The file is compiled to a directory that represents the folder where your config.xml file is contained.
You can access this folder using:
cordova.file.applicationDirectory
which returns a string. The contents of the www folder is then:
cordova.file.applicationDirectory + "www/" + {what you're looking for}
Also, make sure you follow the CLI Project app structure laid out in the PhoneGap docs:
http://docs.phonegap.com/phonegap-build/getting-started/app-project-structure/
As for the freezing issue, it just started randomly working, and I haven't been able to reproduce it since.