Android 11 has brought some confusion to the Cordova community when it comes to handling files, as is clear from this Github issue and those related to it. This example app serves as a guide for how to set up a Cordova project that can download a remotely-hosted image and display it in the webview. In the process, hopefully a lot of the confusion around using files on Android 11 Cordova apps is cleared up.
Please star the repo if this is helpful and consider contributing in order to cover other scenarios.
This is a simple app started using the Ionic 6 / Angular 13 blank starter (ionic start ...) so the
normal Ionic protocols apply.
-
Use Node 14+
-
Have a working Android Studio installed with the API level 30 SDK installed (to minimise errors, remove all other SDKs)
-
npm i -g cordova @ionic/cli cordova-res -
git clone <this repo> -
npm i -
ionic cordova platform add android -
ionic cordova build android -
Run on emulator or device (e.g.
cordova run androdi --device)
For requests I use Cordova Advanced HTTP and for filesystem interactoin I use Cordova Plugin File. Some users have tried cordova-plugin-file-transfer and even though there is a semblance of activity on the repo, it was sunsetted (read: deprecated) five years ago so I can't recommend its use.
Further to those, Cordova Plugin AndroidX Adapter is required because the file-related plugins have not yet (and will probably never be) updated to use AndroidX. And I needed Ionic Web View for Cordova to get the WebViewAssetLoader to work. I'm sure it's not necessary but I kept getting 404s when trying to access saved files from the webview before using it.
If you've found this helpful, won't you be a star and star the project?
I welcome any comments or suggestions. It would be great if this app could be expanded to cover more use-cases and edge-cases of interacting with files on Android 11+ Cordova apps. The Cordova community is shrinking apace so any help will be appreciated by many. Blog posts are great but example apps are arguably better (and quicker).