Error & Warning with Phonegap 3.5

[bdensmore]

When I try to run my app to test I'm getting the following error in my console:

ERROR: Failed to get/create local cache directory: 5

Then a little later in the app where we try to grab some cached images I see the following warning:

WARN: ImgCache not loaded yet! - Have you called ImgCache.init() first?

I am initializing imgcache in the following way:

var app = {
// Application Constructor
initialize: function() {
    this.bindEvents();
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicity call 'app.receivedEvent(...);'
onDeviceReady: function() {
    console.log('############ Device Ready! ###############');
    // write log to console
    ImgCache.options.debug = true;

    // increase allocated space on Chrome to 50MB, default was 10MB
    ImgCache.options.chromeQuota = 50*1024*1024;

    ImgCache.init(function(){
        console.log("Successfully Created Cache");
    },function(){
        console.log("Error Creating Cache!");
    });
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
    document.addEventListener('deviceready', this.onDeviceReady, false);
}

inside the ImgCache.init() I'm not seeing either of the log statements being output to the console which tells me that the init() method must not be firing, but I'm not really sure why as I do see in the console the ####Device Ready##### message. So I know we are getting in the onDeviceReady() function

I've updated to imgcache 0.7.3 just to see if that helps the issue, but that didn't seem to help.

Is there something I'm missing? If needed I can provide the config.xml as well.

Thank you,

Ben Densmore

[chrisben]

I see that the createCacheDir called by ImgCache.init method doesn't call the error callback in case of failure, that's why your 'error creating cache' log entry doesn't show up. This is something I'll have to fix.

Though your code would still fail to work properly. The problem appears when imgcache is trying to create its root directory (where it will store all local cached images). This tells me that your problem is likely to come from the cordova file plugin. Please compare your config.xml file to the one at the root of ths repository and see if you're not missing any declaration related to the File plugin. If you don't find anything special there, please paste your config.xml here and give us more info about your target platform (android + version /iOs..)

[chrisben]

Now with the code in the master branch the error callback will get called on this kind of error.

[bdensmore]

I am targeting both iOS and Android. Below is the contents of my config.xml which does contain all the same elements that your sample config file has. I do have some other stuff in there, so I'm not sure if maybe I have something conflicting. If you see anything that I may be missing, please let me know.

<?xml version="1.0" encoding="UTF-8"?>

<!-- config.xml reference: https://build.phonegap.com/docs/config-xml -->
<widget xmlns     = "http://www.w3.org/ns/widgets"
      xmlns:gap = "http://phonegap.com/ns/1.0"
       id        = "com.phonegap.tour"
      version   = "1.0.0">

<name>My App</name>

<description>
    My App
</description>

<author href="densmore.net" email="bdensmore@densmore.net">
    Ben Densmore
</author>

<!--
    If you do not want any permissions to be added to your app, add the
    following tag to your config.xml; you will still have the INTERNET
    permission on your app, which PhoneGap requires.
-->
<preference name="permissions"                value="none"/>

<!-- Customize your app and platform with the preference element. -->
<preference name="phonegap-version"           value="3.5.0" />          <!-- all: current version of PhoneGap -->
<preference name="orientation"                value="default" />        <!-- all: default means both landscape and portrait are enabled -->
<preference name="target-device"              value="universal" />      <!-- all: possible values handset, tablet, or universal -->
<preference name="fullscreen"                 value="false" />           <!-- all: hides the status bar at the top of the screen -->
<preference name="prerendered-icon"           value="true" />           <!-- ios: if icon is prerendered, iOS will not apply it's gloss to the app's icon on the user's home screen -->
<preference name="ios-statusbarstyle"         value="black-opaque" />   <!-- ios: black-translucent will appear black because the PhoneGap webview doesn't go beneath the status bar -->
<preference name="detect-data-types"          value="true" />           <!-- ios: controls whether data types (such as phone no. and dates) are automatically turned into links by the system -->
<preference name="exit-on-suspend"            value="false" />          <!-- ios: if set to true, app will terminate when home button is pressed -->
<preference name="auto-hide-splash-screen"    value="true" />           <!-- ios: if set to false, the splash screen must be hidden using a JavaScript API -->
<preference name="disable-cursor"             value="false" />          <!-- blackberry: prevents a mouse-icon/cursor from being displayed on the app -->
<preference name="android-minSdkVersion"      value="7" />              <!-- android: MIN SDK version supported on the target device. MAX version is blank by default. -->
<preference name="android-installLocation"    value="auto" />           <!-- android: app install location. 'auto' will choose. 'internalOnly' is device memory. 'preferExternal' is SDCard. -->

<feature name="http://api.phonegap.com/1.0/file"/>
<feature name="http://api.phonegap.com/1.0/device"/>
<feature name="http://api.phonegap.com/1.0/network"/>

<!-- Plugins -->

<!-- Core plugins -->
<gap:plugin name="org.apache.cordova.battery-status" />
<gap:plugin name="org.apache.cordova.camera" />
<gap:plugin name="org.apache.cordova.media-capture" />
<gap:plugin name="org.apache.cordova.console" />
<gap:plugin name="org.apache.cordova.contacts" />
<gap:plugin name="org.apache.cordova.device" />
<gap:plugin name="org.apache.cordova.device-motion" />
<gap:plugin name="org.apache.cordova.device-orientation" />
<gap:plugin name="org.apache.cordova.dialogs" />
<gap:plugin name="org.apache.cordova.file" />
<gap:plugin name="org.apache.cordova.file-transfer" />
<gap:plugin name="org.apache.cordova.geolocation" />
<gap:plugin name="org.apache.cordova.globalization" />
<gap:plugin name="org.apache.cordova.inappbrowser" />
<gap:plugin name="org.apache.cordova.media" />
<gap:plugin name="org.apache.cordova.network-information" />
<gap:plugin name="org.apache.cordova.splashscreen" />
<gap:plugin name="org.apache.cordova.vibration" />
<gap:plugin name="io.github.pwlin.cordova.plugins.fileopener" />

<feature name="Device">
    <param name="ios-package" value="CDVDevice" />
    <param name="android-package" value="org.apache.cordova.device.Device" />
</feature>
<feature name="File">
    <param name="ios-package" value="CDVFile" />
    <param name="android-package" value="org.apache.cordova.file.FileUtils" />
</feature>
<feature name="FileTransfer">
    <param name="ios-package" value="CDVFileTransfer" />
    <param name="android-package" value="org.apache.cordova.filetransfer.FileTransfer" />
</feature>
<!-- Third party plugins -->
<!-- A list of available plugins are available at https://build.phonegap.com/plugins -->
<!--
    <gap:plugin name="com.phonegap.plugins.barcodescanner" />
-->

<!-- Define app icon for each platform. -->
<icon src="icon.png" />
<icon src="res/icon/android/icon-36-ldpi.png"   gap:platform="android"    gap:density="ldpi" />
<icon src="res/icon/android/icon-48-mdpi.png"   gap:platform="android"    gap:density="mdpi" />
<icon src="res/icon/android/icon-72-hdpi.png"   gap:platform="android"    gap:density="hdpi" />
<icon src="res/icon/android/icon-96-xhdpi.png"  gap:platform="android"    gap:density="xhdpi" />
<icon src="res/icon/blackberry/icon-80.png"     gap:platform="blackberry" />
<icon src="res/icon/blackberry/icon-80.png"     gap:platform="blackberry" gap:state="hover"/>
<icon src="res/icon/ios/icon-57.png"            gap:platform="ios"        width="57" height="57" />
<icon src="res/icon/ios/icon-72.png"            gap:platform="ios"        width="72" height="72" />
<icon src="res/icon/ios/icon-57-2x.png"         gap:platform="ios"        width="114" height="114" />
<icon src="res/icon/ios/icon-72-2x.png"         gap:platform="ios"        width="144" height="144" />
<icon src="res/icon/webos/icon-64.png"          gap:platform="webos" />
<icon src="res/icon/windows-phone/icon-48.png"  gap:platform="winphone" />
<icon src="res/icon/windows-phone/icon-173.png" gap:platform="winphone"   gap:role="background" />

<!-- Define app splash screen for each platform. -->
<gap:splash src="res/screen/android/screen-ldpi-portrait.png"  gap:platform="android" gap:density="ldpi" />
<gap:splash src="res/screen/android/screen-mdpi-portrait.png"  gap:platform="android" gap:density="mdpi" />
<gap:splash src="res/screen/android/screen-hdpi-portrait.png"  gap:platform="android" gap:density="hdpi" />
<gap:splash src="res/screen/android/screen-xhdpi-portrait.png" gap:platform="android" gap:density="xhdpi" />
<gap:splash src="res/screen/blackberry/screen-225.png"         gap:platform="blackberry" />
<gap:splash src="res/screen/ios/screen-iphone-portrait.png"    gap:platform="ios"     width="320" height="480" />
<gap:splash src="res/screen/ios/screen-iphone-portrait-2x.png" gap:platform="ios"     width="640" height="960" />
<gap:splash src="res/screen/ios/screen-ipad-portrait.png"      gap:platform="ios"     width="768" height="1024" />
<gap:splash src="res/screen/ios/screen-ipad-landscape.png"     gap:platform="ios"     width="1024" height="768" />
<gap:splash src="res/screen/windows-phone/screen-portrait.jpg" gap:platform="winphone" />

<!--
    Define access to external domains.

    <access />            - a blank access tag denies access to all external resources.
    <access origin="*" /> - a wildcard access tag allows access to all external resource.

    Otherwise, you can specify specific domains:
-->
<access origin="*"/> <!-- allow local pages -->
<!--
    <access origin="http://phonegap.com" />                    - allow any secure requests to http://phonegap.com/
    <access origin="http://phonegap.com" subdomains="true" />  - same as above, but including subdomains, such as http://build.phonegap.com/
-->

[chrisben]

Can you reproduce this issue on both iOS and Android?

Perhaps it's a problem during the build process then, are you using phonegap build or you compile things yourself?

It could also be caused by an issue with the new 3.5 version of Cordova. Someone reported an issue with 3.4 (#62) but we haven't managed to pinpoint the problem. Could you perhaps try an older version? ImgCache was last known to work with Cordova 3.3.

[bdensmore]

I haven't tried on iOS yet, but I will try that now.

I am using phonegap build. I haven't tried doing a manual build yet. I just inherited this project and still getting up to speed on things, but I will try and do a manual build as well and see if that has any different results.

I'll also try with cordova 3.3 and see if the issue still arises.

Thank you for your help.

[bdensmore]

Okay, I just tried on my iPad and everything works fine. I can see the init method firing and the cached image paths show up correctly.

So this appears to be an Android only issue. I wonder if it's specific to 4.4? Both of my android devices are running KitKat 4.4. I'll have to try an emulator running something lower than 4.4 and see if I can isolate it to a specific version of Android.

[chrisben]

I can see someone else has the same kind of issue with Android and a new version of Cordova (3.4). That and the fact you got ImgCache to work with iOS seem to indicate that the issue lies with the File plugin for Android.

Looks like error code 5 is an Encoding error I wonder what encoding error is found there. Actually looking at the code, this error is raised when the given path is invalid (starts with a forward slash or contains a semicolon).

[bdensmore]

does that mean the methods getCachedFilePath() or getCachedFileFullPath() could be causing the encoding error?

I'm going to test with 3.3 and see if this issue goes away.

[chrisben]

I don't think so, ImgCache.Init doesn't call those methods. The problem arises when calling (line 357):

filesystem.root.getDirectory(localCacheFolder, {create: true, exclusive: false}, _getDirSuccess, _fail);

Cordova calls the _fail callback.

[bdensmore]

I just built a brand new Phonegap 3.5 app and added the latest imgcache.js and the init() method is being called. So it appears the issue I'm having has to do with trying to upgrade from Phonegap 3.1 to 3.5

I'm going to start migrating my current app to this new version and see if things behave differently, but so far so good.

[chrisben]

Great. Let me know.

[bdensmore]

Okay, so I moved all my code over from my old 3.1 app to a brand new 3.5 build.

1. I created a new app from the Phonegap CLI.
2. Copied over all my asset files.(js,css,fonts etc...)
3. Merged in code that was written in the old app

Once I did that I was starting to see the same errors I was seeing before. But after a couple of restarts of the Phonegap developer app and the Phonegap server I am now hitting the init() method correctly and as my app goes to different areas I can see in the console that the cached files are being written into the cache folder.

I'm hoping this solves my issue 100%. I do want to try running this on another android device just to make sure this is always working.

I'll keep you updated.

Thank you for your patience as I get though this.

Ben

[chrisben]

@bdensmore Are you still having a problem there? Please let me know.