Repository files navigation

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

• Complete changelog

• 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 outCloud Firestore which comes with offline support. For more info seeissue #89.

• Upgrading from2.x to4.x for AngularFire2? Try theupgrade tutorial
• To supportAngularFire2 2.x use the@two branch of this repo forinstall instructions and tutorials (Angular/Ionic).
• This branch (master) is a wrapper for the latest version of AngularFire2 (4.x)

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';exportconstfirebaseConfig={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]})exportclassAppModule{}

• Methods mirror AngularFire2 database methods forobject andlist.

• Querying lists is supported
• preserveSnapshot is not supported

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>  `})exportclassMyApp{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.

• Write object
• Write list
• Resolve write conflicts

In addition to wrapping most database features fromAngularFire2, a minimal amount of offline specific features are provided:

• 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 callingpromise.offline.then().

constpromise=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 seeworking with promises

Thereset 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.

If writes are made while offlinereset will delete them before they can reach Firebase.

onUserSignout(){this.afoDatabase.reset()}

You canreset a specific Firebase reference by passing the reference string to thereset method

onUserSignout(){this.afoDatabase.reset('my/firebase/ref')}

• 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

Pull requests are welcome! If you have a suggested enhancement, pleaseopen an issue. Thanks!

Here is how you can setup a development environment:

1. git clone https://github.com/adriancarriger/angularfire2-offline.git
2. cd angularfire2-offline

1. cd examples/angular-cli
2. yarn
3. npm start

1. Open a new shell/terminal
2. cd angularfire2-offline
3. yarn
4. npm run start-dev

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