Add PWA

client/pages/_document.js

@@ -39,6 +39,8 @@ class AppDocument extends Document {
           <link rel="icon" sizes="16x16" href="/images/favicon-16x16.png" />
           <link rel="apple-touch-icon" href="/images/favicon-196x196.png" />
           <link rel="mask-icon" href="/images/icon.svg" color="blue" />
+          <link rel = "manifest" href = "manifest.webmanifest" />
+          <meta name = "theme-color" content = "#f3f3f3" />
 
           <meta property="fb:app_id" content="123456789" />
           <meta property="og:url" content="https://kutt.it" />
@@ -59,6 +61,17 @@ class AppDocument extends Document {
             }}
           />
 
+          <script dangerouslySetInnerHTML = {{
+              __html: `
+                if('serviceWorker' in navigator) {
+                  navigator.serviceWorker.register('sw.js', {
+                      scope: './'
+                    })
+                  }
+                `,
+            }}
+          />
+
           <script src="https://www.google.com/recaptcha/api.js?render=explicit" async defer />
           <script src="/analytics.js" />
         </Head>

server/offline/sw.js

@@ -0,0 +1,45 @@
+//This is the "Offline copy of pages" service worker
+
+//Install stage sets up the index page (home page) in the cache and opens a new cache
+const {self} = window;
+
+self.addEventListener('install', function(event) {
+    var indexPage = new Request('index.html');
+    event.waitUntil(
+        fetch(indexPage).then(function(response) {
+            return caches.open('kutt-offline').then(function(cache) {
+                console.log('Kutt Cached index page during Install' + response.url);
+                return cache.put(indexPage, response);
+            });
+        }));
+});
+
+//If any fetch fails, it will look for the request in the cache and serve it from there first
+self.addEventListener('fetch', function(event) {
+    var updateCache = function(request) {
+        return caches.open('kutt-offline').then(function(cache) {
+            return fetch(request).then(function(response) {
+                console.log('Kutt add page to offline' + response.url)
+                return cache.put(request, response);
+            });
+        });
+    };
+
+    event.waitUntil(updateCache(event.request));
+
+    event.respondWith(
+        fetch(event.request).catch(function(error) {
+            console.log('Kutt Network request Failed. Serving content from cache: ' + error);
+
+            //Check to see if you have it in the cache
+            //Return response
+            //If not in the cache, then return error page
+            return caches.open('kutt-offline').then(function(cache) {
+                return cache.match(event.request).then(function(matching) {
+                    var report = !matching || matching.status == 404 ? Promise.reject(new Error('no-match')) : matching;
+                    return report
+                });
+            });
+        })
+    );
+})

server/server.js

@@ -86,6 +86,9 @@ app.prepare().then(() => {
   server.get('/verify/:verificationToken?', catchErrors(auth.verify), (req, res) =>
     app.render(req, res, '/verify', req.user)
   );
+  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));

static/manifest.webmanifest

@@ -0,0 +1,53 @@
+{
+  "name": "Kutt",
+  "short_name": "Kutt",
+  "theme_color": "#f3f3f3",
+  "background_color": "#f3f3f3",
+  "display": "standalone",
+  "description": "Kutt.it is a free and open source URL shortener with custom domains and stats.",
+  "Scope": "/",
+  "start_url": "/",
+  "icons": [
+    {
+      "src": "images/icons/icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icons/icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icons/icon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icons/icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icons/icon-152x152.png",
+      "sizes": "152x152",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icons/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "splash_pages": null
+}