PouchDB with jquery mobile & phonegap

Question

I'm trying to use the above three together in a mobile (android) app. When I run it in firefox (20), Ubuntu (12.04), it works pretty goood, but when I load it into the phone (or the android emulator) it doesn't seem to be able to store the data. When running in firefox the data gets stored inside the user profile directories in an sqlite db, but with an app? How to I tell PouchDB where to store the database? And how would I do it?

--Additional information

I've been doing some more testing with the PouchDB adapter types - in firefox and chrome. WebSQL is not supported in firefox hence the use of chrome to test that. Here are the scripts I'm loading in index.html.

<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.3.1.min.css" />
<script type="text/javascript" charset="utf-8" src="jquery.mobile/jquery-1.9.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery.mobile/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-2.6.0.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery.mobile/pouch-20130419/pouchdb-nightly.js"></script>
<script type="text/javascript" charset="utf-8" src="testa.js"></script>

Here is some of the relevant code which generates these logs

console.log("Creating the database" + JSON.stringify(userdata));
Pouch('idb://'+userdata.username, function(err, database){
    if (err) {
    console.log('Failed to create database:'+ JSON.stringify(err));
        return {'ok': false, 'reason':'Failed to create database:'+ userdata.username};
    } else {
        pdb = database;
        console.log('Created database:'+ JSON.stringify(userdata.username));
        Pouch('idb://cred', function(err, credb){
           if (err) {
               console.log('Failed to create database: cred'+ JSON.stringify(err));
               //
               return {'ok': false, 'reason':'Failed to create database: cred'};
           } else {
               pdbcred = credb;
               console.log('Created database: cred');
               ...

In firefox, the output of the console log is as follows, with idb adaptor - Pouch("idb://idbx")

testa.js (line 296)     Creating the database{"username":"idbx","email":"idbx@asdf.asdf","password":"password"} 
pouchd...htly.js (line 759) idb://idbx 
pouchd...htly.js (line 764) ["idb://idbx","idb","idbx"] 
pouchd...htly.js (line 767) idb 
pouchd...htly.js (line 768) {} 
pouchd...htly.js (line 772) {"name":"idbx","adapter":"idb"} 
pouchd...htly.js (line 759) idb://_pouch__allDbs 
pouchd...htly.js (line 764) ["idb://_pouch__allDbs","idb","_pouch__allDbs"] 
pouchd...htly.js (line 767) idb 
pouchd...htly.js (line 768) {} 
pouchd...htly.js (line 772) {"name":"_pouch__allDbs","adapter":"idb"} 
testa.js (line 303)     Created database:"idbx" 
pouchd...htly.js (line 759) idb://cred 
pouchd...htly.js (line 764) ["idb://cred","idb","cred"] 
pouchd...htly.js (line 767) idb 
pouchd...htly.js (line 768) {} 
pouchd...htly.js (line 772) {"name":"cred","adapter":"idb"} 
pouchd...htly.js (line 759) idb://_pouch__allDbs 
pouchd...htly.js (line 764) ["idb://_pouch__allDbs","idb","_pouch__allDbs"] 
pouchd...htly.js (line 767) idb 
pouchd...htly.js (line 768) {} 
pouchd...htly.js (line 772) {"name":"_pouch__allDbs","adapter":"idb"} 
testa.js (line 311)     Created database: cred 
testa.js (line 328)     Saved document:{"_id":"idbx","password":"password","email":"idbx@asdf.asdf","savecred":true}:{"ok":true,"id":"idbx","rev":"1-2f0ff07a7c0d8fb6f172a6bfe8a9174f"}

Changed the adaptor to websql and tested on chrome - works fine.

Loaded the websql version apk into the emulator (using google APIs rather than the 4.2.2 apis) and this is what comes up on logcat (with idb the logcat is identical):

04-19 00:28:26.571: I/Web Console(22733): Creating the database{"username":"websqlo","email":"websqlo@asdf.asdf","password":"password"} at file:///android_asset/www/testa.js:296
04-19 00:28:26.601: I/Web Console(22733): websql://websqlo at file:///android_asset/www/jquery.mobile/pouch-20130419/pouchdb-nightly.js:759
04-19 00:28:26.611: I/Web Console(22733): ["websql://websqlo","websql","websqlo"] at file:///android_asset/www/jquery.mobile/pouch-20130419/pouchdb-nightly.js:764
04-19 00:28:26.631: I/Web Console(22733): "websql" at file:///android_asset/www/jquery.mobile/pouch-20130419/pouchdb-nightly.js:767
04-19 00:28:26.651: I/Web Console(22733): {} at file:///android_asset/www/jquery.mobile/pouch-20130419/pouchdb-nightly.js:768
04-19 00:28:26.751: E/Web Console(22733): Uncaught TypeError: Cannot call method 'valid' of undefined at file:///android_asset/www/jquery.mobile/pouch-20130419/pouchdb-nightly.js:769

The entries from pouchdb-nightly were from some console.log statements I added into the pouch js file. The actual code around the js is as follows (had to stringify because logcat won't show anything but plain text):

Pouch.parseAdapter = function(name) {
  console.log(name);
  var match = name.match(/([a-z\-]*):\/\/(.*)/);
  var adapter;
  if (match) {
    // the http adapter expects the fully qualified name
    console.log(JSON.stringify(match));
    name = /http(s?)/.test(match[1]) ? match[1] + '://' + match[2] : match[2];
    adapter = match[1];
    console.log(JSON.stringify(adapter));
    console.log(JSON.stringify(Pouch.adapters))
    if (!Pouch.adapters[adapter].valid()) {
      throw 'Invalid adapter';
    }
    console.log(JSON.stringify({name: name, adapter: match[1]}));
    return {name: name, adapter: match[1]};
  }

Would appreciate any help/suggestions on a way to solve this..thanks to chesles and frequent for your suggestions - I will go and look at them now. FYI - a url like Pouch("idb://testpath/testdb") doesn't work...complains about meta-data. Somewhere in the back of my head I'm thinking that there should be a way to tell PouchDB where to store the file (especially in a app) and also things about read/write permissions on the directories. Perhaps I should be looking somewhere else...all help is welcome.

Answer 1

So there's a few things to note here:

1. PouchDB will use the best adapter available for a platform if you simply give it a database name, with no adapter:// prefix. If you want to use a local-storage adapter, this is probably the best way to create databases, since you can use the same code no matter what browser you are running on; as long as it supports WebSQL or IndexedDB it should just work.

2. There was an open issue tracking support for PhoneGap for android here, which was closed 4 days ago, confirmed to be working. Unfortunately I can't personally confirm this right now, but it should work.

3. Check out the notes from howonlee on pull request 670, specifically about wrapping everything in a deviceready callback:

   Note that we must create and use the db inside an onDeviceReady() function, because we use websql which only becomes available to us after the deviceready event.