Cordova React Notes

README.md

Cordova Apps with React

React and OnsenUI work great for cordova apps, there are a couple things to keep in mind when working with Cordova Apps.

Relative Paths not Absolute Paths

Since Cordova Apps load from the file system they do not work great with absolute urls, they use relative urls, which means

<script src="/bundle.js"></script> will not work as you might expect when using a web server. Since the root file system of

device is not where the files are located. You can resolve this using a relative url.

<script src="./bundle.js"></script> - using create-react-app when you build your bundle, you will need to modify the index

file to change the script tags to be relative instead of absolute, this also is true for images, and any other files in your system.

HashRouter

If you are using react-router, make sure you use the HashRouter and not the BrowserRouter, since the UIWebView loads via the file system, push state will not work and will result is file not found.

Content Security Policy Settings

Customize this policy to fit your own app's needs. For more guidance, see: https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy

Some notes:

• gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
• https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
• Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
• Enable inline JS: add 'unsafe-inline' to default-src

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">

Mobile Device Meta Tag Information

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

Other meta tags

<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">

I am having an issue with routing on a React Application running on Android through Cordova. I tried all the above and the app works fine on iOS but not on Android! :(
Thanks

Years later this is still saving lives. Cheers!