webView on Android doesn't load local CSS or link to other local HTML files correctly

Solar2D General Questions/Discussion
#1

So I have some credits for my app and they are handled in HTML.

I have four files: credits.html , photos.html , credits.css , and reset.css.  All four files are in the Assets/About folder which is right off the main folder with all the LUA files.

Because I might want to update the credits content without having to release a new version, I do a check and download updated content if it is on my web site.  I use this code to load the content:

if doesFileExist( "credits.html", system.DocumentsDirectory ) and doesFileExist( "credits.css", system.DocumentsDirectory ) and doesFileExist( "reset.css", system.DocumentsDirectory ) and doesFileExist( "photos.html", system.DocumentsDirectory ) then creditsWebView:request( "credits.html", system.DocumentsDirectory ) else creditsWebView:request( "Assets/About/credits.html", system.ResourceDirectory ) end

When I disable Internet on my tablet and launch the app for the first time, the local credits.html loads, but without any CSS.  In the HTML, the CSS is coded correctly, as such:

\<link rel="stylesheet" href="reset.css"\> \<link rel="stylesheet" href="credits.css"\>

So it should be loaded from the same folder.  But it is not. 

I then click the link to load the photos.html page, and I get this error:

The webpage at file:///data/data/com.thegdogentertainment.myappname/files/coronaResources/Asset/About/photos.html might be temporarily down or it may have moved permanently to a new web address.

The link is coded correctly, as such:

\<a href="photos.html"\>Photo and image credits\</a\>

So it should be loaded from the same folder, where it does reside, but it doesn’t.

If I enable Wifi and let it download the credits.zip file, which contains the exact same four files (with a text change so I can tell which set of files is loading), everything loads correctly and displays as expected from the system.DocumentsDirectory folder.

Why is the content not loading correctly from the system.ResourceDirectory folder on Android?  Of course, it does work correctly in the iOS build   :slight_smile:

#2

This is likely due to the system.ResourceDirectory being the APK and on Android, it’s not a folder but a Zip archive file (simply renamed to .apk).  Android can’t read that directly.  We extract out certain files needed for display.* objects or anything that you have a system.pathForFile() for.  Please see:

http://docs.coronalabs.com/api/library/system/pathForFile.html

for a discussion about this issue.  You basically need to copy the .css file to your system.documentsDirectory to be able to access it.

Rob

#3

Ahh, the joys of Corona and Android.  :slight_smile:

I didn’t think this had anything to do with that since CSS is not one of the file types listed in that discussion.  As well, the webView was able to open up the initial HTML file (listed as one of the file types that would be problematic), so I didn’t think this would be related.

Sadly, I had already assumed that this would require some sort of workaround, so I was already working on just ZIPping up the four files and if they are not found in the Documents directory, then unzip them there at that time.

I am slightly terrified to see what gotchas there are when I try to port these apps to Windows Phone 8 with Corona Cards.  :slight_smile:

Thanks for the answer, Rob.

#4

Could this be related to: http://forums.coronalabs.com/topic/52008-web-view-doesnt-show-icon-anymore/ ?

#5

Sounds like it could be related, although I thought I tried the last public release and it happened there as well.  I could be mistaken there.

I ended up just ZIPping up the files and then uncompressing them to the Documents folder if I see the user is on Android.

#6

This is likely due to the system.ResourceDirectory being the APK and on Android, it’s not a folder but a Zip archive file (simply renamed to .apk).  Android can’t read that directly.  We extract out certain files needed for display.* objects or anything that you have a system.pathForFile() for.  Please see:

http://docs.coronalabs.com/api/library/system/pathForFile.html

for a discussion about this issue.  You basically need to copy the .css file to your system.documentsDirectory to be able to access it.

Rob

#7

Ahh, the joys of Corona and Android.  :slight_smile:

I didn’t think this had anything to do with that since CSS is not one of the file types listed in that discussion.  As well, the webView was able to open up the initial HTML file (listed as one of the file types that would be problematic), so I didn’t think this would be related.

Sadly, I had already assumed that this would require some sort of workaround, so I was already working on just ZIPping up the four files and if they are not found in the Documents directory, then unzip them there at that time.

I am slightly terrified to see what gotchas there are when I try to port these apps to Windows Phone 8 with Corona Cards.  :slight_smile:

Thanks for the answer, Rob.

#8

Could this be related to: http://forums.coronalabs.com/topic/52008-web-view-doesnt-show-icon-anymore/ ?

#9

Sounds like it could be related, although I thought I tried the last public release and it happened there as well.  I could be mistaken there.

I ended up just ZIPping up the files and then uncompressing them to the Documents folder if I see the user is on Android.