Using a Firebase Angular application offline

Question

I am currently building an Angular 1.x application using Firebase and AngularFire as my backend/server of choice. Since the application/website is optimized for mobile devices and fits perfectly as an application when you add it to the homepage, I was wondering how to be able to let the user use it even if the phone is offline.

Searching on the web, I found that Firebase provides a keepSynced(true) for the Android Java's counterpart, however I was not able to find such an option for the js. I then went for a manual approach using HTML5's localStorage and a synchronization based on the time of last changes, but since I'm using some of AngularFire's handy commands (such as $save), most of my code is broken that way.

Any suggestion?

Answer 1

Use $provide.decorator angular docs
A good use case of $provide.decorator is when you need to do minor "tweak" on some third-party/upstream service, on which your module depends, while leaving the service intact (because you are not the owner/maintainer of the service) stackoverflow question.

Basically you could check if navigator.onLine === true inside decorator(or use any other approach to detect if request to firebase is going to fail) and then override some methods of angularFire based on your needs (write to localStorage instead of sending actual angularFire request)

Here's my example using angularfire overriding $add method with decorator

And here's the basic example of decorator

Answer 2

maintaining a fully functioning app for offline case manually can be a very tricky road, but there are a couple of ways where you can overcome that, you can try using kinvey, check the page I think it's exactly what you're looking for.

another way is to use indexedDB instead of localStorage, and choose a target of your save operations based on your connection status, there are a lot of resources you can find on the topic by simply googling about syncing offline html5 indexedDB. I hope this helped you