Added offline support to kutt

client/pages/offline.js

@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+import styled from 'styled-components';
+import BodyWrapper from '../components/BodyWrapper';
+
+const Wrapper = styled.h2`
+  font-size: 24px;
+  font-weight: 300;
+  position: absolute;
+  text-align: center;
+  top: 40vh;
+  padding-left: 10px;
+  padding-right: 10px;
+`;
+
+// eslint-disable-next-line react/prefer-stateless-function
+class OfflinePage extends Component {
+  render() {
+    return (
+      <BodyWrapper>
+        <Wrapper>
+          Please check your <b>internet connection</b> and try again. <br />
+          You are <b>offline</b> right now.
+        </Wrapper>
+      </BodyWrapper>
+    );
+  }
+}
+
+export default OfflinePage;

server/offline/sw.js

@@ -2,35 +2,19 @@
 
 // eslint-disable-next-line no-restricted-globals
 self.addEventListener('install', event => {
-  const indexPage = new Request('index.html');
+  const offlinePage = new Request('/offline');
   event.waitUntil(
-    fetch(indexPage).then(response =>
-      caches.open('kutt-offline').then(cache => cache.put(indexPage, response))
+    fetch(offlinePage).then(response =>
+      caches.open('kutt-offline-v1').then(cache => cache.put(offlinePage, response))
     )
   );
 });
 
 // eslint-disable-next-line no-restricted-globals
 self.addEventListener('fetch', event => {
-  const updateCache = request =>
-    caches
-      .open('kutt-offline')
-      .then(cache => fetch(request).then(response => cache.put(request, response)));
-
-  event.waitUntil(updateCache(event.request));
-
   event.respondWith(
     fetch(event.request).catch(() =>
-      // Check to see if you have it in the cache
-      // Return response
-      // If not in the cache, then return error page
-      caches.open('kutt-offline').then(cache =>
-        cache.match(event.request).then(matching => {
-          const report =
-            !matching || matching.status === 404 ? Promise.reject(new Error('no-match')) : matching;
-          return report;
-        })
-      )
+      caches.open('kutt-offline-v1').then(cache => cache.match('/offline'))
     )
   );
 });

server/server.js

@@ -70,6 +70,7 @@ app.prepare().then(() => {
   server.get('/terms', (req, res) => app.render(req, res, '/terms'));
   server.get('/report', (req, res) => app.render(req, res, '/report'));
   server.get('/banned', (req, res) => app.render(req, res, '/banned'));
+  server.get('/offline', (req, res) => app.render(req, res, '/offline'));
   server.get('/reset-password/:resetPasswordToken?', catchErrors(auth.resetPassword), (req, res) =>
     app.render(req, res, '/reset-password', req.user)
   );
@@ -79,9 +80,9 @@ app.prepare().then(() => {
 
   // Disabled service worker because of multiple requests
   // Resulting in duplicated visist count
-  // server.get('/sw.js', (_req, res) => {
-  //   res.sendFile(`${__dirname}/offline/sw.js`);
-  // });
+  server.get('/sw.js', (_req, res) => {
+    res.sendFile(`${__dirname}/offline/sw.js`);
+  });
 
   /* User and authentication */
   server.post('/api/auth/signup', validationCriterias, validateBody, catchErrors(auth.signup));