Ping actual server for connectivity status

Author: ovidner

blapp/frontend/src/commerce/index.tsx

@@ -4,8 +4,10 @@ import { Provider } from 'react-redux'
 import { applyMiddleware, compose, createStore, StoreEnhancer } from 'redux'
 import { offline } from '@redux-offline/redux-offline'
 import offlineConfig from '@redux-offline/redux-offline/lib/defaults'
+import { NetworkCallback } from '@redux-offline/redux-offline/lib/types'
 import logger from 'redux-logger'
 import thunk from 'redux-thunk'
+import isReachable from 'is-reachable'
 
 import { AppContainer } from 'blapp/commerce/containers/App'
 import reducer from 'blapp/commerce/reducers'
@@ -15,9 +17,34 @@ const persistCallback = () => {
   store.subscribe(() => doRender())
 }
 
+const detectNetwork = (callback: NetworkCallback) => {
+  const handle = (status: boolean) => {
+    // Copy-ished from original redux-offline implementation
+    if (window.requestAnimationFrame) {
+      window.requestAnimationFrame(() => callback(status))
+    } else {
+      setTimeout(() => callback(status), 0)
+    }
+  }
+
+  const checkNetwork = () => {
+    if (navigator.onLine === false) {
+      handle(false)
+    }
+
+    isReachable(location.origin, {timeout: 5000}).then(handle)
+  }
+
+  window.addEventListener("online", checkNetwork)
+  window.addEventListener("offline", checkNetwork)
+  setInterval(checkNetwork, 60000)
+  checkNetwork()
+}
+
 const offlineConf = {
   ...offlineConfig,
   persistCallback,
+  detectNetwork,
 }
 
 const store = createStore(

package.json

@@ -7,6 +7,7 @@
     "@fortawesome/fontawesome-free-solid": "^5.0.13",
     "@fortawesome/react-fontawesome": "^0.0.20",
     "@redux-offline/redux-offline": "^2.3.3",
+    "@types/is-reachable": "^3.0.0",
     "@types/luxon": "^0.5.2",
     "@types/ramda": "^0.25.32",
     "@types/react": "^16.3.16",
@@ -21,6 +22,7 @@
     "autoprefixer": "^8.6.3",
     "bootstrap": "^4.1.1",
     "css-loader": "^0.28.11",
+    "is-reachable": "^3.0.0",
     "luxon": "^1.2.1",
     "node-sass": "^4.9.0",
     "npm-run-all": "^4.1.3",