Migrate runtime from Cordova to Capacitor

[graphefruit]

Motivation

At least from my outsider's perspective, the Cordova ecosystem is looking more and more abandoned. Most plugins haven't been updated in years, with issues piling up in the respective repositories. This is an issue, as modern mobile platforms evolve rapidly and always require app developers to adapt to new guidelines and restrictions, especially regarding permissions and privacy.

It looks like the Ionic people moved on to create https://capacitorjs.com/, which aims to make native integrations a bit easier while also modernizing the ecosystem (at least that's what Ionic says, see https://ionic.io/resources/articles/capacitor-vs-cordova-modern-hybrid-app-development).

This draft PR is a proof of concept on what a Capacitor migration could look like. Specifically, it demonstrates that existing Cordova plugins can still be used just fine. If the migration works out well, it might be worth it to eventually migrate away from all Cordova plugins, but this is not necessary in the first step.

If you want to take a look at the changes in this PR, I recommend going commit by commit. I try to create isolated, understandable commits. Looking at the commits in order will be much easier than trying to understand the huge diff.

State of this PR

First things first: This is currently in the draft/proof of concept stage!
This state isn't intended to be mergeable just yet, I just want to be able to get some early feedback.

The second important caveat: I don't have a Mac and can't test or otherwise work on iOS builds. I need assistance from someone with access to a Mac and an iPhone.

To-Do list

This is the current To-Do list I'm working with. As this is still in a very early stage, it will change and things will be added to it.

Android

First steps

• Get the app to build
• Change scheme/hostname/origin, so no data loss occurs when upgrading from a Cordova build to a Capacitor build

Test plugin functionality

• Barcode / QR code scanner
• Beanconqueror links
• Camera
• Geolocation
• Bluetooth LE devices
• File Handling (File import/export, Visualizer upload, automatic backup/restore, ...)
• Special HTTP integrations
  • SanremoYOUDevice
  • XeniaDevice
• What additional special functionality did I forget?

iOS

General Setup

As I don't have access to a Mac, I can only guess what needs to be done here:

• Initialize the project

ionic capacitor add ios
npx @capacitor/assets generate --ios

First steps

• Get the app to build
• Check scheme/hostname/origin, so no data loss occurs when upgrading from a Cordova build to a Capacitor build

Metadata files

• Set up iOS metadata files
  • General iOS metadata files: https://capacitorjs.com/docs/ios/configuration
  • Barcode Scanner Plugin: https://capacitorjs.com/docs/apis/barcode-scanner#ios
  • Camera Plugin: https://capacitorjs.com/docs/apis/camera#ios
  • Geolocation Plugin: https://capacitorjs.com/docs/apis/geolocation#ios
  • Status Bar Plugin: https://capacitorjs.com/docs/apis/status-bar#ios-note
  • Filesystem Plugin: https://capacitorjs.com/docs/apis/filesystem#apple-privacy-manifest-requirements
  • Possibly more metadata files/plists/...

Test plugin functionality

• Barcode / QR code scanner
• Beanconqueror links
• Camera
• Geolocation
• Bluetooth LE devices
• File Handling (File import/export, Visualizer upload, automatic backup/restore, ...)
• Special HTTP integrations
  • SanremoYOUDevice
  • XeniaDevice
• What additional special functionality did I forget?

Cordova Plugins

Cordova Plugins to replace in this first step

• @red-mobile/cordova-plugin-barcodescanner -> https://capacitorjs.com/docs/apis/barcode-scanner
• @spoonconsulting/cordova-plugin-telerik-imagepicker
  • Is https://capacitorjs.com/docs/apis/camera#pickimages enough for this?
• cordova-clipboard -> https://capacitorjs.com/docs/apis/clipboard
• [/] cordova-plugin-android-permissions
  • Used directly and as a dependency of other plugins
    -> Permissions need to stay cause the new capacitor plugins doesn't allow the possibility to check Bluetooth e.g.
• cordova-plugin-androidx-adapter -> Not required in Capacitor
• cordova-plugin-androidx -> Not required in Capacitor
• cordova-plugin-app-version -> https://capacitorjs.com/docs/apis/app#getinfo
• cordova-plugin-appminimize -> https://capacitorjs.com/docs/apis/app#minimizeapp
• cordova-plugin-camera -> https://capacitorjs.com/docs/apis/camera
• cordova-plugin-device -> https://capacitorjs.com/docs/apis/device
• cordova-plugin-geolocation -> https://capacitorjs.com/docs/apis/geolocation
• cordova-plugin-globalization
  • Deprecated, should also be removed if we stay on Cordova
  • Use Browser API: https://402.ecma-international.org/1.0/
  • See https://cordova.apache.org/news/2017/11/20/migrate-from-cordova-globalization-plugin.html
• cordova-plugin-inappbrowser
  • Doesn't seem to be used anyway, all links open in external browser
  • Replace with window.open()? -> Not possible on Android because it will overwrite the own app.
• cordova-plugin-ionic-keyboard -> https://capacitorjs.com/docs/apis/keyboard
• cordova-plugin-ionic-webview
  • Unused in Capacitor. Not getting pulled in, verified by running npx cap ls
• cordova-plugin-screen-orientation
  • Was unused anyway, DOM APIs for this are used instead
• cordova-plugin-statusbar -> https://capacitorjs.com/docs/apis/status-bar
• cordova-plugin-vibration -> https://capacitorjs.com/docs/apis/haptics
• cordova-plugin-file -> https://capacitorjs.com/docs/apis/filesystem
  • Important! This plugin is broken at least on Android in conjunction with Capacitor, so it must be replaced
• cordova-plugin-file-transfer
  • Important! Must be removed to be able to remove cordova-plugin-file
• cordova-plugin-advanced-http -> https://capacitorjs.com/docs/apis/http
  • Important! Must be removed to be able to remove cordova-plugin-file
• cordova-plugin-filepath
  • Used on Android only
• cordova-plugin-x-socialsharing
• If possible this should be removed to be able to lose es6-promise-plugin as well
• es6-promise-plugin
  • Is this even used in the Capacitor webview, even though it's a dependency of cordova-plugin-x-socialsharing? It shouldn't be needed anyway, verify!

Cordova Plugins to specifically not replace in this first step

• cordova-plugin-ble-central
  • Way too complex to attempt to replace this in the first step. Also, I don't have any Bluetooth devices to test
• ionic-plugin-deeplinks
  • Replaced by native capacitor

Cordova Plugins to still decide the fate of

• cordova-plugin-3dtouch
  • Used on iOS only, I don't know what this is for
    -> Made it native directly.
• File handling and file choosers (Probably not necessary to migrate in the first step)
  • cordova-plugin-filechooser
    • Used on Android only
  • cordova-plugin-filepicker
    • Used on iOS only
• [/] cordova-plugin-health
  -> Actually not possible, the capacitor-healthkit not supports capacitor 6.X
• cordova-plugin-insomnia
• cordova-plugin-nativestorage
• cordova-sqlite-storage
• skwas-cordova-plugin-datetimepicker

General

• Rewrite most of the file system handling to clean it up, mainly:
  • UIFileHelper
  • UIExportImportHelper
    • This could be cleaner, but it's already a lot better and works in my testing. More refactoring can be done at a later point
• Review all TODO Capacitor migration I left during the migration
• A lot of testing when the PR gets more mature to make sure nothing breaks
• Add a proof of concept for using custom native code to do stuff we couldn't do before
  • Enable full import/export from/to directory on Android using SAF #806

Explicit Check:

• Check if bluetooth permissions need to be added in android manifest

Extra todo:

• Update to Ionic 8
• Update to latest Angular
• Somehow a build script for iOS / Android.
  Specially for Android referencing: ionic cordova build --prod --release (--release was the bundled version)

[RagingCactus]

I'll take a look at the Android permissions for Bluetooth in the manifest. However, I can't test the connection as I have no BLE coffee devices.