AngularFire2 Offline 

🔌 A simple wrapper for AngularFire2 to read and write to Firebase while offline, even after a complete refresh.


- Complete changelog

Demos

- Angular 2+ Demos: Read object, Read list, Write object, Write list -- tutorial 📗
- Ionic 2+ Demo -- tutorial 📘


Install

``bash
npm install angularfire2-offline angularfire2 firebase --save
`

Setup @NgModule

`ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AngularFireModule } from 'angularfire2';
import { AngularFireOfflineModule } from 'angularfire2-offline';

import { AppComponent } from './app.component';

// Must export the config
export const firebaseConfig = {
apiKey: '',
authDomain: '',
databaseURL: '',
storageBucket: ''
};

@NgModule({
declarations: [AppComponent],
imports: [
AngularFireModule.initializeApp(firebaseConfig),
AngularFireOfflineModule,
BrowserModule
],
bootstrap: [AppComponent]
})
export class AppModule { }
`

Usage

- Methods mirror AngularFire2 database methods for object and list.

$3

- Querying lists is supported

`ts
import { Component } from '@angular/core';
import {
AfoListObservable,
AfoObjectObservable,
AngularFireOffline } from 'angularfire2-offline';

@Component({
selector: 'project-name-app',
template:

{{ (info | async)?.name }}

• 
  {{ item?.name }}
  


})
export class MyApp {
info: AfoObjectObservable;
items: AfoListObservable;
constructor(afo: AngularFireOffline) {
this.info = afo.database.object('/info');
this.items = afo.database.list('/items');
}
}
``

$3

If writes are made offline followed by a page refresh, the writes will be sent when a connection becomes available.

- Write object
- Write list
- Resolve write conflicts

How it works

- While online, Firebase data is stored locally (as data changes the local store is updated)
- While offline, local data is served if available, and writes are stored locally
- On reconnect, app updates with new Firebase data, and writes are sent to Firebase
- Even while online, local data is used first when available which results in a faster load

License

angularfire2-offline is licensed under the MIT Open Source license. For more information, see the LICENSE file in this repository.