{"id":15184610,"url":"https://github.com/adriancarriger/angularfire2-offline","last_synced_at":"2025-10-01T23:30:53.890Z","repository":{"id":57179878,"uuid":"79089266","full_name":"adriancarriger/angularfire2-offline","owner":"adriancarriger","description":"🔌 A simple wrapper for AngularFire2 to read and write to Firebase while offline, even after a complete refresh.","archived":true,"fork":false,"pushed_at":"2018-03-09T22:24:13.000Z","size":12893,"stargazers_count":206,"open_issues_count":29,"forks_count":48,"subscribers_count":26,"default_branch":"master","last_synced_at":"2025-01-14T16:28:52.728Z","etag":null,"topics":["angular","angular-2","angular-cli","angular4","angularfire2-offline","firebase","firebase-data","ionic-framework","offline","pwa"],"latest_commit_sha":null,"homepage":"https://angularfire2-offline.firebaseapp.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/adriancarriger.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-16T06:26:26.000Z","updated_at":"2025-01-09T09:21:34.000Z","dependencies_parsed_at":"2022-09-14T03:30:57.742Z","dependency_job_id":null,"html_url":"https://github.com/adriancarriger/angularfire2-offline","commit_stats":null,"previous_names":[],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adriancarriger%2Fangularfire2-offline","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adriancarriger%2Fangularfire2-offline/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adriancarriger%2Fangularfire2-offline/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adriancarriger%2Fangularfire2-offline/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adriancarriger","download_url":"https://codeload.github.com/adriancarriger/angularfire2-offline/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234909086,"owners_count":18905504,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-2","angular-cli","angular4","angularfire2-offline","firebase","firebase-data","ionic-framework","offline","pwa"],"created_at":"2024-09-27T17:21:00.196Z","updated_at":"2025-10-01T23:30:48.356Z","avatar_url":"https://github.com/adriancarriger.png","language":"TypeScript","readme":"# AngularFire2 Offline [![npm version](https://badge.fury.io/js/angularfire2-offline.svg)](https://badge.fury.io/js/angularfire2-offline)\n\n🔌 A simple wrapper for [AngularFire2](https://github.com/angular/angularfire2) to read and write to Firebase while offline, even after a complete refresh.\n\n[![Build Status](http://img.shields.io/travis/adriancarriger/angularfire2-offline/master.svg?maxAge=60)](https://travis-ci.org/adriancarriger/angularfire2-offline)\n[![Codecov](https://img.shields.io/codecov/c/github/adriancarriger/angularfire2-offline/master.svg?maxAge=60)](https://codecov.io/gh/adriancarriger/angularfire2-offline)\n[![Dependency Status](https://img.shields.io/david/adriancarriger/angularfire2-offline/master.svg?maxAge=60)](https://david-dm.org/adriancarriger/angularfire2-offline)\n[![devDependency Status](https://img.shields.io/david/dev/adriancarriger/angularfire2-offline/master.svg?maxAge=60)](https://david-dm.org/adriancarriger/angularfire2-offline?type=dev)\n[![Downloads](https://img.shields.io/npm/dt/angularfire2-offline.svg)](https://www.npmjs.com/package/angularfire2-offline)\n\n- [Complete changelog](https://github.com/adriancarriger/angularfire2-offline/releases)\n\n## Demos\n\n- [`Angular 2+ Demos:`](https://angularfire2-offline.firebaseapp.com/) [Read object](https://angularfire2-offline.firebaseapp.com/read-object), [Read list](https://angularfire2-offline.firebaseapp.com/read-list), [Write object](https://angularfire2-offline.firebaseapp.com/write-object), [Write list](https://angularfire2-offline.firebaseapp.com/write-list) -- [tutorial 📗](https://github.com/adriancarriger/angularfire2-offline/tree/master/examples/angular-cli#angular-cli-offline-tutorial-)\n- [`Ionic 2+ Demo`](https://ionic-pwa-ad85b.firebaseapp.com) -- [tutorial 📘](https://github.com/adriancarriger/angularfire2-offline/tree/master/examples/ionic#ionic-offline-tutorial-)\n\n[![Example Gif](https://raw.githubusercontent.com/adriancarriger/angularfire2-offline/master/images/example.gif)](https://angularfire2-offline.firebaseapp.com/write-list)\n\n## Version Support\n\nThe 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](https://firebase.google.com/docs/firestore/) which comes with offline support. For more info see [issue #89](https://github.com/adriancarriger/angularfire2-offline/issues/89).\n\n## Legacy Versions\n\n- Upgrading from `2.x` to `4.x` for AngularFire2? Try the [upgrade tutorial](https://github.com/adriancarriger/angularfire2-offline/blob/master/docs/version-4-upgrade.md)\n- To support **`AngularFire2 2.x`** use the [@two branch of this repo](https://github.com/adriancarriger/angularfire2-offline/tree/two) for [install instructions](https://github.com/adriancarriger/angularfire2-offline/tree/two#install) and tutorials ([Angular](https://github.com/adriancarriger/angularfire2-offline/tree/two/examples/angular-cli#angular-cli-offline-tutorial-)/[Ionic](https://github.com/adriancarriger/angularfire2-offline/tree/two/examples/ionic#ionic-offline-tutorial-)).\n- This branch (master) is a wrapper for the latest version of AngularFire2 (4.x)\n\n## Install\n\n```bash\nnpm install angularfire2-offline angularfire2 firebase --save\n```\n\n## Setup @NgModule\n\n```ts\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { AngularFireModule } from 'angularfire2';\nimport { AngularFireOfflineModule } from 'angularfire2-offline';\nimport { AngularFireDatabaseModule } from 'angularfire2/database';\n\nimport { AppComponent } from './app.component';\n\nexport const firebaseConfig = {\n  apiKey: '\u003cyour-key\u003e',\n  authDomain: '\u003cyour-project-authdomain\u003e',\n  databaseURL: '\u003cyour-database-URL\u003e',\n  storageBucket: '\u003cyour-storage-bucket\u003e'\n};\n\n@NgModule({\n  declarations: [AppComponent],\n  imports: [\n    AngularFireDatabaseModule,\n    AngularFireModule.initializeApp(firebaseConfig),\n    AngularFireOfflineModule,\n    BrowserModule\n  ],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\n## Usage\n\n- Methods mirror AngularFire2 database methods for [`object`](https://github.com/angular/angularfire2/blob/master/docs/2-retrieving-data-as-objects.md#retrieve-data) and [`list`](https://github.com/angular/angularfire2/blob/master/docs/3-retrieving-data-as-lists.md#retrieve-data).\n\n### Read Data Offline\n\n- [Querying lists](https://github.com/angular/angularfire2/blob/master/docs/4-querying-lists.md) is supported\n- [preserveSnapshot](https://github.com/angular/angularfire2/blob/master/docs/2-retrieving-data-as-objects.md#retrieving-the-snapshot) is not supported\n\n```ts\nimport { Component } from '@angular/core';\nimport {\n  AfoListObservable,\n  AfoObjectObservable,\n  AngularFireOfflineDatabase } from 'angularfire2-offline/database';\n\n@Component({\n  selector: 'project-name-app',\n  template: `\n  \u003ch1\u003e{{ (info | async)?.name }}\u003c/h1\u003e\n  \u003cul\u003e\n    \u003cli *ngFor=\"let item of items | async\"\u003e\n      {{ item?.name }}\n    \u003c/li\u003e\n  \u003c/ul\u003e\n  `\n})\nexport class MyApp {\n  info: AfoObjectObservable\u003cany\u003e;\n  items: AfoListObservable\u003cany[]\u003e;\n  constructor(afoDatabase: AngularFireOfflineDatabase) {\n    this.info = afoDatabase.object('/info');\n    this.items = afoDatabase.list('/items');\n  }\n}\n```\n\n### Write data offline\n\nIf writes are made offline followed by a page refresh, the writes will be sent when a connection becomes available.\n\n- [Write object](https://angularfire2-offline.firebaseapp.com/write-object)\n- [Write list](https://angularfire2-offline.firebaseapp.com/write-list)\n- [Resolve write conflicts](https://angularfire2-offline.firebaseapp.com/write-conflicts/messages)\n\n## AngularFire2 Offline specific features\n\nIn addition to wrapping most database features from [AngularFire2](https://github.com/angular/angularfire2), a minimal amount of offline specific features are provided:\n\n### Offline promises\n\n- **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.\n- **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()`.\n\n#### Offline promise example\n\n```ts\nconst promise = this.afoDatabase.object('car').update({maxSpeed: 100});\npromise.offline.then(() =\u003e console.log('offline data saved to device storage!'));\npromise.then(() =\u003e console.log('data saved to Firebase!'));\n```\n\nAlso see [working with promises](https://github.com/adriancarriger/angularfire2-offline/blob/master/docs/working-with-promises.md)\n\n### `reset` - delete offline data\n\nThe `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.\n\n#### Use `reset` with caution\n\nIf writes are made while offline `reset` will delete them before they can reach Firebase.\n\n#### `reset` example\n\n```ts\nonUserSignout() {\n  this.afoDatabase.reset()\n}\n```\n\n#### Calling `reset` on specific references\n\nYou can `reset` a specific Firebase reference by passing the reference string to the `reset` method\n\n```ts\nonUserSignout() {\n  this.afoDatabase.reset('my/firebase/ref')\n}\n```\n\n## How it works\n\n- While online, Firebase data is stored locally (as data changes the local store is updated)\n- While offline, local data is served if available, and writes are stored locally\n- On reconnect, app updates with new Firebase data, and writes are sent to Firebase\n- Even while online, local data is used first when available which results in a faster load\n\n## Contributing to AngularFire2 Offline\n\nPull requests are welcome! If you have a suggested enhancement, please [open an issue](https://github.com/adriancarriger/angularfire2-offline/issues/new). Thanks!\n\nHere is how you can setup a development environment:\n\n### Clone repo\n\n1. `git clone https://github.com/adriancarriger/angularfire2-offline.git`\n1. `cd angularfire2-offline`\n\n### Setup example\n\n1. `cd examples/angular-cli`\n1. `yarn`\n1. `npm start`\n\n### Setup development environment\n\n1. Open a new shell/terminal\n1. `cd angularfire2-offline`\n1. `yarn`\n1. `npm run start-dev`\n\n## License\n\nangularfire2-offline is licensed under the MIT Open Source license. For more information, see the [LICENSE](LICENSE) file in this repository.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadriancarriger%2Fangularfire2-offline","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadriancarriger%2Fangularfire2-offline","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadriancarriger%2Fangularfire2-offline/lists"}