Search code examples
ipadcordovaios8local-files

PhoneGap and iOS 8: Failed to load local files ONLY after updating my app

I'm developing a PhoneGap application where the user is able to navigate some pages served by a server. When the user navigates to those pages, the app downloads all the files (HTML, CSS, JS, etc.) and store them in the iPad. This way, if the user tries to access those pages being offline, the local files are served.

This app worked fine in iOS 7. Yesterday I decided to update my iPad to iOS 8, and at first it seemed it worked: I can download the files, go offline and still navigate the pages using the local files. The only error I'm getting in the Console is:

[Error] Deprecated attempt to access property 'userAgent' on a non-Navigator object.

The problem comes when I update my app or use "phonegap local run ios" with the app installed. Whenever I do it, the app becomes unable to load the local files:

Failed to load resource: The requested URL was not found on this server. 
file:///var/mobile/Containers/Data/Application/7A3590E8-C78A-4F45-B5B9-51FD0BAFE524/Library/files/pages/7/7a56ab3cfa56fbd1b9c4becbf5dca4a2.jpg

The files are there, I can read them using the File plugin, but the WebView is unable to load them. I'm referencing them like this:

<img src="file://localhost/var/mobile/Containers/Data/Application/7A3590E8-C78A-4F45-B5B9-51FD0BAFE524/Library/files/pages/7/7a56ab3cfa56fbd1b9c4becbf5dca4a2.jpg" >

I tried to use both Library and Compatibility as iosPersistentFileLocation, but the result is the same. I'm marking all the downloaded files as "don't backup" to prevent them being included in iCloud:

fileEntry.setMetadata(function(){}, function(){}, {"com.apple.MobileBackup": 1});

At first I thought this was caused by the known bug to load local files in iOS 8, but my app IS loading them, it just stops working after I update the app.

I have PhoneGap and all the plugins updated to the last version. I also tried using Cordova and the same happens.

Anybody knows how can I solve this or where should I report this bug?

Thank you!

Solution

  • I managed to solve it! I was using fileEntry.toURL to get the file URLs to use in my HTML. If I use 

    fileEntry.toInternalURL()

    instead, it works fine.

    With internal URL the URLs are like this:

    cdvfile://localhost/persistent/pages/7/0b0cc746c5e90ee7fc94b2c15d37d43e.png