Merge pull request #36 from insin/offline-mode

Introduce Offline Mode

Author: addyosmani

package.json

@@ -10,8 +10,8 @@
   },
   "scripts": {
     "build": "npm run lint && cp node_modules/sw-toolbox/sw-toolbox.js public/sw-toolbox.js && nwb build && npm run precache",
-    "lint": "eslint src",
-    "lint:fix": "eslint --fix .",
+    "lint": "./node_modules/eslint-config-jonnybuchanan/bin/lint.js src",
+    "lint:fix": "./node_modules/eslint-config-jonnybuchanan/bin/lint.js --fix .",
     "start": "nwb serve",
     "precache": "sw-precache --root=public --config=sw-precache-config.json"
   },
@@ -20,6 +20,7 @@
     "firebase": "2.4.2",
     "firetruck.js": "0.1.1",
     "history": "2.1.1",
+    "isomorphic-fetch": "^2.2.1",
     "react": "15.0.2",
     "react-dom": "15.0.2",
     "react-router": "2.4.0",

public/runtime-caching.js

@@ -12,10 +12,10 @@
     origin: /\.(?:googleapis|gstatic|firebaseio)\.com$/
   })
   global.toolbox.router.get('/(.+)', global.toolbox.fastest, {
-  	  origin: 'https://hacker-news.firebaseio.com'
+  	    origin: 'https://hacker-news.firebaseio.com'
   })
   global.toolbox.router.get('/(.+)', global.toolbox.fastest, {
-  	  origin: 'https://s-usc1c-nss-136.firebaseio.com'
+  	    origin: 'https://s-usc1c-nss-136.firebaseio.com'
   })
 })(self)
 

src/Comment.js

@@ -3,6 +3,7 @@ var ReactFireMixin = require('reactfire')
 
 var CommentThreadStore = require('./stores/CommentThreadStore')
 var HNService = require('./services/HNService')
+var HNServiceRest = require('./services/HNServiceRest')
 var SettingsStore = require('./stores/SettingsStore')
 
 var CommentMixin = require('./mixins/CommentMixin')
@@ -86,7 +87,17 @@ var Comment = React.createClass({
   },
 
   bindFirebaseRef() {
-    this.bindAsObject(HNService.itemRef(this.props.id), 'comment', this.handleFirebaseRefCancelled)
+    if (SettingsStore.offlineMode) {
+      HNServiceRest.itemRef(this.props.id).then(function(res) {
+        return res.json()
+      }).then(function(snapshot) {
+        this.replaceState({ comment: snapshot })
+      }.bind(this))
+    }
+    else {
+      this.bindAsObject(HNService.itemRef(this.props.id), 'comment', this.handleFirebaseRefCancelled)
+    }
+
     if (this.timeout) {
       this.timeout = null
     }

src/Item.js

@@ -3,6 +3,7 @@ var ReactFireMixin = require('reactfire')
 var TimeAgo = require('react-timeago').default
 
 var HNService = require('./services/HNService')
+var HNServiceRest = require('./services/HNServiceRest')
 var StoryCommentThreadStore = require('./stores/StoryCommentThreadStore')
 var ItemStore = require('./stores/ItemStore')
 
@@ -14,6 +15,8 @@ var ItemMixin = require('./mixins/ItemMixin')
 var cx = require('./utils/buildClassName')
 var setTitle = require('./utils/setTitle')
 
+var SettingsStore = require('./stores/SettingsStore')
+
 function timeUnitsAgo(value, unit, suffix) {
   if (value === 1) {
     return unit
@@ -31,7 +34,17 @@ var Item = React.createClass({
   },
 
   componentWillMount() {
-    this.bindAsObject(HNService.itemRef(this.props.params.id), 'item')
+    if (SettingsStore.offlineMode) {
+      HNServiceRest.itemRef(this.props.params.id).then(function(res) {
+        return res.json()
+      }).then(function(snapshot) {
+        this.replaceState({ item: snapshot })
+      }.bind(this))
+    }
+    else {
+      this.bindAsObject(HNService.itemRef(this.props.params.id), 'item')
+    }
+
     if (this.state.item.id) {
       this.threadStore = new StoryCommentThreadStore(this.state.item, this.handleCommentsChanged, {cached: true})
       setTitle(this.state.item.title)
@@ -58,8 +71,18 @@ var Item = React.createClass({
         this.threadStore = new StoryCommentThreadStore(item, this.handleCommentsChanged, {cached: true})
         setTitle(item.title)
       }
-      this.bindAsObject(HNService.itemRef(nextProps.params.id), 'item')
-      this.setState({item: item || {}})
+
+      if (SettingsStore.offlineMode) {
+        HNServiceRest.itemRef(nextProps.params.id).then(function(res) {
+          return res.json()
+        }).then(function(snapshot) {
+          this.replaceState({ item: snapshot })
+        }.bind(this))
+      }
+      else {
+        this.bindAsObject(HNService.itemRef(nextProps.params.id), 'item')
+        this.setState({item: item || {}})
+      }
     }
   },
 

src/PermalinkedComment.js

@@ -4,6 +4,7 @@ var withRouter = require('react-router/lib/withRouter')
 
 var CommentThreadStore = require('./stores/CommentThreadStore')
 var HNService = require('./services/HNService')
+var HNServiceRest = require('./services/HNServiceRest')
 var SettingsStore = require('./stores/SettingsStore')
 var UpdatesStore = require('./stores/UpdatesStore')
 
@@ -32,7 +33,16 @@ var PermalinkedComment = React.createClass({
   },
 
   componentWillMount() {
-    this.bindAsObject(HNService.itemRef(this.props.params.id), 'comment')
+    if (SettingsStore.offlineMode) {
+      HNServiceRest.itemRef(this.props.params.id).then(function(res) {
+        return res.json()
+      }).then(function(snapshot) {
+        this.replaceState({ comment: snapshot })
+      }.bind(this))
+    }
+    else {
+      this.bindAsObject(HNService.itemRef(this.props.params.id), 'comment')
+    }
     if (this.state.comment.id) {
       this.commentLoaded(this.state.comment)
     }

src/Settings.js

@@ -38,6 +38,12 @@ var Settings = React.createClass({
           </label>
           <p>Show "reply" links to Hacker News</p>
         </div>
+        <div className="Settings__setting Settings__setting--checkbox">
+          <label htmlFor="offlineMode">
+            <input type="checkbox" name="offlineMode" id="offlineMode" checked={SettingsStore.offlineMode}/> Offline Mode
+          </label>
+          <p>Cache comments and content offline.</p>
+        </div>
         <div className="Settings__setting Settings__setting--checkbox">
           <label htmlFor="showDead">
             <input type="checkbox" name="showDead" id="showDead" checked={SettingsStore.showDead}/> show dead

src/StoryListItem.js

@@ -3,6 +3,7 @@ var ReactFireMixin = require('reactfire')
 
 var StoryCommentThreadStore = require('./stores/StoryCommentThreadStore')
 var HNService = require('./services/HNService')
+var HNServiceRest = require('./services/HNServiceRest')
 var SettingsStore = require('./stores/SettingsStore')
 var StoryStore = require('./stores/StoryStore')
 
@@ -94,8 +95,18 @@ var StoryListItem = React.createClass({
    * initialise its comment thread state.
    */
   initLiveItem(props) {
-    // If we were given a cached item to display initially, it will be replaced
-    this.bindAsObject(HNService.itemRef(props.id), 'item')
+    if (SettingsStore.offlineMode) {
+      HNServiceRest.itemRef(props.id).then(function(res) {
+        return res.json()
+      }).then(function(snapshot) {
+        this.replaceState({ item: snapshot })
+      }.bind(this))
+    }
+    else {
+      // If we were given a cached item to display initially, it will be replaced
+      this.bindAsObject(HNService.itemRef(props.id), 'item')
+    }
+
     this.threadState = StoryCommentThreadStore.loadState(props.id)
     this.props.store.addListener(props.id, this.updateThreadState)
   },

src/services/HNServiceRest.js

@@ -0,0 +1,62 @@
+/*global fetch*/
+require('isomorphic-fetch')
+/*
+A version of HNService which concumes the Firebase REST
+endpoint (https://www.firebase.com/docs/rest/api/). This
+is used when a user has enabled 'Offline Mode' in the
+Settings panel and ensures responses can be easily fetched
+and cached when paired with Service Worker. This cannot be
+trivially done using just Web Sockets with the default
+Firebase API and provides a sufficient fallback that works.
+ */
+var endPoint = 'https://hacker-news.firebaseio.com/v0'
+var options = {
+  method: 'GET',
+  headers: {
+    'Accept': 'application/json'
+  }
+}
+
+function storiesRef(path) {
+  return fetch(endPoint + '/' + path + '.json', options)
+}
+
+function itemRef(id) {
+  return fetch(endPoint + '/item/' + id + '.json', options)
+}
+
+function userRef(id) {
+  return fetch(endPoint + '/user/' + id + '.json', options)
+}
+
+function updatesRef() {
+  return fetch(endPoint + '/updates/items/' + '.json', options)
+}
+
+function fetchItem(id, cb) {
+  itemRef(id).once('value', function(snapshot) {
+    cb(snapshot.val())
+  })
+}
+
+function fetchItems(ids, cb) {
+  var items = []
+  ids.forEach(function(id) {
+    fetchItem(id, addItem)
+  })
+  function addItem(item) {
+    items.push(item)
+    if (items.length >= ids.length) {
+      cb(items)
+    }
+  }
+}
+
+module.exports = {
+  fetchItem,
+  fetchItems,
+  storiesRef,
+  itemRef,
+  userRef,
+  updatesRef
+}

src/stores/ItemStore.js

@@ -1,8 +1,9 @@
 var HNService = require('../services/HNService')
+var HNServiceRest = require('../services/HNServiceRest')
 
 var StoryStore = require('./StoryStore')
 var UpdatesStore = require('./UpdatesStore')
-
+var SettingsStore = require('./SettingsStore')
 var commentParentLookup = {}
 var titleCache = {}
 
@@ -72,7 +73,12 @@ var ItemStore = {
       setImmediate(cb, cachedItem)
     }
     else {
-      HNService.fetchItem(id, cb)
+      if (SettingsStore.offlineMode) {
+        HNServiceRest.fetchItem(id, cb)
+      }
+      else {
+        HNService.fetchItem(id, cb)
+      }
     }
   },
 

src/stores/SettingsStore.js

@@ -10,6 +10,7 @@ var SettingsStore = {
   showDeleted: false,
   titleFontSize: 18,
   listSpacing: 16,
+  offlineMode: false,
 
   load() {
     var json = storage.get(STORAGE_KEY)
@@ -25,7 +26,8 @@ var SettingsStore = {
       showDead: this.showDead,
       showDeleted: this.showDeleted,
       titleFontSize: this.titleFontSize,
-      listSpacing: this.listSpacing
+      listSpacing: this.listSpacing,
+      offlineMode: this.offlineMode
     }))
   }
 }