androidhtmlcsscordovaphonegap

Not able to access CSS from the phone storage in Cordova

I am trying to access CSS file from phone storage in Cordova. The simple use case is to use dynamic CSS. Donwload the CSS from the server on a specific interval, store that in phone storage and use that in style.

The path would be statically defined on the HTML page.

<link rel="stylesheet" type="text/css" href="file:///storage/emulated/0/MYAPP_FOLDER/stlyefromstorage.css">

CSS Path (Phone Storage): file:///storage/emulated/0/MYAPP_FOLDER/stlyefromstorage.css

I tried with static CSS file content and that path but didn't work that.

Is it possible in Cordova?

stlyefromstorage.css

body {
  background-color: powderblue;
}
h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;
}
p {
  color: red;
  font-family: courier;
  font-size: 160%;
}

Index.html (Call from Cordova APK)

 <html>
    <head>
      <title>
        Hello File Storage CSS
      </title>
      <link rel="stylesheet" type="text/css" href="file:///storage/emulated/0/MYAPP_FOLDER/stlyefromstorage.css">
    </head>
    <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    </body>
    </html>
Solution

  • Just after post my question I found the solution as below:

    You can read/write your file from the installed app folder path as below:

    file:///storage/emulated/0/Android/data/APP_PACKAGE/files/stlyefromstorage.css

    In addition, We can access as below:

    file:///storage/emulated/0/APP_FOLDER/stlyefromstorage.css

    Note: To ensure you have to set android:requestLegacyExternalStorage="true" in your Androidmanifest.xml - tag for Android 10+ OS.

    Now my external CSS file is working as below:

      <link rel="stylesheet" type="text/css" href="file:///storage/emulated/0/Android/data/APP_PACKAGE/files/stlyefromstorage.css"  />

    Hope this will helps to others.