Angularfire2-offline NPM

AngularFire2 Offline

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

Complete changelog

Demos

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 { AppComponent } from './app.component';

// Must export the config
export const firebaseConfig = {
  apiKey: '<your-key>',
  authDomain: '<your-project-authdomain>',
  databaseURL: '<your-database-URL>',
  storageBucket: '<your-storage-bucket>'
};

@NgModule({
  declarations: [AppComponent],
  imports: [
    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

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

@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(afo: AngularFireOffline) {
    this.info = afo.database.object('/info');
    this.items = afo.database.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.

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