My experience with Ubports app development using Ionic framework and Angular

jittopjose

I have been doing some experiments with Ubports app development using Ionic framework and Angular. Being a web developer, I found it as the easiest way to start developing Ubports app. Here I am listing down the procedure I followed to make the app running in Ubports.

Since Ubports does not have official support from Cordova, I had to choose Ubports HTML app template which is just like running index.html from file system. These kind of apps do not have access to any API to use storage/location/contacts etc.

Changes I did to make Ionic app run from file system without server.

Remove <base href="/" /> from index.html
Add APP_BASE_HREF and LocationStrategy to app.module.ts file as follows

import { APP_BASE_HREF, LocationStrategy, HashLocationStrategy } from '@angular/common';

providers: [
    StatusBar,
    SplashScreen,
    { provide: APP_BASE_HREF, useValue: '/' },
    { provide: LocationStrategy, useClass: HashLocationStrategy },
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],

Somehow the ionic prod build did not work for me. I had to choose normal ionic build using ionic build
In fact, ionic prod build is working fine now.
After build, all instance of type="module" should be deleted from index.html file of www folder.

With these changes, after build Ionic app can be run from file system without any server running. index.html file of www folder can be opened using chrome.

Another issue I faced when running app without server was with loading icons. Ionic keep each icons as separate svg files and load them when required. Unfortunately this does not work when running without server. I could successfully use fontawsome as described in angular-fontawesome github page. But I decided to use ionic components as much possible. So I created constants which hold full svg file content for the required icons and used instead of specifying just icon names as follows

closeIcon: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path d="M289.94 256l95-95A24 24 0 00351 127l-95 95-95-95a24 24 0 00-34 34l95 95-95 95a24 24 0 1034 34l95-95 95 95a24 24 0 0034-34z"/></svg>'

template:

<ion-icon slot="icon-only" [src]="closeIcon"></ion-icon>

The app I created can be used as a template if you wish to develop app using ionic framework and angular. All files are uploaded to following github url

https://github.com/jittopjose/DoToDo

Just clone the project and run build-app.sh is enough to generate a click package (Provided clickable and ionic cli installed already). Thanks to Brian Douglass for the instructions given in his RecipeBoss gitlab page.

The performance is not as par with the performance of same app in android. I guess its because of the lack of hardware acceleration in ubports. Hopefully it will be fixed in the future.

I hope, ionic team or cordova team will support Ubport in the future and it will be a great help for people who are interested in creating hybrid app for Ubports.

A Former User

Thanks for this, I've wondered how difficult it would be to do app development this way. As you say, hopefully Cordova will make an attempt to support UBports. Good job.

jittopjose

@Loops I had to do all those steps because I could not find any ready to use template. Anybody who has knowledge in building webapp using ionic or plain angular can build ubuntu app using above template. Once set, its too easy to convert existing webapp or ionic app to ubports html app.

If someone find a way to create a native wrapper for HTML apps and expose system APIs to be used from javascript, then there is no need of cordova support I guess. Hybrid apps are enough for many scenarios.

CiberSheep

I guess you have taken a look at these: https://api-docs.ubports.com/sdk/apps/html5/index.html

You might have some benefits if you can use a webview in qml

geekvine

this is really great, i'll have to dive in a little. i have an app in the open store done with backbone.js and it was trivial to get running but i do wish the APIs were exposed.

Giiba

Seabass
https://github.com/milikhin/seabass

used cordova on UT, though it very recently was archived and replaced before an html5 version... if I understand correctly.

poVoq

There used to be official Cordova support for UT, see my explanation here:
https://forums.ubports.com/topic/3626/bring-apache-cordova-support-back-to-ubuntu-touch?_=1590445134671

Would be awesome if someone could update it as an unofficial platform or such.

jittopjose

@CiberSheep I evaluated QML Webview way of creating html app. But I could not find any potential benefit of using webview. Normal mobile app need contacts/location/storage access. It require more technical knowledge to get access to these system resources for an html app running in Webview (If at all possible).
Moreover I guess its not something that should be done per App. A cordova like platform can help in this area since most of the web developers are not familiar with c/c++ programming.

jittopjose

@geekvine I checked your apps in open store. In fact I regularly play 2048 game
Not all html app require the above mentioned steps. The base url issue is only for Angular and icon access issue is for ionic. I could make a React App run in ubports by just adjusting baseurl in the config.

jittopjose

@poVoq Yes I wish someone with adequate technical knowledge come forward to maintain cordova in ubports