π A simple wrapper for AngularFire2 to read and write to Firebase while offline, even after a complete refresh.
Angular 2+ Demos:
Read object, Read list, Write object, Write list -- tutorial πIonic 2+ Demo
-- tutorial πThe latest version of angularfire2-offline only supports Angular 4. If you would like to upgrade to a more recent version, please try out Cloud Firestore which comes with offline support. For more info see issue #89.
2.x
to 4.x
for AngularFire2? Try the upgrade tutorialAngularFire2 2.x
use the @two branch of this repo for install instructions and tutorials (Angular/Ionic).npm install angularfire2-offline angularfire2 firebase --save
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: '<your-key>',
authDomain: '<your-project-authdomain>',
databaseURL: '<your-database-URL>',
storageBucket: '<your-storage-bucket>'
};
@NgModule({
declarations: [AppComponent],
imports: [
AngularFireDatabaseModule,
AngularFireModule.initializeApp(firebaseConfig),
AngularFireOfflineModule,
BrowserModule
],
bootstrap: [AppComponent]
})
export class AppModule { }
import { Component } from '@angular/core';
import {
AfoListObservable,
AfoObjectObservable,
AngularFireOfflineDatabase } from 'angularfire2-offline/database';
@Component({
selector: 'project-name-app',
template: `
<h1>{{ (info | async)?.name }}</h1>
<ul>
<li *ngFor="let item of items | async">
{{ item?.name }}
</li>
</ul>
`
})
export class MyApp {
info: AfoObjectObservable<any>;
items: AfoListObservable<any[]>;
constructor(afoDatabase: AngularFireOfflineDatabase) {
this.info = afoDatabase.object('/info');
this.items = afoDatabase.list('/items');
}
}
If writes are made offline followed by a page refresh, the writes will be sent when a connection becomes available.
In addition to wrapping most database features from AngularFire2, a minimal amount of offline specific features are provided:
promise.offline.then()
.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
reset
- delete offline dataThe 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.
reset
with cautionIf writes are made while offline reset
will delete them before they can reach Firebase.
reset
exampleonUserSignout() {
this.afoDatabase.reset()
}
reset
on specific referencesYou can reset
a specific Firebase reference by passing the reference string to the reset
method
onUserSignout() {
this.afoDatabase.reset('my/firebase/ref')
}
Pull requests are welcome! If you have a suggested enhancement, please open an issue. Thanks!
Here is how you can setup a development environment:
git clone https://github.com/adriancarriger/angularfire2-offline.git
cd angularfire2-offline
cd examples/angular-cli
yarn
npm start
cd angularfire2-offline
yarn
npm run start-dev
angularfire2-offline is licensed under the MIT Open Source license. For more information, see the LICENSE file in this repository.