Web Applications – Let's Talk

As the PhoneGap Developers App isn’t availible on iOS decided and was incompatible with the tablet I had due to it having the wrong version of android OS I decided to buy a new tablet that had the correct version of android. PhoneGap requires version 5.0 and above so I purchased a tablet that uses version 9.0 and the app was still incompatible with my device. I then decided to downlod the adk of PhoneGapDeveloper, which I was able to install and run but it did’t connect to the applications I was attempting to test on my deskop. This was frustrating, but I figured out after some research on message boards about the application that there is a long list of requirements for devices to be compatible with PhoneGap Developer.

API Levels Supported

Hardware Requirements

android.hardware.BLUETOOTH
android.hardware.CAMERA
android.hardware.LOCATION
android.hardware.location.GPS
android.hardware.location.NETWORK
android.hardware.MICROPHONE
android.hardware.screen.LANDSCAPE
android.hardware.sensor.ACCELEROMETER
android.hardware.sensor.COMPASS
android.hardware.TOUCHSCREEN
android.hardware.WIFI

Permissions Required

android.permission.ACCESS_COARSE_LOCATION
android.permission.ACCESS_FINE_LOCATION
android.permission.ACCESS_GPS
android.permission.ACCESS_LOCATION_EXTRA_COMMANDS
android.permission.ACCESS_NETWORK_STATE
android.permission.ACCESS_WIFI_STATE
android.permission.BLUETOOTH
android.permission.BLUETOOTH_ADMIN
android.permission.CAMERA
android.permission.GET_ACCOUNTS
android.permission.INTERNET
android.permission.MODIFY_AUDIO_SETTINGS
android.permission.READ_CONTACTS
android.permission.READ_EXTERNAL_STORAGE
android.permission.READ_PHONE_STATE
android.permission.RECORD_AUDIO
android.permission.RECORD_VIDEO
android.permission.VIBRATE
android.permission.WAKE_LOCK
android.permission.WRITE_CONTACTS
android.permission.WRITE_EXTERNAL_STORAGE
com.google.android.c2dm.permission.RECEIVE (Pindoria, Suraj 2016)

I brought this issue to my coding lecturer and he suggested I develop the applications as a web application, which is what I would be doing with PhoneGap anyways. I could then test the application on the device using our college webserver (webdevcit.com). I can get javascript plugins that allow me to make the application full screen and allow me interactivity such as swiping (jquery gestures). I can still then transfer the app files into phonegap and export the application from there at the end of the project, I would just be cutting out the middleman during the development phase.

Making Web Applications Fullscreen

There are several easy ways to make a website fullscreen, you can request the browser to go full screen in response to a user gesture, you app download the website to the homepage, or you can auto hide the address bar. ( Making Fullscreen Experiences, 2019)

How I did this

First I created a HTML and CSS file for the homepage
I added this meta tag to the header of the HTML <link rel=”manifest” href=”/manifest.json”>
I then created a JSON file containing this code
I transferred all the files to the server and opened the web page in the browser. I then from the page settings added the website to the homepage
I opened the application from my homescreen
The Website is now Fullscreen

Drag and Drop Touch Events

On a mobile device there is not mouse, touch events must be used instead. There are plugins available for more complex gestures, but this is how I created a simple drag and drop touch event.

Create HTML Element you want to move and give it an id
Create an onload function, store the HTML element in a variable
Add a touchmove event listener to this variable that triggers another function
Prevent the default movements when the event is triggered
Create a variable that stores the new touch location and use this to change the style of the HTML element.