A lot of money is being spent creating mobile-native UI. In this lab we will customize and install an Android app that uses the Cordova In-App Browser to provide a rich UI - using the HTML technologies we already know. Download and unzip topseed-mobile-master.zip from https://github.com/topseed/topseed-mobile to your location of choice on your developer machine. Open the project in VS Code. Download, install and run the Phonegap Desktop App from https://github.com/phonegap/phonegap-app-desktop/releases. In Phonegap Desktop, add the /topseed-mobile folder as a Project, and click the '>' button. A message 'Server is running on...' should come up. Click on the URL to open the app in a browser. Resize the browser to mobile phone format.
The app is configured to show a splash screen and then display content obtained from https://m.appthings.io. We will make it display the content you published to the CDN in Lab 3 instead. As you edit the project, the Phonegap Desktop App watches for changes in the /www folder of the project and attempts to refresh the browser view on each change. In /www/js/index.js, replace the URL following 'window.open' with the homepage URL of the helloworld app you deployed in Lab 3, i.e. your equivalent of https://staging.mydomain.com/page/one/index.html. If you only deployed to the CDN or zeit.co, use your equivalent of https://1234567890.rsc.cdn77.org/page/one/index.html. or https://demos-oosnsyzlphl.now.sh/page/one/index.html. If you never deployed, you can use the published version of this tutorial at https://docs.topseed.io/tutorial/0-agenda/index.html. By including '/index.html' in the path we ensure to deliver the turbo (non-AMP) version of the page with its smoother transitions and rich client app feel.
To allow the in-app browser to navigate to the newly configured URL, in /config.xml <allow-navigation href="https://m.appthings.io/*" >, replace 'm.appthings.io' with your equivalent from the previous step. The app should now display your site at the
Phonegap Desktop App Server URL. It is a labor of love to replace the splash screen logo (at /www/css/index.css) and the icons used by the phone operating system (see /config.xml 'icon' values) with your own; we will skip over it here. Optional: change the values for the app 'name' and 'version' in /config.xml.
To install the customized app on an Android phone,
first create a zip file of the contents of the project folder /topseed-mobile. Create an account and login at https://build.phonegap.com.
On the 'Apps' tab at https://build.phonegap.com/apps, click the '+ new app' button and upload the zip file (If your project is in Github, you can use the Github clone URL instead). The site will take a few moments to build the app. Meanwhile, also log into https://build.phonegap.com on your mobile phone. Once the build has completed, on your phone download, install and run the version for your phone's operating system (here: Android). Follow the installation prompts. Done! For fun, close the app and reopen it by tapping on the app icon on your phone UI.
See http://docs.phonegap.com/ for further information about Phonegap, for instruction how to deploy to Apple iOS, and how your app can access phone-specific APIs, such as address book, location information etc. if necessary. We would use a service worker to support offline-browsing as needed.
In this lab we used the Cordova In-App Browser to render app content from a CDN. As shown in Lab 7, the app can also obtain data securely from separate API servers. Thanks to AppShell, Turbo and caching introduced in Lab 4, the app has a smooth single page application feel. As a result, we were able to develop a rich mobile app without requiring any special Android SDK/iOS development skills.