.

public/service-worker.js

@@ -6,22 +6,50 @@ self.addEventListener('install', (event) => {
 		caches.open(cacheName).then(async (cache) => {
 			const response = await fetch('/cacheAssets.json');
 			const cacheAssets = await response.json();
-			return await cache.addAll(cacheAssets);
+			const totalAssets = cacheAssets.length;
+			let cachedAssets = 0;
+
+			for (const asset of cacheAssets) {
+				await cache.add(asset);
+				const progress = `${++cachedAssets}/${totalAssets}`;
+
+				const clients = await self.clients.matchAll();
+				clients.forEach((client) => {
+					client.postMessage({
+						type: 'sw-install-progress',
+						msg: progress,
+					});
+				});
+			}
 		})
 	);
 });
 
 self.addEventListener('activate', (event) => {
 	event.waitUntil(
-		caches.keys().then((keyList) => {
-			return Promise.all(
-				keyList.map((key) => {
-					if (key !== cacheName) {
-						return caches.delete(key);
-					}
-				})
-			);
-		})
+		caches
+			.keys()
+			.then((keyList) => {
+				return Promise.all(
+					keyList.map((key) => {
+						if (key !== cacheName) {
+							return caches.delete(key);
+						}
+					})
+				);
+			})
+			.then(() => {
+				return self.clients.claim();
+			})
+			.then(() => {
+				return self.clients.matchAll().then((clients) => {
+					clients.forEach((client) => {
+						client.postMessage({
+							type: 'sw-activation-complete',
+						});
+					});
+				});
+			})
 	);
 });
 

public/sw-register.js

@@ -1,7 +1,22 @@
 if ('serviceWorker' in navigator) {
 	window.addEventListener('load', () => {
-		navigator.serviceWorker.register('/service-worker.js').catch((error) => {
-			console.error('Service worker registration failed:', error);
-		});
+		navigator.serviceWorker
+			.register('/service-worker.js')
+			.then((registration) => {
+				console.log('Service worker registered with scope:', registration.scope);
+
+				navigator.serviceWorker.addEventListener('message', (event) => {
+					if (event.data && event.data.type === 'install-progress') {
+						console.log(`Service worker installation progress: ${event.data.msg} assets`);
+						// Update your UI with the progress
+					} else if (event.data && event.data.type === 'activation-complete') {
+						console.log('Service worker installation is complete!');
+						alert('Service worker installation is complete!');
+					}
+				});
+			})
+			.catch((error) => {
+				console.error('Service worker registration failed:', error);
+			});
 	});
 }