Merge pull request #64 from satyam-seth-learnings/service-worker-api

satyam-seth · web-flow · commit 7e31b7173216 · 2025-01-26T01:00:21.000+05:30
Add service worker api demo
diff --git a/Service Worker API/README.md b/Service Worker API/README.md
@@ -0,0 +1,3 @@
+[MDN Doc Link](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers)
+
+[MDN Example Link](https://github.dev/mdn/dom-examples/tree/main/service-worker/simple-service-worker)
diff --git a/Service Worker API/demo.html b/Service Worker API/demo.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Service Worker API</title>
+</head>
+<body>
+    <button id="sw-register">Register Service Worker</button>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Service Worker API/image.png b/Service Worker API/image.png
diff --git a/Service Worker API/script.js b/Service Worker API/script.js
@@ -0,0 +1,23 @@
+async function registerServiceWorker() {
+    if ("serviceWorker" in navigator) {
+        try {
+            const registration = await navigator.serviceWorker.register("/Service Worker API/sw.js", {
+                scope: "/Service Worker API/",
+            });
+            if (registration.installing) {
+                console.log("Service worker installing");
+            } else if (registration.waiting) {
+                console.log("Service worker installed");
+            } else if (registration.active) {
+                console.log("Service worker active");
+            }
+        } catch (error) {
+            console.error(`Registration failed with ${error}`);
+        }
+    }
+};
+
+window.onload = function () {
+    const registerSwBtn = document.getElementById('sw-register');
+    registerSwBtn.addEventListener('click', registerServiceWorker);
+}
diff --git a/Service Worker API/style.css b/Service Worker API/style.css
@@ -0,0 +1,3 @@
+body {
+    background-color: black;
+}
diff --git a/Service Worker API/sw.js b/Service Worker API/sw.js
@@ -0,0 +1,17 @@
+const addResourcesToCache = async (resources) => {
+    const cache = await caches.open('v1');
+    await cache.addAll(resources);
+};
+
+
+// Install and activate: populating your cache
+self.addEventListener('install', (event) => {
+    event.waitUntil(
+        addResourcesToCache([
+            '/Service Worker API/demo.html',
+            '/Service Worker API/style.css',
+            '/Service Worker API/script.js',
+            '/Service Worker API/image.png',
+        ])
+    );
+});

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+[MDN Doc Link](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers)`
	`2`	`+`
	`3`	`+[MDN Example Link](https://github.dev/mdn/dom-examples/tree/main/service-worker/simple-service-worker)`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+body {`
	`2`	`+ background-color: black;`
	`3`	`+}`