There's been a long-standing misconception that absolute paths are off-limits in Cordova mobile apps. But what if we told you that you can actually use absolute paths for assets in your iOS and Android projects? The truth is, you can – as long as you configure the scheme and hostname within your config.xml file.
This game-changing feature has been part of the Cordova ecosystem for years, and it's been quietly improving the way we handle asset loading. In fact, the June 2020 release notes for Cordova version 6 explicitly mention these configuration settings.
So, what exactly do these scheme and hostname attributes do? Simply put, they allow you to define the protocol and domain that your app uses to serve its content. You can set these preferences within the platform blocks of your config.xml file.
Configuring Scheme and Hostname
To get started with absolute paths in Cordova, you'll need to add the scheme and hostname attributes to your config.xml file. Here's an example:
`xml
xmlns:cdv="http://cordova.apache.org/ns/1.0" id="io.cordova.hellocordova" version="1.0.0">
`
Loading Assets with Absolute Paths
Now that you've configured your scheme and hostname, you can load assets using absolute paths. For example:
`html
`
Compatibility
It's worth noting that while absolute paths are supported in both iOS and Android, there is one exception: the browser platform. In this case, the scheme and hostname attributes are built-in, so you don't need to configure them separately.
However, if you're developing for Cordova's Electron target, things get a bit more complicated. Unfortunately, scheme and hostname aren't supported in Electron, which means you'll need to stick with relative paths for assets loaded from within the app.
A Brief History of Absolute Paths in Cordova
You might be wondering how absolute paths came to be in Cordova. The truth is, it's a relatively recent addition to the platform. In the past, Cordova used file:/// paths like this:
`
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
`
But with the introduction of scheme and hostname, things got a lot simpler:
`
app://localhost/index.html
`
Conclusion
In this article, we've explored how to use absolute paths for assets in your Cordova mobile apps. By configuring the scheme and hostname within your config.xml file, you can load assets using absolute URLs – making it easier than ever to develop and deploy your Swift app development projects.