javascript - Firebase JS - 永久离线存储

Question

我正在使用 Angular 2、Electron 和 Firebase 开发应用程序。该应用程序主要是一个离线应用程序，可以选择在线同步。问题是，目前 Firebase 不支持在浏览器上永久存储。我想在离线时使用 PouchDB，并在连接时将其同步到 Firebase。但是，我觉得要使两个数据库的数据保持一致需要付出太多努力。那么，对于 Firebase 应用程序的永久离线存储，是否有更好的选择？一个例子也会非常棒。

Answer 1

AngularFire2Offline

我处于同样的情况并创建了一个缓存只读的库 AngularFire2供离线使用的数据。如果页面离线加载，它将使用 localstorage，并在可用时使用 Firebase 数据。

演示

• Angular 2+ Demo -- tutorial 📗
• Ionic 2+ Demo -- tutorial 📘

基本用法

1。安装

npm install angularfire2-offline angularfire2 firebase --save

2。组件

import { Component } from '@angular/core';
import {
  AngularFireOffline,
  ListObservable,
  ObjectObservable } 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: ObjectObservable<any>;
  items: ListObservable<any[]>;
  constructor(afo: AngularFireOffline) {
    this.info = afo.database.object('/info');
    this.items = afo.database.list('/items');
  }
}

• 方法镜像 AngularFire2 数据库读取方法 object和 list .
• Querying lists支持

3。模块

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.forRoot(),
    BrowserModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }