Absolute paths for assets in iOS & Android Cordova apps

There's an abundance of outdated information that states you can only use relative paths for assets in Cordova mobile apps. That information is incorrect: you can use absolute paths for assets in Cordova by configuring the scheme and hostname within config.xml. These configuration settings have been in Cordova for several years, and they are mentioned in the June 2020 Cordova version 6 release notes.

Here's what the Cordova documentation says about scheme and hostname:

Attributes	Description
scheme String Android & iOS	Default: Android: https iOS: not defined, but falls back to app if the value is invalid. Allowed values: Android: http or https iOS: Any non-reserved schemes. (Example Reserved Schemes) This property contains the scheme which your app content is served from.
hostname String Android & iOS	Default: localhost This property contains the hostname which the app content is served from. If the preference scheme is not defined for iOS, the hostname value will be ignored.

Using scheme and hostname within config.xml

You can set the scheme and hostname preferences within the respective platform blocks.

<?xml version="1.0" encoding="UTF-8"?>
<widget
    xmlns="http://www.w3.org/ns/widgets"
    xmlns:cdv="http://cordova.apache.org/ns/1.0"
    id="io.cordova.hellocordova"
    version="1.0.0"
>
    <platform name="android">
        <preference name="scheme" value="https" />
        <preference name="hostname" value="localhost" />
    </platform>

    <platform name="ios">
        <preference name="scheme" value="app" />
        <preference name="hostname" value="localhost" />
    </platform>

    <!-- Other config settings... -->
</widget>

With this, you can load your assets using absolute paths:

<!-- stylesheet -->
<link rel="stylesheet" href="/assets/style.css" />

<!-- script -->
<script src="/assets/app.js"></script>

<!-- image -->
<img alt="DEV example" src="/assets/example.png">

Compatibility

With the browser platform, absolute paths are supported by the web platform itself: schemes and hostnames are built-in. However, Cordova's Electron target does not support scheme or hostname, so Electron Cordova apps must load assets using relative paths.

Did Cordova always work like this?

Cordova has not always supported scheme and hostname on all mobile platforms, but it was added to better support CORS and simplify asset loading. Before these settings were available, Cordova used file:// paths like the one below:

file:///Users/tyler/Library/Developer/CoreSimulator/Devices/AFB24668-7341-4D77-9C7D-D75EF6FF602D/data/Containers/Bundle/Application/435E23A3-9004-4160-87F3-13A3895F734C/HelloWorld.app/www/index.html

With the scheme and hostname set, the URL becomes much shorter:

app://localhost/index.html

Using the file path

If you would like to get an asset's file:// path, the first-party cordova-plugin-file plugin allows you to access the absolute file path from within the application's JavaScript:

let img = cordova.file.applicationDirectory + 'www/assets/img.png';

Other resources

To learn more about Cordova's approach to handling locally hosted content, check out this GitHub issue on the W3C WebView Community Group on the usage-and-challenges repo.

---

I hope this post helped you. Please drop a comment if I got anything wrong and I'll get it updated.