10

I'm really baffled after reading PhoneGap on iOS with absolute path URLs for assets and have a couple of questions:

  • Does Phonegap supports root relative path? For instance Ionic framework for Hybrid Mobile development has such kind of path in their samples:

    <script src="//ionic/js/ionic.bundle.min.js"></script>

  • What are the best practices for Phonegap's path?

Community
  • 1
  • 1
Ilya Buziuk
  • 1,839
  • 5
  • 27
  • 43

3 Answers3

11

Basically in phone gap development everything that concerns your code resides in the www folder. 

-myApp
   -www
      -index.html
      -img
      -js
      -css
      -libraries
      -templates

The best would be to just refer the files as js/file.js and css/file.css i.e relative to index.html.

Root relative paths may conflict depending on the platform and thus would be a unnecessary hassle.

Root Relative Paths:

doing something like this : 

<link href="/css/app.css">

This will work in your browser if you have a local server setup and have set your myApp/www folder as the root.

But when you build your app in cordova and test it on your phone, it will display incorrectly as it does not have any reference to that server root and will reference it as file:///.

Absolute paths

An absolute path would require you to mention the complete address. When you are creating your app, your code resides in the myApp/www folder. But when you build the app(assuming android), it is moved to the platforms/android/assets/www folder. So your absolute paths will again be wrong.

Remote Server

Your app obviously interacts with a remote server . If you store your images on your remote server, then you must refer to them with absolute paths in your application.

Varun Nath
  • 5,570
  • 3
  • 23
  • 39
  • thanks for your answer. However it mostly covers the second question. Could you give me more details about quirks with root relative path? I can't find any docs about it. And what about Ionic style with src="//ionic/js/ionic.bundle.min.js" ? – Ilya Buziuk Jul 30 '14 at 19:49
  • @natvarun So, Ionic guys screwed thing up and fixing it now ;) – Ilya Buziuk Jul 31 '14 at 07:05
  • In my case, setting paths relativd to `index.html` doesn't work. `library/css/libs/slick/slick.js` results in `file:///library/css/libs/slick/slick.js` once encapsulated in an Android app, which obvisouly isn't found. Do you understand why I am facing this behaviour ? – Alexandre Bourlier Jan 20 '16 at 14:27
  • I guess you should start a new thread - it is not likely that someone will answer in the comment + it is a bad practice and not really fits stack rules – Ilya Buziuk May 14 '16 at 12:04
2

I stumbled upon this old thread while trying to solve the same/similar challenge with images not rendering on the device but, oddly, would render when running with a live server or with the Chrome browser.

If you're reading this, the filespec to your image is also case-sensitive. Chrome doesn't care, but Cordova (Phonegap) does!

eppineda
  • 667
  • 3
  • 19
0

Refer this link https://github.com/apache/cordova-ios/issues/883#issuecomment-643657781

you can add prefrence tag in config.xml lik this

<preference name="scheme" value="app" />

In cardova & phonegap they use custom protocol(app://) for refering to file available locally.

Sandeep Kumar
  • 11
  • 3