Day sixteen: offline todo

October 11, 2015

Creating an offline app with Meteor is definitly not simple. However, it can be achieved. This todo app is focused on trying to get a pub/sub offline flow working.

live demo

online

When the user submits a task. A server method is called and the freshly inserted task should be shown on the screen. That’s easy to achieve with this bit of standard Meteor code:

Todos = new Mongo.Collection('todos');

if (Meteor.isClient) {
	// Subscribe so we have some todos
	Meteor.subscribe('todos');

    // Insert a todo
    Meteor.call('insertTodo', 'my todo');
    ...
}

if (Meteor.isServer) {
	Meteor.methods({
    insertTodo: function(text) {
      Todos.insert({text: text});
    }
  });

  // Publish all todos
  Meteor.publish('todos', function() {
  	return Todos.find();
  });
}

With the online app working. Let’s take this to the ground and start hacking to get offline working!

offline

This is where it gets a little more complicated. The form submission should be cached and the data should be send to the server once the user is connected again. The groundDB package does a wonderful job of making this work.

Try it out. Submit a task while offline and reconnect. You will notice that the data is inserted correctly. unfortunately, groundDB does not show the new data from a publication since this is a server thing. I could not find a way to show the data while offline.

There is room for improvement in the UX area. However, the experiment is a success. Please leave a star on the repo and tell me what you think.

Comments