Merge pull request #114 from Web-Dev-Path/convert-to-PWA

Made the site a PWA

Author: klezi10

.gitignore

@@ -4,3 +4,10 @@ node_modules
 .env
 .DS_Store
 
+# PWA files
+**/public/sw.js
+**/public/sw.js.map
+**/public/worker-*.js
+**/public/worker-*.js.map
+**/public/workbox-*.js
+**/public/workbox-*.js.map

CHANGELOG.md

@@ -44,6 +44,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ### Added
 
+- Made the site a Progressive Web App (PWA)
 - About page content (first section)
 
 ### Fixed

next.config.js

@@ -0,0 +1,9 @@
+const withPWA = require('next-pwa');
+
+module.exports = withPWA({
+  pwa: {
+    dest: 'public',
+    register: true,
+    skipWaiting: true,
+  },
+});

package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "html-entities": "^2.3.2",
     "next": "^12.0.10",
+    "next-pwa": "^5.5.4",
     "react": "17.0.1",
     "react-dom": "17.0.1",
     "react-google-recaptcha": "^2.1.0",

public/favicon/maskable192.png

@@ -1,19 +1,27 @@
 {
     "name": "Web Dev Path",
     "short_name": "Web Dev Path",
+    "start_url": "/",
     "icons": [
-        {
-            "src": "/android-chrome-192x192.png",
-            "sizes": "192x192",
-            "type": "image/png"
-        },
-        {
-            "src": "/android-chrome-512x512.png",
-            "sizes": "512x512",
-            "type": "image/png"
-        }
+      {
+        "src": "/favicon/android-chrome-192x192.png",
+        "sizes": "192x192",
+        "type": "image/png"
+      },
+      {
+        "src": "/favicon/android-chrome-512x512.png",
+        "sizes": "512x512",
+        "type": "image/png"
+      },
+      {
+        "src": "/favicon/maskable192.png",
+        "sizes": "192x192",
+        "type": "image/png",
+        "purpose": "maskable"
+      }
     ],
-    "theme_color": "#ffffff",
-    "background_color": "#ffffff",
-    "display": "standalone"
-}
+    "theme_color": "#FFFFFF",
+    "background_color": "#FFFFFF",
+    "display": "standalone",
+    "orientation": "portrait"
+  }