Menu
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?
869
asked Aug 09 '15 06:08
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:
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.
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.
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.
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
153
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
