Merge pull request #136 from akash-joshi/develop

Added PWA functionality

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,18 @@ 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,38 @@
+// 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', event => {
+  const indexPage = new Request('index.html');
+  event.waitUntil(
+    fetch(indexPage).then(response =>
+      caches.open('kutt-offline').then(cache => 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', 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;
+        })
+      )
+    )
+  );
+});

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
+}