feature: basic push notification added on click event

index.html

@@ -24,9 +24,8 @@
         <nav>
             <h3>PWA Demo</h3>
         </nav>
-        <div class="container">
-
-        </div>
+        <button onclick="main()" class="ask-permission btn">Ask Permission</button>
+        <div class="container"></div>
     </main>
     <script src="serviceWorker.js"></script>
     <script src="./js/app.js"></script>

js/app.js

@@ -6,15 +6,6 @@ const images = [
   { name: "mist3", image: "../images/wp4155376-mist-wallpapers.jpg" },
 ];
 
-const check = () => {
-  if (!("serviceWorker" in navigator)) {
-    throw new Error("No Service Worker support!");
-  }
-  if (!("PushManager" in window)) {
-    throw new Error("No Push API Support!");
-  }
-};
-
 const showCards = () => {
   let output = ``;
   images.forEach(
@@ -36,19 +27,19 @@ const showCards = () => {
 
 document.addEventListener("DOMContentLoaded", showCards);
 
-// if ("serviceWorker" in navigator) {
-//   window.addEventListener("load", function () {
-//     navigator.serviceWorker
-//       .register("/serviceWorker.js")
-//       .then((res) => console.log("service worker registered"))
-//       .catch((err) => console.log("service worker not refistered:", err));
-//   });
-// }
+const check = () => {
+  if (!("serviceWorker" in navigator)) {
+    throw new Error("No Service Worker support!");
+  }
+  if (!("PushManager" in window)) {
+    throw new Error("No Push API Support!");
+  }
+};
 
 const registerServiceWorker = async () => {
   const swRegistration = await navigator.serviceWorker.register(
     "../serviceWorker.js"
-  ); //notice the file name
+  );
   return swRegistration;
 };
 
@@ -59,10 +50,32 @@ const requestNotificationPermission = async () => {
   }
 };
 
+const showLocalNotification = (title, body, swRegistration) => {
+  const options = {
+    body,
+    icon: "../images/icon-144x144.png",
+  };
+  swRegistration.showNotification(title, options);
+};
+
 const main = async () => {
   check();
   const swRegistration = await registerServiceWorker();
   const permission = await requestNotificationPermission();
+  showLocalNotification(
+    "About Mist Forests",
+    "They are beutiful!",
+    swRegistration
+  );
 };
 
-main();
+// main();
+
+// if ("serviceWorker" in navigator) {
+//   window.addEventListener("load", function () {
+//     navigator.serviceWorker
+//       .register("/serviceWorker.js")
+//       .then((res) => console.log("service worker registered"))
+//       .catch((err) => console.log("service worker not refistered:", err));
+//   });
+// }

main.css

@@ -7,7 +7,7 @@ nav {
 }
 
 nav h3{
-    color: rgb(0, 41, 0);
+    color: darkgreen;
 }
 
 main {
@@ -34,4 +34,16 @@ main {
 .card-img-top{
     object-fit: cover !important;
     height: 10rem;
-}
+    user-select: none;
+}
+
+.ask-permission{
+    margin-top: 1.5rem;
+    background-color: #d5fce7;
+    border: 1px solid darkolivegreen;
+    color: darkgreen;
+}
+
+.ask-permission:active{
+    outline: none !important;
+}   

serviceWorker.js

@@ -28,3 +28,13 @@ self.addEventListener("fetch", (fetchEvent) => {
     })
   );
 });
+
+// self.addEventListener("activate", async () =>{ 
+//   try {
+//     const options = {}
+//     const subscription = await self.registration.pushManager.subscribe(options)
+//     console.log(JSON.stringify(subscription))
+//   } catch (err) {
+//     console.log('Error', err)
+//   }
+// })