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.

1. Remove <base href="/" /> from index.html
2. 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.

@kugiigi If its a webapp, how we can compile against any qt version?
I too have same issue

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

@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.

@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.

@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.

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.

1. Remove <base href="/" /> from index.html
2. 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.

@AppLee I did some experiments with Felgo. but didn't get much idea how to create a click package out of Felgo project. Is there any template available to create click package from Felgo project?
The weather app published by felgo looks good. They have lots of nicely designed components.

While creating offline web app using Ionic + Angular, I observed that the animations which Ionic provide are not so fluid in UT. I have OnePlus One with me and its not too low end hardware. The animations were much better in desktop Chrome browser. Is it because of the lack of hardware acceleration in UT browser?

The idea of creating pure native app is really nice. But I am a web developer and don't have any knowledge in c/c++. Moreover Ionic gives lots of cool designs and layout so that I don't have to do a lot in design area. So I thought sticking with web technologies would be better choice for me to kick-start app development.

@AppLee If I opt for QML webview path, do I need to build it separately for different platforms?. like 32/64 bit arch
I guess at the moment, the webapp is build with 'all' arch support

Hi,
I am doing some experiment with an offline Ionic-Angular HTML app.
I can see two options. Create an HTML app and copy the files to www folder or create a QML app and use webview to load index.html. Is there any particular advantage of using QML-Webview path?

Thanks,
Jitto P.Jose