From eb1c27f2067db21cb7f37cff991cd7dd48b86e95 Mon Sep 17 00:00:00 2001
From: Amitosh Swain Mahapatra <amitosh.swain@gmail.com>
Date: Jun 03 2018 14:50:48 +0000
Subject: Offline caching for services


---

diff --git a/package-lock.json b/package-lock.json
index 90db4c2..ed38f11 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3673,38 +3673,6 @@
       "requires": {
         "falafel": "1.2.0",
         "through2": "0.6.5"
-      },
-      "dependencies": {
-        "isarray": {
-          "version": "0.0.1",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
-        },
-        "readable-stream": {
-          "version": "1.0.34",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
-          "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
-          "requires": {
-            "core-util-is": "1.0.2",
-            "inherits": "2.0.3",
-            "isarray": "0.0.1",
-            "string_decoder": "0.10.31"
-          }
-        },
-        "string_decoder": {
-          "version": "0.10.31",
-          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-          "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
-        },
-        "through2": {
-          "version": "0.6.5",
-          "resolved": "https://registry.npmjs.org/through2/-/through2-0.6.5.tgz",
-          "integrity": "sha1-QaucZ7KdVyCQcUEOHXp6lozTrUg=",
-          "requires": {
-            "readable-stream": "1.0.34",
-            "xtend": "4.0.1"
-          }
-        }
       }
     },
     "interpret": {
@@ -5801,6 +5769,38 @@
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
       "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU="
     },
+    "through2": {
+      "version": "0.6.5",
+      "resolved": "https://registry.npmjs.org/through2/-/through2-0.6.5.tgz",
+      "integrity": "sha1-QaucZ7KdVyCQcUEOHXp6lozTrUg=",
+      "requires": {
+        "readable-stream": "1.0.34",
+        "xtend": "4.0.1"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+        },
+        "readable-stream": {
+          "version": "1.0.34",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
+          "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
+          "requires": {
+            "core-util-is": "1.0.2",
+            "inherits": "2.0.3",
+            "isarray": "0.0.1",
+            "string_decoder": "0.10.31"
+          }
+        },
+        "string_decoder": {
+          "version": "0.10.31",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+          "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
+        }
+      }
+    },
     "timers-browserify": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.6.tgz",
@@ -6078,38 +6078,6 @@
         "esmangle-evaluator": "1.0.1",
         "recast": "0.10.43",
         "through2": "0.6.5"
-      },
-      "dependencies": {
-        "isarray": {
-          "version": "0.0.1",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
-        },
-        "readable-stream": {
-          "version": "1.0.34",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
-          "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
-          "requires": {
-            "core-util-is": "1.0.2",
-            "inherits": "2.0.3",
-            "isarray": "0.0.1",
-            "string_decoder": "0.10.31"
-          }
-        },
-        "string_decoder": {
-          "version": "0.10.31",
-          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-          "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
-        },
-        "through2": {
-          "version": "0.6.5",
-          "resolved": "https://registry.npmjs.org/through2/-/through2-0.6.5.tgz",
-          "integrity": "sha1-QaucZ7KdVyCQcUEOHXp6lozTrUg=",
-          "requires": {
-            "readable-stream": "1.0.34",
-            "xtend": "4.0.1"
-          }
-        }
       }
     },
     "url": {
diff --git a/package.json b/package.json
index eea4ccf..7c0f55b 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
     "@ionic-native/splash-screen": "4.4.0",
     "@ionic-native/status-bar": "4.4.0",
     "@ionic-native/toast": "^4.5.3",
-    "@ionic/storage": "2.1.3",
+    "@ionic/storage": "^2.1.3",
     "cordova-android": "7.0.0",
     "cordova-browser": "5.0.3",
     "cordova-plugin-calendar": "^4.5.5",
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 84f0ade..7872c11 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,6 +1,7 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { ErrorHandler, NgModule } from '@angular/core';
 import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
+import { IonicStorageModule } from '@ionic/storage';
 import { HttpClientModule } from '@angular/common/http';
 import { InAppBrowser } from '@ionic-native/in-app-browser';
 import { SplashScreen } from '@ionic-native/splash-screen';
@@ -32,7 +33,8 @@ import { Browser } from '../providers/browser/browser';
   imports: [
     BrowserModule,
     HttpClientModule,
-    IonicModule.forRoot(App)
+    IonicModule.forRoot(App),
+    IonicStorageModule.forRoot()
   ],
   bootstrap: [IonicApp],
   entryComponents: [
diff --git a/src/pages/ask/ask.ts b/src/pages/ask/ask.ts
index ce42a88..f36a30e 100644
--- a/src/pages/ask/ask.ts
+++ b/src/pages/ask/ask.ts
@@ -36,7 +36,7 @@ export class AskPage {
     this.askFedora
       .getQuestions()
       .subscribe(questions => {
-        this.questions = questions;
+        this.questions = questions || [];
       });
   }
 
diff --git a/src/pages/calendar/calendar.html b/src/pages/calendar/calendar.html
index b612521..90390a7 100644
--- a/src/pages/calendar/calendar.html
+++ b/src/pages/calendar/calendar.html
@@ -15,8 +15,8 @@
   <ion-list>
     <ion-item>
 
-      <ion-select [(ngModel)]="selectedCalendar" (ngModelChange)="updateMeetings()">
-        <ion-option *ngFor="let calendar of calendars" [value]="calendar.realName" [selected]="calendar.realName == selectedCalendar">
+      <ion-select [(ngModel)]="selectedCalendar" [compareWith]="compareCalendar" (ngModelChange)="updateMeetings()">
+        <ion-option *ngFor="let calendar of calendars" [value]="calendar" [selected]="calendar.realName == selectedCalendar.realName">
           {{ calendar.displayName }}
         </ion-option>
       </ion-select>
diff --git a/src/pages/calendar/calendar.ts b/src/pages/calendar/calendar.ts
index 45f372e..ae22698 100644
--- a/src/pages/calendar/calendar.ts
+++ b/src/pages/calendar/calendar.ts
@@ -7,7 +7,7 @@ import { FedoCalService, Calendar as CalendarType, Meeting } from '../../provide
 /**
  * We default to the QA calendar
  */
-const DEFAULT_CALENDAR = 'QA';
+const DEFAULT_CALENDAR = { realName:'QA', displayName: 'QA' };
 
 /**
  * The FedoCal interface
@@ -34,13 +34,13 @@ export class CalendarPage {
   /**
    * ID of the selected calendar
    */
-  private selectedCalendar: string;
+  private selectedCalendar: CalendarType;
 
   constructor(private fedoCal: FedoCalService, private calendar: Calendar) {
     this.calendars = [];
     this.meetings = [];
 
-    this.selectedCalendar = DEFAULT_CALENDAR;
+    this.selectedCalendar = DEFAULT_CALENDAR as CalendarType;
   }
 
   ngOnInit() {
@@ -84,4 +84,15 @@ export class CalendarPage {
       meeting.timeEnd
     );
   }
+
+  /**
+   * Compares two calendars for similarity
+   *
+   * @param a Calendar
+   * @param b Calendar
+   * @returns boolean value indicating if both calendars are equal
+   */
+  compareCalendar(a:CalendarType, b:CalendarType) {
+    return a.realName === b.realName;
+  }
 }
diff --git a/src/pages/magazine/magazine.html b/src/pages/magazine/magazine.html
index caa4791..eb09dac 100644
--- a/src/pages/magazine/magazine.html
+++ b/src/pages/magazine/magazine.html
@@ -35,7 +35,7 @@ ion-card
 <img id="maglogo" src="assets/img/mag_logo.svg">
     <img id="mag-title" src="assets/img/mag_title.svg">
 
-  <ion-list *ngIf="posts.length !== 0">
+  <ion-list>
     <ion-card *ngFor="let post of posts">
       <!--<ion-row id="featured-image">
       <img src="https://fedoramagazine.org/wp-json/wp/v2/media/{{post.id}}" />
diff --git a/src/pages/magazine/magazine.ts b/src/pages/magazine/magazine.ts
index 172d1ca..cce42c8 100644
--- a/src/pages/magazine/magazine.ts
+++ b/src/pages/magazine/magazine.ts
@@ -20,7 +20,6 @@ export class MagazinePage {
 
   constructor(private browser: Browser,
     private fedoraMag: FedoraMagazineService, private socialSharing: SocialSharing) {
-    this.posts = [];
   }
 
   ngOnInit() {
diff --git a/src/pages/social/social.ts b/src/pages/social/social.ts
index 3f79a04..cb8e049 100644
--- a/src/pages/social/social.ts
+++ b/src/pages/social/social.ts
@@ -5,7 +5,7 @@ import { Browser } from '../../providers/browser/browser';
 import { FacebookProvider } from '../../providers/social/facebook';
 import { TwitterProvider } from '../../providers/social/twitter';
 import { Post } from '../../providers/social/social';
-import { forkJoin } from 'rxjs/observable/forkJoin';
+import { combineLatest } from 'rxjs/observable/combineLatest';
 
 const HANDLE = {
   FB: 'fedoraqa',
@@ -43,7 +43,7 @@ export class SocialPage {
    * Currently, we fetch posts from Facebook and Twitter
    */
   private updatePosts(): void {
-    forkJoin(this.fb.getPosts(HANDLE.FB), this.twitter.getPosts(HANDLE.TWITTER))
+    combineLatest(this.fb.getPosts(HANDLE.FB), this.twitter.getPosts(HANDLE.TWITTER))
       .subscribe(values => {
         this.posts = [...values[0], ...values[1]] as Post[];
       });
diff --git a/src/providers/ask-fedora/ask-fedora.ts b/src/providers/ask-fedora/ask-fedora.ts
index 1b62eef..0664361 100644
--- a/src/providers/ask-fedora/ask-fedora.ts
+++ b/src/providers/ask-fedora/ask-fedora.ts
@@ -1,8 +1,12 @@
-import 'rxjs/add/operator/map';
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
+import { Storage } from '@ionic/storage';
 import { chooseEndpoint } from '../../utils';
 import { Observable } from 'rxjs/Observable';
+import { fromPromise } from 'rxjs/observable/fromPromise';
+import { merge } from 'rxjs/observable/merge';
+import { map, tap } from 'rxjs/operators';
+import { defaultValue } from '../../utils';
 
 /**
  * Ask Fedora API endpoint
@@ -12,6 +16,12 @@ import { Observable } from 'rxjs/Observable';
 const ENDPOINT = chooseEndpoint('/ask-fedora', 'https://ask.fedoraproject.org/en/api/v1');
 
 /**
+ * The key used for storing offline content
+ */
+const STORAGE_KEY = 'fedora-ask__questions';
+
+
+/**
  * A question on Ask Fedora
  */
 export interface Question {
@@ -63,7 +73,6 @@ export interface Question {
   score: number,
 }
 
-
 /**
  * Service for Ask Fedora API
  *
@@ -71,7 +80,17 @@ export interface Question {
  */
 @Injectable()
 export class AskFedoraService {
-  constructor(private http: HttpClient) {
+
+  constructor(private http: HttpClient, private storage: Storage) {
+  }
+
+  /**
+   * Fetch a list of questions on Ask Fedora from offline cache
+   *
+   * @returns Observable which emits an array of questions
+   */
+  private loadCachedQuestions(): Observable<Question[]> {
+    return fromPromise(this.storage.get(STORAGE_KEY)).pipe(defaultValue([]));
   }
 
   /**
@@ -79,18 +98,33 @@ export class AskFedoraService {
    *
    * @returns Observable which emits an array of questions
    */
-  getQuestions(): Observable<Question[]> {
+  fetchQuestions(): Observable<Question[]> {
     return this.http.get(`${ENDPOINT}/questions/`)
-      .map((data: any) => (data.questions as any[]).map(q => ({
-        id: q.id,
-        title: q.title,
-        link: q.url,
-        answerCount: q.answer_count,
-        content: q.summary,
-        addedAt: new Date(parseInt(q.added_at, 10)),
-        tags: q.tags,
-        viewCount: q.view_count,
-        score: q.score,
-      })));
+      .pipe(
+        map((data: any) => (data.questions as any[]).map(q => ({
+          id: q.id,
+          title: q.title,
+          link: q.url,
+          answerCount: q.answer_count,
+          content: q.summary,
+          addedAt: new Date(parseInt(q.added_at, 10)),
+          tags: q.tags,
+          viewCount: q.view_count,
+          score: q.score,
+        })))
+      );
+  }
+
+  /**
+   * Fetch a list of questions on Ask Fedora
+   * Loads from offline cache first and then from HTTP. The response of the HTTP
+   * request is persisted into the disk cache for further requests.
+   *
+   * @returns Observable which emits an array of questions
+   */
+  getQuestions(): Observable<Question[]> {
+    return merge(this.loadCachedQuestions(), this.fetchQuestions().pipe(
+      tap(x => this.storage.set(STORAGE_KEY, x)))
+    );
   }
 }
diff --git a/src/providers/fedo-cal/fedo-cal.ts b/src/providers/fedo-cal/fedo-cal.ts
index f753d4a..9a9909c 100644
--- a/src/providers/fedo-cal/fedo-cal.ts
+++ b/src/providers/fedo-cal/fedo-cal.ts
@@ -1,12 +1,15 @@
 import { Injectable } from '@angular/core';
-import 'rxjs/add/operator/map';
 
 import * as _ from 'lodash';
 import * as moment from 'moment-timezone';
 
 import { HttpClient } from '@angular/common/http';
+import { Storage } from '@ionic/storage';
 import { Observable } from 'rxjs/Observable';
-import { chooseEndpoint } from '../../utils';
+import { fromPromise } from 'rxjs/observable/fromPromise';
+import { merge } from 'rxjs/observable/merge';
+import { tap, map } from 'rxjs/operators';
+import { chooseEndpoint, defaultValue } from '../../utils';
 
 /**
  * FedoCal API endpoint
@@ -16,6 +19,11 @@ import { chooseEndpoint } from '../../utils';
 const ENDPOINT = chooseEndpoint('/fedocal', 'https://apps.fedoraproject.org/calendar/api');
 
 /**
+ * The key used for storing offline content
+ */
+const CALENDAR_STORAGE_KEY = 'fedocal__calendars';
+
+/**
  * Date format for display
  */
 const DATE_FORMAT = 'dddd, MMMM Do YYYY';
@@ -45,6 +53,29 @@ function calendarNameToDisplayName(name: string): string {
 }
 
 /**
+ * Get the key for offline storage which stores the meetings for the given Calendar
+ *
+ * @param calendar Calendar
+ * @returns key to use while accessing offline content
+ */
+function getCalendarStorageKey(calendar: Calendar): string {
+  return `fedocal__meetings-${calendar.realName}`;
+}
+
+/**
+ * Convert a date consisting of date, time and timezone as different strings to
+ * a single momentjs date
+ *
+ * @param date     Date string
+ * @param time     Time string
+ * @param timezone Timezone identifier
+ */
+function dateToMoment(date: string, time: string, timezone: string) {
+  const m = moment.tz(`${date} ${time}`, timezone).tz('UTC');
+  return m;
+}
+
+/**
  * A calendar on FedoCal
  *
  * Calendars are assoicated with a group / SIG / or event. They contain a number
@@ -144,7 +175,17 @@ export interface Meeting {
  */
 @Injectable()
 export class FedoCalService {
-  constructor(private http: HttpClient) {
+
+  constructor(private http: HttpClient, private storage: Storage) {
+  }
+
+  /**
+   * Fetch the list of calendars on FedoCal from offline cache
+   *
+   * @returns Observable which emits an array of posts
+   */
+  private loadCachedCalendars(): Observable<Calendar[]> {
+    return fromPromise(this.storage.get(CALENDAR_STORAGE_KEY)).pipe(defaultValue([]));
   }
 
   /**
@@ -152,63 +193,94 @@ export class FedoCalService {
    *
    * @returns Observable which emits an array of calendars
    */
-  getCalendars(): Observable<Calendar[]> {
+  fetchCalendars(): Observable<Calendar[]> {
     return this.http.get(`${ENDPOINT}/calendars/`)
-      .map((data: any) =>
-        data.calendars.map((c: any) => ({
-          realName: c.calendar_name,
-          displayName: calendarNameToDisplayName(c.calendar_name),
-          description: c.calendar_description,
-          contact: c.calendar_contact,
-          adminGroup: c.calendar_admin_group,
-          editorGroup: c.calendar_editor_group,
-          enabled: c.calendar_status === 'Enabled'
-        })));
+      .pipe(
+        map((data: any) =>
+          data.calendars.map((c: any) => ({
+            realName: c.calendar_name,
+            displayName: calendarNameToDisplayName(c.calendar_name),
+            description: c.calendar_description,
+            contact: c.calendar_contact,
+            adminGroup: c.calendar_admin_group,
+            editorGroup: c.calendar_editor_group,
+            enabled: c.calendar_status === 'Enabled'
+          })))
+      );
   }
 
   /**
-   * Fetch the list of meetings for a given FedoCal calendar name
+   * Fetch the list of calendars from FedoCal
+   *
+   * Loads from offline cache first and then from API. The response of the API
+   * request is persisted into the disk cache for further requests.
+   *
+   * @returns Observable which emits an array of calendars
+   */
+  getCalendars(): Observable<Calendar[]> {
+    return merge(this.loadCachedCalendars(), this.fetchCalendars().pipe(
+      tap(x => this.storage.set(CALENDAR_STORAGE_KEY, x))
+    ));
+  }
+
+  /**
+   * Fetch the list of meetings for a given FedoCal calendar name from offline
+   * cache
    *
    * @param calendar FedoCal calendar name
    * @returns Observable which emits an array of meetings
    */
-  getMeetings(calendar:string): Observable<Meeting[]> {
-
-    return this.http.get(`${ENDPOINT}/meetings/`, { params: { calendar: calendar } })
-      .map((data: any) => data.meetings.map(m => {
-        const mTime = dateToMoment(m.meeting_date, m.meeting_time_start, m.meeting_timezone);
-        const mTimeEnd = dateToMoment(m.meeting_date_end, m.meeting_time_stop, m.meeting_timezone);
-
-        return {
-          name: m.meeting_name,
-          description: m.meeting_information,
-          time: mTime.toDate(),
-          timeEnd: mTimeEnd.toDate(),
-          displayTime: {
-            // Format momentjs object to the defined format for display
-            dateString: mTime.format(DATE_FORMAT),
-            timeString: mTime.format(TIME_FORMAT)
-          },
-          displayTimeEnd: {
-            dateString: mTimeEnd.format(DATE_FORMAT),
-            timeString: mTimeEnd.format(TIME_FORMAT),
-          },
-          location: m.meeting_location,
-        };
-      }));
+  private loadCachedMeetings(calendar: Calendar): Observable<Meeting[]> {
+    return fromPromise(this.storage.get(getCalendarStorageKey(calendar))).pipe(defaultValue([]));
   }
-}
 
-/**
- * Convert a date consisting of date, time and timezone as different strings to
- * a single momentjs date
- *
- * @param date     Date string
- * @param time     Time string
- * @param timezone Timezone identifier
- */
-function dateToMoment(date:string, time:string, timezone:string) {
-  const m = moment.tz(`${date} ${time}`, timezone).tz('UTC');
-  return m;
+  /**
+   * Fetch the list of meetings for a given FedoCal calendar name from FedoCal API
+   *
+   * @param calendar FedoCal calendar name
+   * @returns Observable which emits an array of meetings
+   */
+  fetchMeetings(calendar: Calendar): Observable<Meeting[]> {
+
+    return this.http.get(`${ENDPOINT}/meetings/`, { params: { calendar: calendar.realName } })
+      .pipe(
+        map((data: any) => data.meetings.map(m => {
+          const mTime = dateToMoment(m.meeting_date, m.meeting_time_start, m.meeting_timezone);
+          const mTimeEnd = dateToMoment(m.meeting_date_end, m.meeting_time_stop, m.meeting_timezone);
+
+          return {
+            name: m.meeting_name,
+            description: m.meeting_information,
+            time: mTime.toDate(),
+            timeEnd: mTimeEnd.toDate(),
+            displayTime: {
+              // Format momentjs object to the defined format for display
+              dateString: mTime.format(DATE_FORMAT),
+              timeString: mTime.format(TIME_FORMAT)
+            },
+            displayTimeEnd: {
+              dateString: mTimeEnd.format(DATE_FORMAT),
+              timeString: mTimeEnd.format(TIME_FORMAT),
+            },
+            location: m.meeting_location,
+          };
+        }))
+      );
+  }
+
+  /**
+   * Fetch the list of meetings for a given FedoCal calendar name
+   *
+   * Loads from offline cache first and then from API. The response of the API
+   * request is persisted into the disk cache for further requests.
+   *
+   * @param calendar FedoCal calendar name
+   * @returns Observable which emits an array of meetings
+   */
+  getMeetings(calendar: Calendar): Observable<Meeting[]> {
+    return merge(this.loadCachedMeetings(calendar), this.fetchMeetings(calendar).pipe(
+      tap(x => this.storage.set(getCalendarStorageKey(calendar), x))
+    ));
+  }
 }
 
diff --git a/src/providers/fedora-magazine/fedora-magazine.ts b/src/providers/fedora-magazine/fedora-magazine.ts
index 8b52bd9..bb17792 100644
--- a/src/providers/fedora-magazine/fedora-magazine.ts
+++ b/src/providers/fedora-magazine/fedora-magazine.ts
@@ -1,12 +1,26 @@
-import 'rxjs/add/operator/map';
+import { Storage } from '@ionic/storage';
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs/Observable';
-import { chooseEndpoint } from '../../utils';
+import { map, tap } from 'rxjs/operators';
+import { fromPromise } from 'rxjs/observable/fromPromise';
+import { merge } from 'rxjs/observable/merge';
+import { chooseEndpoint, defaultValue } from '../../utils';
 
+/**
+ * Endpoint for this service.
+ *
+ * Since Fedora Magazine API does not support CORS, we need to use a proxy when
+ * running on browser platforms.
+ */
 const ENDPOINT = chooseEndpoint('/fedora-magazine', 'https://fedoramagazine.org/wp-json/wp/v2');
 
 /**
+ * The key used for storing offline content
+ */
+const STORAGE_KEY = 'fedora-magazine__posts';
+
+/**
  * Represents a post on Fedora Magazine
  */
 export interface Post {
@@ -23,7 +37,7 @@ export interface Post {
   /**
    * Permalink to the post
    */
-  permalink:string,
+  permalink: string,
 
   /**
    * Post title
@@ -56,25 +70,51 @@ export interface Post {
  */
 @Injectable()
 export class FedoraMagazineService {
-  constructor(private http: HttpClient) {
+
+  constructor(private http: HttpClient, private storage: Storage) {
   }
 
   /**
-   * Fetch the list of latest posts on Fedora Magazine
+   * Fetch the list of posts on Fedora Magazine from offline cache
    *
    * @returns Observable which emits an array of posts
    */
-  getPosts(): Observable<Post[]> {
+  private loadCachedPosts() {
+    return fromPromise(this.storage.get(STORAGE_KEY)).pipe(defaultValue([]));
+  }
+
+  /**
+   * Fetch the list of latest posts on Fedora Magazine from Fedora Magazine API
+   *
+   * @returns Observable which emits an array of posts
+   */
+  fetchPosts(): Observable<Post[]> {
     return this.http.get(`${ENDPOINT}/posts`)
-      .map((data: any[]) => data.map((post: any) => ({
-        id: post.id,
-        link: post.link,
-        permalink: post.guid.rendered,
-        title: post.title.rendered,
-        image: post.featured_media,
-        excerpt: post.excerpt.rendered,
-        content: post.content.rendered,
-        publishedAt: new Date(post.date_gmt+'Z'),
-      })));
+      .pipe(
+        map((data: any[]) => data.map((post: any) => ({
+          id: post.id,
+          link: post.link,
+          permalink: post.guid.rendered,
+          title: post.title.rendered,
+          image: post.featured_media,
+          excerpt: post.excerpt.rendered,
+          content: post.content.rendered,
+          publishedAt: new Date(post.date_gmt + 'Z'),
+        })))
+      );
+  }
+
+  /**
+   * Fetch the list of posts on Fedora Magazine
+   *
+   * Loads from offline cache first and then from HTTP. The response of the HTTP
+   * request is persisted into the disk cache for further requests.
+   *
+   * @returns Observable which emits an array of posts
+   */
+  getPosts() {
+    return merge(this.loadCachedPosts(), this.fetchPosts().pipe(
+      tap(x => this.storage.set(STORAGE_KEY, x)))
+    );
   }
 }
diff --git a/src/providers/social/facebook.ts b/src/providers/social/facebook.ts
index a3192b4..d958926 100644
--- a/src/providers/social/facebook.ts
+++ b/src/providers/social/facebook.ts
@@ -1,11 +1,30 @@
 import { Injectable } from '@angular/core';
-import 'rxjs/add/operator/map';
 import ENV from '@environment';
+import { Storage } from '@ionic/storage';
 import { Facebook } from 'fb';
 import { compact } from 'lodash-es';
 import { SocialProvider, Post, FACEBOOK } from './social';
 import { Observable } from 'rxjs/Observable';
 import { Observer } from 'rxjs/Observer';
+import { fromPromise } from 'rxjs/observable/fromPromise';
+import { merge } from 'rxjs/observable/merge';
+import { tap, map } from 'rxjs/operators';
+import { defaultValue } from '../../utils';
+
+/**
+ * The prefix of the key used for storing offline content
+ */
+const STORAGE_KEY_PREFIX = 'fedora-social__facebook';
+
+/**
+ * Get the key for offline storage which stores the posts for the given page
+ *
+ * @param page facebook page ID
+ * @returns key to use while accessing offline content
+ */
+function getStorageKey(page: string): string {
+  return `${STORAGE_KEY_PREFIX}-${page}`;
+}
 
 /**
  * Service for Facebook API
@@ -19,18 +38,29 @@ export class FacebookProvider implements SocialProvider {
    * Facebook API instance
    */
   private fb: Facebook;
-  constructor() {
+
+  constructor(private storage: Storage) {
     this.fb = new Facebook(ENV.FB_CONFIG);
   }
 
   /**
+   * Fetch the list of posts for a given Facebook page from the offline cache
+   *
+   * @param page ID of the Facebook page
+   * @returns Observable which emits an array of Facebook posts
+   */
+  private loadCachedPosts(page: string): Observable<Post[]> {
+    return fromPromise(this.storage.get(getStorageKey(page))).pipe(defaultValue([]));
+  }
+
+  /**
    * Perform a call to a Facebook API using the library
    *
    * Converts callback-style error handling to observables.
    *
    * @param uri Facebook API URI
    */
-  private api(uri:string) {
+  private api(uri: string) {
     return Observable.create((emitter: Observer<any>) => {
       this.fb.api(uri, res => {
         if (!res || res.error) {
@@ -50,21 +80,36 @@ export class FacebookProvider implements SocialProvider {
    * @param args Extra args for pagination etc.
    * @returns Observable which emits an array of Facebook posts
    */
-  public getPosts(page: string, args?): Observable<Post[]> {
+  fetchPosts(page: string, args?): Observable<Post[]> {
     return this.api(`${page}/posts`)
-      .map(res => {
-        const posts = compact<Post>(res.data.map(p => {
-          const post = {
-            id: p.id,
-            link: 'https://facebook.com/' + p.id,
-            content: p.message,
-            origin: FACEBOOK,
-          };
+      .pipe(
+        map((res: any) => {
+          const posts = compact<Post>(res.data.map(p => {
+            const post = {
+              id: p.id,
+              link: 'https://facebook.com/' + p.id,
+              content: p.message,
+              origin: FACEBOOK,
+            };
 
-          return post.content ? post : null;
-        }));
+            return post.content ? post : null;
+          }));
 
-        return posts;
-      });
+          return posts;
+        })
+      );
+  }
+
+  /**
+   * Fetch the list of posts for a given Facebook page
+   *
+   * This returns a list of cached values followed by values from the API
+   * @param page ID of the Facebook page
+   * @returns Observable which emits an array of Facebook posts
+   */
+  public getPosts(page: string): Observable<Post[]> {
+    return merge(this.loadCachedPosts(page), this.fetchPosts(page).pipe(
+      tap(x => this.storage.set(getStorageKey(page), x))
+    ));
   }
 }
diff --git a/src/providers/social/social.ts b/src/providers/social/social.ts
index 10b17b7..bb76e33 100644
--- a/src/providers/social/social.ts
+++ b/src/providers/social/social.ts
@@ -43,9 +43,22 @@ export interface SocialProvider {
   /**
    * Fetch the list of posts for a given service specific resource ID
    *
-   * @param resID service specific resource IS
+   * This may return a cached response
+   *
+   * @param resID service specific resource ID
+   * @returns Observable which emits an array of posts
+   */
+  getPosts(resID: string): Observable<Post[]>
+
+  /**
+   * Fetch the list of posts for a given service specific resource ID, usually
+   * from an API call
+   *
+   * This always returns a value from the underlying API
+   *
+   * @param resID service specific resource ID
    * @param args Extra args for pagination etc.
    * @returns Observable which emits an array of posts
    */
-  getPosts(resID: string, args?:{ offset?: string }): Observable<Post[]>
+  fetchPosts(resID: string, args?:{ offset?: string }): Observable<Post[]>
 }
diff --git a/src/providers/social/twitter.ts b/src/providers/social/twitter.ts
index 444b7d6..5bcabb8 100644
--- a/src/providers/social/twitter.ts
+++ b/src/providers/social/twitter.ts
@@ -1,39 +1,89 @@
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/do';
+import ENV from '@environment';
 import { Injectable } from '@angular/core';
 import { SocialProvider, Post } from './social';
 import { HttpClient } from '@angular/common/http';
-import { chooseEndpoint } from '../../utils';
+import { Storage } from '@ionic/storage';
 import { Observable } from 'rxjs/Observable';
-import ENV from '@environment';
+import { map, tap } from 'rxjs/operators';
+import { fromPromise } from 'rxjs/observable/fromPromise';
+import { merge } from 'rxjs/observable/merge';
+import { chooseEndpoint, defaultValue } from '../../utils';
 
+/**
+ * Endpoint for this service.
+ *
+ * Since Twitter API does not support CORS, we need to use a proxy when running
+ * on browser platforms.
+ */
 const ENDPOINT = chooseEndpoint('/twitter', 'https://api.twitter.com/1.1');
 
 /**
+ * The prefix of the key used for storing offline content
+ */
+const STORAGE_KEY_PREFIX = 'fedora-social__twitter';
+
+/**
+ * Get the key for offline storage which stores the tweets for the given handle
+ *
+ * @param handle twitter handle
+ * @returns key to use while accessing offline content
+ */
+function getStorageKey(handle: string): string {
+  return `${STORAGE_KEY_PREFIX}-${handle}`;
+}
+
+/**
  * Service for Twitter API
  */
 @Injectable()
 export class TwitterProvider implements SocialProvider {
-  constructor(private http: HttpClient) {
+
+  constructor(private http: HttpClient, private storage: Storage) {
   }
 
   /**
-   * Fetch the list of tweets for a given Twitter handle
+   * Fetch tweets for a handle from offline cache
+   *
+   * @param handle twitter handle
+   * @returns Observable which emits an array of tweets
+   */
+  private loadCachedPosts(handle: string): Observable<Post[]> {
+    return fromPromise(this.storage.get(getStorageKey(handle))).pipe(defaultValue([]));
+  }
+
+  /**
+   * Fetch the list of tweets for a given Twitter handle from Twitter API
    *
    * @param handle Twitter handle whose tweets to load
    * @param args   Extra args for pagination etc.
    * @returns Observable which emits an array of tweets
    */
-  public getPosts(handle: string, args?): Observable<Post[]> {
+  fetchPosts(handle: string, args?): Observable<Post[]> {
     return this.http.get(`${ENDPOINT}/statuses/user_timeline.json`, {
       params: { screen_name: handle },
       headers: { 'Authorization': 'Bearer ' + ENV.TWITTER_CONFIG.BEARER_TOKEN }
-    }).map((tweetsResponse: any) => tweetsResponse.map(t => ({
-      id: t.id,
-      link: 'https://twitter.com/statuses/' + t.id_str,
-      content: t.text,
-      origin: 'twitter',
-    })));
+    }).pipe(
+      map((tweetsResponse: any) => tweetsResponse.map(t => ({
+        id: t.id,
+        link: 'https://twitter.com/statuses/' + t.id_str,
+        content: t.text,
+        origin: 'twitter',
+      })))
+    );
+  }
+
+  /**
+   * Fetch the list of tweets for a given Twitter handle
+   *
+   * This returns a list of cached values followed by values from the API
+   *
+   * @param handle Twitter handle whose tweets to load
+   * @returns Observable which emits an array of tweets
+   */
+  public getPosts(handle: string): Observable<Post[]> {
+    return merge(this.loadCachedPosts(handle), this.fetchPosts(handle).pipe(
+      tap(x => this.storage.set(getStorageKey(handle), x))
+    ));
   }
 }
 
diff --git a/src/utils.ts b/src/utils.ts
index 77c0b48..dae1244 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,3 +1,5 @@
+import { map } from 'rxjs/operators';
+import { OperatorFunction } from 'rxjs/interfaces';
 
 /**
  * Choose appropriate API end point or the proxy to avoid CORS in Ionic dev server
@@ -9,3 +11,11 @@ export function chooseEndpoint(devServerEndpoint:string, appEndpoint:string) {
   // courtesy: https://forum.ionicframework.com/t/check-if-run-on-emulator-dev-production-or-livereload/71845/9
   return window.hasOwnProperty('IonicDevServer') ? devServerEndpoint : appEndpoint;
 }
+
+/**
+ * Substitutes a falsy value in a RxJS stream with a default value
+ * @param value the default value
+ */
+export function defaultValue<T>(value:T): OperatorFunction<T, T> {
+  return map<T,T>((x:T) => x ? x : value );
+}