Feat: PWA added with offline support #4

index.html

@@ -5,12 +5,22 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>Dopefolio</title>
+
     <meta name="description" content="Portfolio Template for Developer" />
+    <meta name="theme-color" content="#eee" />
 
     <link rel="stylesheet" href="css/style.css" />
+    <link rel="manifest" href="manifest.json" />
+    <link rel="icon" type="image/png" href="./assets/png/john-doe.png" />
+    <link
+      rel="apple-touch-icon"
+      type="image/png"
+      href="./assets/png/john-doe.png"
+    />
 
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+
     <link
       href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700;900&display=swap"
       rel="stylesheet"
@@ -131,7 +141,9 @@ <h1 class="heading-primary">Hey, My name is John Doe</h1>
         <div class="home-hero__social">
           <a
             href="#"
-            class="home-hero__social-icon-link home-hero__social-icon-link--bd-none"
+            class="
+              home-hero__social-icon-link home-hero__social-icon-link--bd-none
+            "
           >
             <img
               src="./assets/png/insta-ico.png"

index.js

@@ -15,4 +15,17 @@ const headerLogoConatiner = document.querySelector('.header__logo-container')
 
 headerLogoConatiner.addEventListener('click', () => {
   location.href = 'index.html'
-})
+})
+
+
+if ("serviceWorker" in navigator)
+{
+  navigator.serviceWorker.register("sw.js").then(registration =>
+  {
+    console.log("SW Registered!");
+    console.log(registration);
+  }).catch(err =>
+  {
+    console.log("SW Registration Failed "+ err)
+  })
+}

manifest.json

@@ -0,0 +1,33 @@
+{
+    "name":"Dopefolio",
+    "short_name":"Dopefolio",
+    "description":"Portfolio Template for Developers",
+    "start_url":".",
+    "background_color":"#eee",
+    "theme_color":"#eee",
+    "display":"standalone",
+    "orientation":"portrait",
+    "icons":[
+        {
+            "src":"assets/png/john-doe-512.png",
+            "type":"image/png",
+            "sizes":"512x512"
+        },
+        {
+            "src":"assets/png/john-doe-144.png",
+            "type":"image/png",
+            "sizes":"144x144"
+        },
+        {
+            "src":"assets/png/john-doe-196.png",
+            "type":"image/png",
+            "sizes":"196x196"
+        },
+        {
+            "src":"assets/png/john-doe-256.png",
+            "type":"image/png",
+            "sizes":"256x256"
+        }
+
+    ]
+}

sw.js

@@ -0,0 +1,17 @@
+// service worker
+self.addEventListener("install", (e) => {
+  e.waitUntil(
+    caches.open("static").then((cache) => {
+      return cache.addAll(["./", "./css/style.css", "./assets"]);
+    })
+  );
+});
+
+self.addEventListener("fetch", (e) => {
+    e.respondWith(
+        caches.match(e.request).then(response =>
+        {
+            return response || fetch(e.request);
+     })
+ )
+});