0

I'm trying to migrate my mobile app (developed with Cordova and AngularJS for Android and iOS platforms) and I have some issues from API 29 to API 30. In my app I download from a REST service a JSON catalogue with separated pictures (JPG format) that I store in Data Directory (cordova.file.dataDirectory). With the app build with API set to 29 the app works fine, downloading pictures and displaying them in an HTML page (updated with AngularJS). But if I try to build it with API set to 30, the app continues to work (it download correctly the json and the jpg files in Data Directory) but without displaying the pictures stored in that directory. I also tried to create a new simple mobile app using all the updated component (Cordova 10.0.0, Android platform 10.0.0, plugins, etc.) but I obtain the same behaviour and I cannot resolve this issue. Could you help me or have you an idea how to resolve it?

Info App build with API 29

Cordova v8.1.2
Android Platform v8.0.0

Info App build with API 30

Cordova v10.0.0
Android Platform v10.0.0

Plugins List

cordova-plugin-android-permissions 1.0.2 "Permissions"
cordova-plugin-camera 4.1.0 "Camera"
cordova-plugin-compat 1.2.0 "Compat"
cordova-plugin-datepicker 0.9.3 "DatePicker"
cordova-plugin-device 2.0.3 "Device"
cordova-plugin-dialogs 2.0.2 "Notification"
cordova-plugin-file 6.0.2 "File"
cordova-plugin-file-hash 0.4.1 "FileHash"
cordova-plugin-filepath 1.5.8 "cordova-plugin-filepath"
cordova-plugin-geolocation 4.0.2 "Geolocation"
cordova-plugin-globalization 1.11.0 "Globalization"
cordova-plugin-inappbrowser 3.2.0 "InAppBrowser"
cordova-plugin-network-information 2.0.2 "Network Information"
cordova-plugin-sign-in-with-apple 0.1.2 "cordova-plugin-sign-in-with-apple"
cordova-plugin-splashscreen 5.0.3 "Splashscreen"
cordova-plugin-statusbar 2.4.3 "StatusBar"
cordova-plugin-whitelist 1.3.4 "Whitelist"
cordova-plugin-wkwebview-engine 1.2.1 "Cordova WKWebView Engine"
cordova-plugin-wkwebview-file-xhr 2.1.4 "Cordova WKWebView File XHR Plugin"
cordova-sqlite-storage 5.0.0 "Cordova sqlite storage plugin - cordova-sqlite-storage plugin version"
ionic-plugin-keyboard 2.2.1 "Keyboard"
phonegap-plugin-mobile-accessibility 1.0.5-dev "Mobile Accessibility"

Fabiano Spinelli
  • 3
  • 3

2 Answers2

2

Try adding to you config

 <preference name="AndroidInsecureFileModeEnabled" value="true" />
Eric
  • 9,870
  • 14
  • 66
  • 102
  • 1
    Thanks Eric! Using Cordova v10.0.0 with the Android Platform v10.0.0 (adding parameter suggested by you) I created a simple app that is capable of displaying images from the dataDirectory. Now I need to migrate all my code and plugins to the new updated container but it seems the right way. Thanks! – Fabiano Spinelli Oct 08 '21 at 08:21
0

The setting Eric suggested might work for you but it's not recommended. The new cordova-android version uses an API called WebViewAssetLoader to load your app on a proper http(s) scheme instead of file:. I suspect you get CORS issues while downloading your data.

Read more about the WebViewAssetLoader in Cordova: https://cordova.apache.org/announcements/2021/07/20/cordova-android-10.0.0.html

A better way is to figure out a proper CORS and to not use the insecure setting. You should find plenty of resources about CORS. Reply if you need help.

Niklas Merz
  • 187
  • 2
  • 7
  • Could you explain me better, I have not understood. The REST service used to download the files have the correct CORS settings, so the app is able to download and store the JSON catalogue and the JPG files in the cordova.file.dataDirectory. When I try to display the pictures in an HTML page (using cordova.file.dataDirectory the path is converted to file:///data/user/0/........./files/picture_file_name.jpg) the image is not displayed and in the view appears a broken image. Could you explain me what you mean when you say "load your app on a proper http(s) scheme instead of file"? Thanks! – Fabiano Spinelli Oct 08 '21 at 11:25
  • By default your app starts now with the URL `https://localhost/index.html` instead of `file://android_asset/www/index` or something. This is what I mean by "proper origin". As you are using local files for your images you might need this "insecure" setting. I am not sure if the file plugin or Cordova offers a way to load files in this directory via https://localhost/something. See this announcement for details about the WebViewAssetLoade: https://cordova.apache.org/announcements/2021/07/20/cordova-android-10.0.0.html – Niklas Merz Oct 08 '21 at 19:10