feat: add PWA

.gitignore

@@ -40,3 +40,11 @@ next-env.d.ts
 # Built files for robots
 public/sitemap.xml
 public/robots.txt
+
+# Auto Generated PWA files
+**/public/sw.js
+**/public/workbox-*.js
+**/public/worker-*.js
+**/public/sw.js.map
+**/public/workbox-*.js.map
+**/public/worker-*.js.map

next.config.js

@@ -1,5 +1,6 @@
 const withLess = require('next-with-less');
 const pack = require('./package.json');
+const withPWA = require('next-pwa')({ dest: 'public' });
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
@@ -35,48 +36,50 @@ const nextConfig = {
   },
 };
 
-module.exports = withLess({
-  ...nextConfig,
-  lessLoaderOptions: {
-    lessOptions: {
-      // See full list of Ant styles here:
-      // https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
-      modifyVars: {
-        'primary-color': '#1C998B',
-        'secondary-color': '#1C998B',
-        'accent-color': '#1C998B',
-        'info-color': '@accent-color',
-        'alert-info-bg-color': '@accent-color',
-        // Override Ant typography.
-        'heading-1-size': '3.75rem',
-        'heading-2-size': '1.875rem',
-        'typography-title-font-weight': '400',
-        // Set height and border radius for 'default' type elements, e.g. buttons, inputs, etc.
-        'height-base': '48px',
-        'height-sm': '32px',
-        'border-radius-base': '10px',
-        'border-color-base': '#141414',
-        // Set header styles.
-        'layout-header-height': 'auto',
-        'layout-header-min-height': '4.375rem',
-        'layout-header-padding': '0',
-        'header-background-color': '@primary-color',
-        'header-text-color': 'white',
-        'header-banner-background-color':
-          'linear-gradient(@secondary-color, @primary-color)',
-        'header-banner-text-color': 'white',
-        // Set search styles.
-        'search-icon-color': 'white',
-        'search-icon-bg-color': '@accent-color',
-        // Set card styles.
-        'card-padding-base': '16px',
-        'home-page-card-icon-color': '#141414',
-        // Set cookie banner styles.
-        'cookie-banner-text': '#000',
-        'cookie-banner-back': '#F9D779',
-        'link-color': '#0000ee',
-        'link-hover-color': '#0000eea8',
+module.exports = withPWA(
+  withLess({
+    ...nextConfig,
+    lessLoaderOptions: {
+      lessOptions: {
+        // See full list of Ant styles here:
+        // https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
+        modifyVars: {
+          'primary-color': '#1C998B',
+          'secondary-color': '#1C998B',
+          'accent-color': '#1C998B',
+          'info-color': '@accent-color',
+          'alert-info-bg-color': '@accent-color',
+          // Override Ant typography.
+          'heading-1-size': '3.75rem',
+          'heading-2-size': '1.875rem',
+          'typography-title-font-weight': '400',
+          // Set height and border radius for 'default' type elements, e.g. buttons, inputs, etc.
+          'height-base': '48px',
+          'height-sm': '32px',
+          'border-radius-base': '10px',
+          'border-color-base': '#141414',
+          // Set header styles.
+          'layout-header-height': 'auto',
+          'layout-header-min-height': '4.375rem',
+          'layout-header-padding': '0',
+          'header-background-color': '@primary-color',
+          'header-text-color': 'white',
+          'header-banner-background-color':
+            'linear-gradient(@secondary-color, @primary-color)',
+          'header-banner-text-color': 'white',
+          // Set search styles.
+          'search-icon-color': 'white',
+          'search-icon-bg-color': '@accent-color',
+          // Set card styles.
+          'card-padding-base': '16px',
+          'home-page-card-icon-color': '#141414',
+          // Set cookie banner styles.
+          'cookie-banner-text': '#000',
+          'cookie-banner-back': '#F9D779',
+          'link-color': '#0000ee',
+          'link-hover-color': '#0000eea8',
+        },
       },
     },
-  },
-});
+  })
+);

package.json

@@ -35,6 +35,7 @@
     "less": "^4.1.3",
     "less-loader": "^11.0.0",
     "next": "12.3.0",
+    "next-pwa": "^5.6.0",
     "next-share": "^0.19.0",
     "next-sitemap": "^3.1.17",
     "next-with-less": "^2.0.5",

pages/_document.tsx

@@ -19,6 +19,9 @@ function Document() {
           id="rs_req_Init"
           defer
         ></script>
+        <link rel="manifest" href="/manifest.json" />
+        <link rel="apple-touch-icon" href="/icon.png"></link>
+        <meta name="theme-color" content="#1C998B" />
         {/*
         TODO: get API Key from your Product manager, update src and uncomment the script.
         <script

public/manifest.json

@@ -0,0 +1,32 @@
+{
+    "theme_color": "#1C998B",
+    "background_color": "#1C998B",
+    "display": "standalone",
+    "scope": "/",
+    "start_url": "/",
+    "name": "ImportaMi",
+    "short_name": "ImportaMi",
+    "description": "PWA ImportaMi",
+    "icons": [
+        {
+            "src": "/icon-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/icon-256x256.png",
+            "sizes": "256x256",
+            "type": "image/png"
+        },
+        {
+            "src": "/icon-384x384.png",
+            "sizes": "384x384",
+            "type": "image/png"
+        },
+        {
+            "src": "/icon-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ]
+}