Cache angularfire2 data for offline use.
npm install angularfire2-offline-v5Angular 2+ Demos: Read object, Read list, Write object, Write list -- tutorial š
Ionic 2+ Demo -- tutorial š
2.x to 4.x for AngularFire2? Try the upgrade tutorial
AngularFire2 2.x use the @two branch of this repo for install instructions and tutorials (Angular/Ionic).
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 { AngularFireDatabaseModule } from 'angularfire2/database';
import { AppComponent } from './app.component';
export const firebaseConfig = {
apiKey: '',
authDomain: '',
databaseURL: '',
storageBucket: ''
};
@NgModule({
declarations: [AppComponent],
imports: [
AngularFireDatabaseModule,
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
- preserveSnapshot is not supported
`ts
import { Component } from '@angular/core';
import {
AfoListObservable,
AfoObjectObservable,
AngularFireOfflineDatabase } from 'angularfire2-offline/database';
@Component({
selector: 'project-name-app',
template:
})
export class MyApp {
info: AfoObjectObservable;
items: AfoListObservable;
constructor(afoDatabase: AngularFireOfflineDatabase) {
this.info = afoDatabase.object('/info');
this.items = afoDatabase.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
AngularFire2 Offline specific features
In addition to wrapping most database features from AngularFire2, a minimal amount of offline specific features are provided:
$3
- Regular promises - Making a write to Firebase will return a promise as expected. The promise will complete after the data has been saved to Firebase.
- Offline promises - If you application only needs to know when the write has been saved offline (which will sync on reconnect) you can access the offline promise within the regular promise by calling promise.offline.then().
#### Offline promise example
`ts
const promise = this.afoDatabase.object('car').update({maxSpeed: 100});
promise.offline.then(() => console.log('offline data saved to device storage!'));
promise.then(() => console.log('data saved to Firebase!'));
`
Also see working with promises
$3
The reset method is useful for deleting sensitive data when a user signs out of an application. This also helps prevent permission errors when using Firebase auth.
#### Use reset with caution
If writes are made while offline reset will delete them before they can reach Firebase.
#### reset example
`ts
onUserSignout() {
this.afoDatabase.reset()
}
`
#### Calling reset on specific references
You can reset a specific Firebase reference by passing the reference string to the reset method
`ts
onUserSignout() {
this.afoDatabase.reset('my/firebase/ref')
}
`
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
Contributing to AngularFire2 Offline
Pull requests are welcome! If you have a suggested enhancement, please open an issue. Thanks!
Here is how you can setup a development environment:
$3
1. git clone https://github.com/adriancarriger/angularfire2-offline.git
1. cd angularfire2-offline
$3
1. cd examples/angular-cli
1. yarn
1. npm start
$3
1. Open a new shell/terminal
1. cd angularfire2-offline
1. yarn
1. npm run start-dev`