Troubles with Syncing PouchDB Database


#1

I doubt this is Ionic 2 specific, but I’m having some trouble syncing my local PouchDB database to a remote Cloudant database. Maybe my code just needs a sanity check, but absolutely nothing is happening when I try to sync.

Here’s the provider I created to handle it:

import {Storage, SqlStorage} from 'ionic/ionic';
import {Injectable} from 'angular2/core';

var PouchDB = require('pouchdb');

//To enable debugging with the PouchDB Inspector Plugin
window.PouchDB = PouchDB;

@Injectable()
export class DataService {
	constructor(){

		this.db = new PouchDB('todos');
		this.username = 'myuser';
		this.password = 'mypass';
		this.remote = 'https://' + this.username + ':' + this.password + '@myuser.cloudant.com/todos';

		let options = {
			live: true,
			retry: true
		};

		this.db.sync(this.remote, options);

	}

	getData() {

		return new Promise(resolve => {

			this.db.allDocs({

				include_docs: true

			}).then((result) => {

				this.data = [];

				let docs = result.rows.map((row) => {
					this.data.push(row.doc);
				});

				resolve(this.data);

			}).catch((error) => {

				console.log(error);

			});	

		});
	}

	addItem(item, listPage){
		this.db.put(item);
		listPage.loadItems();
	}

	updateItem(item){
		return this.db.put(item);
	}

	removeItem(item){
		this.db.get(item._id).then((doc) => {
			return this.db.remove(doc);
		});
	}

}

I can add and fetch data with PouchDB fine locally, but the sync code in the constructor doesn’t do anything. It executes, but there is no network requests to the database, no errors, just nothing happens. Even if I mangle the URL to the remote database it still doesn’t do anything so I’m reasonably sure it’s not a Cloudant issue.

Any thoughts?


#2

@joshmorony did you get this to work? I have PouchDB working in an Ionic 1 project and I’m looking to convert that app to Ionic 2 so I’d be interested to know if there are any problems.


#3

No but I haven’t tried any more since I posted this, PouchDB in general seems to work fine though it’s the syncing to Cloudant that I can’t get happening, so may be an issue with Cloudant or just me - not sure!


#4

Hi,

I try to implement PouchDB with Cloudant like your tutorial on Ionic 2, and it works when i run it with ionic serve but when i run it on real Android device, i’ve no data on the device. When i add new document, there is no update on Cloudant and when i add new document from Cloudant, i’ve no update on my device.

I’ve this in chrome inspect device console :

Failed to load resource: the server responded with a <my bluemix cloudant url> Failed to load resource: the server responded with a status of 403 (Forbidden) 

I also install cordova whitelist plugin, add the following meta in my index.html

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

Also add in my config.xml

<allow-navigation href="*" /> <allow-navigation href="http://*/*"/>

But still not working on device

Any idea ?

Thanks