wrap it into a Capacitor app

[sebastianovide]

Here's a proposal: Convert it into a Single Page Application (SPA) and wrap it with Ionic and Capacitor. This will allow it to run as a Progressive Web App (PWA), as well as on Android and iPhone. Perhaps the Ionic wrapping can be done first (https://ionic.io/resources/articles/converting-websites-into-mobile-apps) .... If I have time this weekend I'll give it a go

[steinbro]

Yes, I always thought this would be a better experience if it felt more like a native app, so I definitely welcome your taking a crack at it. The challenge will be to get all the native API permissions working (geolocation, orientation, audio), especially on iOS where PWAs are somewhat limited. It was also suggested that wake locks, which we use to keep location updated and audio playing, might not work (see #9).

Also, is there more to a SPA than being a single HTML file? The app already is effectively a single page; the second replay_gpx.html file is intended just for development.

[sebastianovide]

oo... yea... iOS.... and I don't have an iPhone to play with it....

Also, is there more to a SPA than being a single HTML file? The app already is effectively a single page; the second replay_gpx.html file is intended just for development.

in that case it should only need a manifest.... #25

[sebastianovide]

@steinbro, I'll create an empty Ionic project and integrate the existing code into it. While Ionic does work with vanilla JS (like this app), it performs much better with React, Angular, or Vue.js.

The goal of this ticket is to simply bring the existing web app into Ionic so that it can be built for Web, Android, and iOS (if desired). The second step (in another ticket) would be to convert it into pure React. React is extremely popular, and learning it will also give you knowledge of React Native, which is great for mobile apps. Are you okay with me starting with React?

[steinbro]

Yeah, since most of the work thus far has been about the audio and geospatial functionality, not as much thought has gone into using modern UI tooling. Even with the relatively minimal set of interactive features, the code for the UI controls was already feeling clunky. I expect moving to some major framework would set us up well for additional interactive functionality, so I welcome your expertise on that. Would it require changes to all the JS code, or just the parts that deal directly with user interaction, primarily in app/js/visual/?

[sebastianovide]

I don't know... I was planning to kick of an blank ionic project and simply move the existing code... nothing else... (ok, will need to create a github action to build the web app) So I need to investigate how to move a vanilla JS project with the minimum react as possible... but after doing this, we'll have all what we need to keep refactoring, moving to react (if desired) , adding android (with relative plugins for background) etc...

[sebastianovide]

@steinbro ... here is the first experiment (to do not merge) #26 (still some merging to do.... but enough to give you a flavour how how it could look like)

[sebastianovide]

ok... another step... #28

After that I'll need to do the same with the location and compass...

[steinbro]

Which Web APIs would need to be swapped out for Capacitor modules, and which can stay? I can imagine popular device interfaces like geolocation have Capacitor plugins, but 3D audio might be more platform-specific.

Conversely, there are some platform limitations that would be great to circumvent, like the fact that the Web Speech API doesn't readily support spatial audio (you might have noticed only the sound effects are positional), but I doubt that adding the Capacitor plugins would magically fix that.

[sebastianovide]

I don't know for sure... surely the location and orientation. What I'm doing to find out is to run it inside an app and see what is not working. In this case speechSynthesis did not exist which means that the webview is not supporting it, hence why a plugin is necessary. In this case I've found https://github.com/capacitor-community/text-to-speech supported by the community..

Web Speech API doesn't readily support spatial audio (you might have noticed only the sound effects are positional), but I doubt that adding the Capacitor plugins would magically fix that.

yep... very likely you are correct. The only way to fix it will be to fix the capacitor plug in ....
Feature request added: capacitor-community/text-to-speech#128

[sebastianovide]

Closing it as it is wrapped. The app behaves like the web app, which means that it doesn't work if the screen is off or locked (this is covered in another ticket: #33).