【问题标题】：Firebase JS - Permanent offline storageFirebase JS - 永久离线存储
【发布时间】：2017-03-12 06:20:36
【问题描述】：

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

【问题讨论】：

你有什么运气吗？我一直在寻找相同的信息。这个 js 项目可能会有所帮助，它是为 phonegap 应用程序构建的。 github.com/yeldarby/offline-firebase
Pouchdb 是迄今为止我发现的最佳方式。 Pouchdb 位于应用程序和 firebase 之间，所有内容都本地存储在 pouchdb 上，firebase 检查是否有未同步的数据并进行同步。不是很优雅，但很有效。
@MinION，我在哪里可以找到 PouchDB-Firebase 集成教程或示例？
我无法找到除此处提供的示例之外的示例。我最终使用 PouchDB 和 MongoDB 实现了该应用程序

标签： javascript firebase

【解决方案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');
  }
}

方法镜像 object 和 list 的 AngularFire2 数据库读取方法。
支持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 { }

【讨论】：