pedrocoder/angularfire2-offline

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

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 📘

Legacy Versions

• Upgrading from 2.x to 4.x for AngularFire2? Try the upgrade tutorial
• To support AngularFire2 2.x use the @two branch of this repo for install instructions and tutorials (Angular/Ionic).
• This branch (master) is a wrapper for the latest version of AngularFire2 (4.x)

Install

npm install angularfire2-offline angularfire2 firebase --save

Setup @NgModule

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 { }

Usage

• Methods mirror AngularFire2 database methods for object and list.

Read Data Offline

• 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>
  `
})
export class MyApp {
  info: AfoObjectObservable<any>;
  items: AfoListObservable<any[]>;
  constructor(afoDatabase: AngularFireOfflineDatabase) {
    this.info = afoDatabase.object('/info');
    this.items = afoDatabase.list('/items');
  }
}

Write data offline

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

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:

Clone repo

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

Setup example

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

Setup development environment

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

License

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