Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using a Firebase Angular application offline

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?

like image 869
Francesco S Avatar asked Aug 09 '15 06:08

Francesco S


People also ask

How do I integrate firebase with angular?

The Firebase team offers the package @angular/fire, which provides integration between the two technologies. To add Firebase support to your app open your workspace's root directory and run: This command installs the @angular/fire package and asks you a few questions. In your terminal, you should see something like:

How to enable offline persistence with angular FireStore?

With AngularFirestore you can enable offline persistence with one line of code. Offline data access is a key component of Progressive Web Apps. Combine Firestore’s offline data with a Service Worker and Firebase Hosting’s automatic SSL to make the foundation of a PWA.

What is offline data persistence in Firebase?

Firebase Documentation Build Send feedback Access data offline Cloud Firestore supports offline data persistence. This feature caches a copy of the Cloud Firestore data that your app is actively using, so your app can access the data when the device is offline. You can write, read, listen to, and query the cached data.

How do I add firebase support to my App?

To add Firebase support to your app open your workspace's root directory and run: This command installs the @angular/fire package and asks you a few questions. In your terminal, you should see something like: In the meantime, the installation opens a browser window so you can authenticate with your Firebase account.


1 Answers

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

like image 153
Medet Tleukabiluly Avatar answered Sep 30 '22 18:09

Medet Tleukabiluly