TypeScript ionic-framework Angular angular-cli Firebase offline PWA
Need help with angularfire2-offline?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.
adriancarriger

Description

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

208 Stars 53 Forks MIT License 232 Commits 29 Opened issues

Services available

Need anything else?

AngularFire2 Offline npm version

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

Build Status Codecov Dependency Status devDependency Status Downloads

Demos

Example Gif

Version Support

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.

Legacy Versions

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: '', 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
    .

Read Data Offline

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

@Component({ selector: 'project-name-app', template: <h1>{{ (info | async)?.name }}</h1> </pre><ul> <li item of items async> {{ item?.name }} </li> </ul> }) export class MyApp { info: AfoObjectObservable; items: AfoListObservable; 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.

AngularFire2 Offline specific features

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

Offline promises

  • 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

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 data

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

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
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:

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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.