Consider using capacitor to build native Android and iOS mapper apps

[spwoodcock]

Is your feature request related to a problem? Please describe.

• Capacitor allows for pretty much the same code to be used for web, native android, native ios.
• The advantage of the native (app store) builds is that they can use native APIs (e.g. we won't have geolocation restrictions from web browsers).

Describe the solution you'd like

• Add capacitor.
• Add android and iOS targets.
• Update geolocation code to use capacitor.
• Compile native builds.
• Distribute via app stores.

Additional context

• We can do this for the mapper frontend only.
• Its an extra maintainence burden. App store listings must be made and maintained. Also need to regularly update to keep mobile SDK version recent (else the app eventually gets removed from the store).
• This should be assessed further to see if its worth the burden (mainly for improved geolocation and orientation via accelerometer API).

[emi420]

I've used Ionic/Apache Cordova before, IMO is not worth it if you only need access to a specific feature like location.

You can add native for each app to handle geo-location and establish a two-way communication with the webview.

For iOS I know you can use WKScriptMessageHandler and evaluateJavaScript for two-way communication between JavaScript and Swift.

For Android you have Native Bridges.

Webviews are not good in terms of performance compared to native code, but it's a good option for doing something quick and cheap.

[spwoodcock]

Manual Webview / TWA

I have never used the approach you suggest - sounds interesting!

Info is a bit sparse for how to do this though.

• Create native app.
• Add listener function to native app.
• Embed webview in native app (running your frontend JavaScript code / FMTM page).
• Add JavaScript function in frontend code to call listener setup in native app.

That's about right?

Sounds good in theory, but the Android page linked also notes multiple risks in using the useJavascriptInterface.

Packaging up as an apk for Android should be pretty easy at least, using bubblewrap. Pwabuilder.com uses this underneath, and can also create iOS app bundles easily too - its a nice site, and free.

Capacitor

Capacitor is leagues ahead of Cordova in terms of user-friendliness. I have used Capacitor before with success.

It abstracts away the mobile development knowledge and generates everything for you.

Are there downsides to having Capacitor handle the native / Webview link, as opposed to doing it manually? I'm honestly not sure.

Way forward

This isn't an item we (NAXA, Daniel, or I) will address in the coming months, due to the MdP project, but its very much a nice to have.

If you have done this before & are confident it can work nicely for Android and iOS, then I will let you take the lead!

I'm sure the team in Brazil would be thrilled to have a themed version of FMTM distributed as an app 😃

[spwoodcock]

@emi420 and I have been discussing this offline.

Advantages To Using Native Mobile APIs

I think this approach (to use the native geolocation & accelerometer) improves user experience in three ways:

• Remembering the geolocation prompt, so they don't have to agree every time FMTM is opened.
• The accelerometer implementation on web only works on chromium browsers currently. A webview is chromium based, so means the accelerometer is guaranteed to work.
• Hooking into native sensors means we can use fine and coarse grain geolocation (including last know location from the phone), instead of needing to have a GPS fix before anything shows.

Webview Wrapper

The proposed approach would be essentially a 'wrapper' app around a PWA. This wrapper will simply run a webview or Trusted Web Activity, containing the FMTM website as a PWA. The advantage of the wrapper is twofold:

• Installable via app store (this is not necessarily an advantage, depending how you look at it, but it's what many users are accustomed to).
• Access to native device APIs, as the wrapper contains the necessary permissions to access them. For example we can use coarse and fine grained geolocation, and accelerometer.

Technical Solution

As discussed above, there are a few approaches to doing this:

1. Use Native Bridges or similar, as mentioned by Emi, in a custom implementation, only targetting the specific APIs we need.
2. Capacitor removes some of the complexity of doing the above approach. We can use the geolocation package from capacitor to access native APIs, or fallback to web.
3. Replace the mapper frontend web app with a native app entirely (NativeScript (svelte-native), Flutter, etc).

[emi420]

I've used Apache Cordova + Ionic framework, then they built their own tool for replacing Cordova, that's Capacitor. But I think that adding a whole framework just to get better coordinate precision is not worth it.

The approach is similar to using Capacitor but using our own native code:

• Create native app
• Add a native function for obtaining the location + accelerometer data, with features to listen for receive and send data to the webview
• Embed webview in native app (running the frontend JavaScript code).

This will work if the web app is hosted locally in the device, I'm not sure about loading the app directly from the web, but I can take a look.

[spwoodcock]

Thanks for the info - thats helpful context!

I didn't know it was possible to run the web app locally on the device.
Simply loading the index.html would probably trigger CORS due to not http, and then calling an API would also trigger CORS as the domain would be incorrect.

I wouldn't fully discount Capacitor though!
As it basically does what you are describing for us (creates the native apps, with all config set correctly) 😄
Plus you don't have to install everything and can be selective:

• https://www.npmjs.com/package/@capacitor/motion
• https://www.npmjs.com/package/@capacitor/geolocation

But if doing it manually is just as easy and you are happy to do it, then we can equally go that route!
(personally, I have done a fair bit with native Android apps, but never touched native iOS manually)