Login/Register
Does Firebase allow an app to start in offline mode?
Asked Answered
Solved offlineoffline-cachingofflineappsfirebase
P

3

33

I'm thinking of using firebase to write a mobile app using PhoneGap and the HTML5 Application Cache.

Lets suppose each user has a list of TODO items. If the app is started when the phone is offline, will it be able to load data from the previous session and sync when a connection is established? If so I'm wondering how this is implemented because I couldn't find a reference to localStorage in firebase.js.

Popularity answered 3/2, 2013 at 7:32 Comment(0)
I
23

The short answer is: not yet.

Once an app has connected to Firebase, the client will cache data locally and be able to access data where there is an outstanding "on" callback even after a network connection is lost. However, this data is not persisted to disk, the "offline mode" will only work while the app is still running.

Full offline support will be coming in the future.

edit 2016 : full offline support is now possible for native iOS and Android apps: https://www.firebase.com/blog/2015-05-29-announcing-mobile-offline-support.html

Incurvate answered 3/2, 2013 at 8:9 Comment(6)
Ok, I look forward to that as it's a must-have feature for me. Hopefully it'll be done by the time I get an invite ;) – Popularity
I ran into this missing feature with Firebase today. It'll be great to have full application cache support. – Zakaria
I am waiting for this feature, Andrew. Btw, Firebase is great :) – Cathee
Response to email: <quote>Data is not retained between page refreshes. It is not stored in localStorage, it is just stored in the memory of your application. It can not be retrieved without internet, however, if you open a page, lose internet then make several changes to the data, it will be sync’d on reconnect. We’re looking for localStorage integration to come soon, but it’s not here yet.</quote> – Zeuxis
@Frank , does firebase need internet if I am only injecting it as a dependency and not creating a ref object? – Interest
So it seems, finally they have implemented this in browser! firebase.google.com/docs/database/web/offline-capabilities – Unboned
L
11

An alternative to Firebase that solves this problem for JS apps is CouchDb (server) <=> PouchDb (JS client). If you've implemented a nice clean client side service layer then porting to PouchDb should be fairly straight forward since both are NoSQL/JSON databases. CouchDb also supports indexed map/reduce views.

PouchDb is a Javascript API that implements a fully offline CouchDb client. It can auto detect and use either local storage, IndexDb or WebSQL to permanently persist local data while online or offline. The PouchDb API can be used to access either your local or remote databases (just change the URL) and wire up full syncing or filtered syncing between the two. There are many useful PouchDb plugins, code samples and a small wrapper library to support AngularJS's Q promises API.

Using PouchDb, you can safely start up your app while offline and then days later restart your app and sync all your CUD data changes to the server. This can result in update collisions so CouchDb supports record versioning that is designed to detect and track this. Consequently, you'll likely need server side logic to resolve these collisions. This is unavoidable for distributed systems with offline synchronization and a key feature of CouchDb. I'm not sure that Firebase supports this MVCC feature.

PouchDb is basically a reimplementation of Apache CouchDb including it's synchronization protocol. Both CouchDb and PouchDb are well tested, free and open source. Being open source means that a CouchDb server can also be deployed as an Intranet service - optionally syncing to an external cloud service. There are a number of CouchDb hosting providers.

IBM's Cloudant hosting team recently added their BigCouch clustering features to Apache CouchDb 2.0 project so now you can scale from Micro Db (PouchDb) => Single Server => Multi-Master (Replicated) => Big Couch Clustered / Geo Clustered. Unlike MongoDb, CouchDb safely supports single server deployment.

NOTE: PouchDb can also sync to CouchBase using the same protocol but Couchbase !== CouchDb. It's a commercial product.

Another cool trick is that PouchDb can be run inside a NodeJS server as a replacement for CouchDb. I think it's not (yet) ready for production use but very handy for unit testing. See express-pouchdb.

Links:

CouchDb Hosters (Updated July 2020)

DIY

Docker + CouchDb:

Security Model

One issue you'll need to consider when migrating to CouchDb is that it has a more limited access control model. This is partly due to it's replication algorithm. This blog post covers this in detail (better than the real definitive guide).

Adapters

In practice you'll probably want to use WebSQL for your PouchDB storage as it performs much better. - Here's the full details on the storage adapters

PouchDb Extras

There's a staggering array of new cool "Christmas Tree" goodies always poping out the open source door from the prolific PouchDb community.

One the best features of PouchDb is all the open source plugins (37) and UI framework adapters (12).

Lowson answered 21/5, 2015 at 22:54 Comment(0)
C
2

Very old question, yet problem still persists. I have been using firebase only for a few days and I couldn't find a satisfactory solution to this problem myself, so I thought I would share what I ended up doing.

On app start I check if I am online navigator.onLine. If not, I read from local storage and restore the firebase ref from it.

export const firebaseFromLocalStorage = (local, storeRef) => {
  // assuming data is array
  const localData = JSON.parse(localStorage.getItem(local)) || []
  localData.map(obj => {
    const key = obj['.key']
    delete obj['.key']
    storeRef
      .child(key)
      .set(obj)
  })
}

Then proceed as normal. When the app goes online it will sync its local state with the server just like when it starts online and loses connection momentarily.

Off course this implies that localStorage needs to be kept in sync with your firebase ref. I do this at each get operation.

Hope this helps

Charily answered 12/12, 2017 at 7:55 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.