Adding PWA

arangates · Aug 5, 2020 · 181badd · 181badd · vercel · Aug 5, 2020
1 parent feab58e
commit 181badd
Show file tree

Hide file tree

Showing 9 changed files with 57 additions and 37 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,5 +1,6 @@
 {
     "files.exclude": {
         "**/node_modules/**": true
-    }
+    },
+    "css.lint.unknownAtRules": "ignore"
 }
diff --git a/README.md b/README.md
@@ -2,5 +2,11 @@
 
 All network requests are proxied via CORS Anywhere helps with accessing data from other websites that is normally forbidden by the same origin policy of web browsers
 
+SWR - state management 
+SSR - NextJS
+PWA - next-pwa
+recharts - Charting library
+idb-keyval - IndexedDB
+
 
 Demo : https://comparecart.vercel.app/
diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -15,7 +15,17 @@ class MyDocument extends Document {
   render() {
     return (
       <Html lang="en">
-        <Head />
+      <Head>
+        <title>CompareCart</title>
+        <meta name='viewport' content='initial-scale=1.0, width=device-width' />
+        <meta name='theme-color' content='#4553F0' />
+        <meta
+          name='description'
+          content='The compare cart will show the difference between the sellers, rating and price.'
+        />
+        <link rel="apple-touch-icon" href="/maskable_logo1024.png"></link>
+        <link rel="manifest" href="/manifest.webmanifest"></link>
+      </Head>
         <body>
           <Main />
           <NextScript />

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,14 +1,13 @@
 import React, { useReducer, useEffect } from 'react';
 import { set, get } from 'idb-keyval';
-import Head from 'next/head';
 
 import {
+  Loader,
   SiteHeader,
   SideBar,
+  Title,
   Search,
   ProductList,
-  Title,
-  Loader,
 } from 'components';
 
 import { reducer, initialState, fetchProducts } from 'services/product';
@@ -72,15 +71,6 @@ const IndexPage = () => {
 
   return (
     <>
-      <Head>
-        <title>CompareCart</title>
-        <meta name='viewport' content='initial-scale=1.0, width=device-width' />
-        <meta name='theme-color' content='#4553F0' />
-        <meta
-          name='description'
-          content='The compare cart will show the difference between the sellers, rating and price.'
-        />
-      </Head>
       <div
         id='app'
         className='min-h-screen bg-white-200 antialiased xl:flex xl:flex-col xl:h-screen'

diff --git a/public/manifest.json → public/manifest.webmanifest b/public/manifest.json → public/manifest.webmanifest
@@ -1,6 +1,7 @@
 {
   "short_name": "Comparecart",
   "name": "Compare cart",
+  "description": "The compare cart will show the difference between the sellers, rating and price.",
   "icons": [
     {
       "src": "favicon.ico",
@@ -13,12 +14,18 @@
       "sizes": "192x192"
     },
     {
+      "purpose": "maskable",
       "src": "logo512.png",
       "type": "image/png",
       "sizes": "512x512"
+    },
+    {
+      "purpose": "maskable",
+      "src": "maskable_logo1024",
+      "type": "image/png",
+      "sizes": "1024x512"
     }
   ],
-  "description": "The compare cart will show the difference between the sellers, rating and price.",
   "lang": "en-US",
   "start_url": ".",
   "display": "standalone",

diff --git a/public/maskable_logo1024.png b/public/maskable_logo1024.png
diff --git a/public/sw.js b/public/sw.js
diff --git a/public/workbox-432e0d0b.js b/public/workbox-432e0d0b.js
diff --git a/styles/index.css b/styles/index.css
@@ -7,16 +7,10 @@ body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
-  font-size: clamp(100%, 1rem + 2vw, 14px);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
-
 .frappe-chart .x.axis text {
   display: none;
 }
@@ -29,38 +23,48 @@ code {
   margin: 100px auto;
 }
 
-.double-bounce1, .double-bounce2 {
+.double-bounce1,
+.double-bounce2 {
   width: 100%;
   height: 100%;
   border-radius: 50%;
-  background-color: #6A75F3;
+  background-color: #6a75f3;
   opacity: 0.6;
   position: absolute;
   top: 0;
   left: 0;
-  
-  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
-  animation: sk-bounce 2.0s infinite ease-in-out;
+
+  -webkit-animation: sk-bounce 2s infinite ease-in-out;
+  animation: sk-bounce 2s infinite ease-in-out;
 }
 
 .double-bounce2 {
-  -webkit-animation-delay: -1.0s;
-  animation-delay: -1.0s;
+  -webkit-animation-delay: -1s;
+  animation-delay: -1s;
 }
 
 @-webkit-keyframes sk-bounce {
-  0%, 100% { -webkit-transform: scale(0.0) }
-  50% { -webkit-transform: scale(1.0) }
+  0%,
+  100% {
+    -webkit-transform: scale(0);
+  }
+  50% {
+    -webkit-transform: scale(1);
+  }
 }
 
 @keyframes sk-bounce {
-  0%, 100% { 
-    transform: scale(0.0);
-    -webkit-transform: scale(0.0);
-  } 50% { 
-    transform: scale(1.0);
-    -webkit-transform: scale(1.0);
+  0%,
+  100% {
+    transform: scale(0);
+    -webkit-transform: scale(0);
+  }
+  50% {
+    transform: scale(1);
+    -webkit-transform: scale(1);
   }
 }
 
-button:focus {outline:0;}
+button:focus {
+  outline: 0;
+}