// Main Application Service Worker Manager (app.js) class ServiceWorkerManager { constructor() { this.registration = null; this.isOnline = navigator.onLine; this.isUpdateAvailable = false; this.init(); } async init() { if ('serviceWorker' in navigator) { this.setupEventListeners(); await this.registerServiceWorker(); this.setupBackgroundSync(); this.setupPushNotifications(); } } setupEventListeners() { // Network status monitoring window.addEventListener('online', () => { this.isOnline = true; this.handleOnline(); }); window.addEventListener('offline', () => { this.isOnline = false; this.handleOffline(); }); // Service Worker messages if ('serviceWorker' in navigator) { navigator.serviceWorker.addEventListener('message', this.handleSWMessage.bind(this)); } } async registerServiceWorker() { try { this.registration = await navigator.serviceWorker.register('/sw.js', { scope: '/' }); console.log('Service Worker registered:', this.registration); // Handle updates this.registration.addEventListener('updatefound', () => { const newWorker = this.registration.installing; console.log('Service Worker update found'); newWorker.addEventListener('statechange', () => { if (newWorker.state === 'installed' && navigator.serviceWorker.controller) { this.isUpdateAvailable = true; this.showUpdateNotification(); } }); }); // Check for existing updates await this.registration.update(); } catch (error) { console.error('Service Worker registration failed:', error); } } handleOnline() { console.log('App came online'); this.updateUI({ online: true }); // Trigger background sync if (this.registration && 'sync' in window.ServiceWorkerRegistration.prototype) { this.registration.sync.register('background-sync'); } } handleOffline() { console.log('App went offline'); this.updateUI({ online: false }); } handleSWMessage(event) { const { type, data } = event.data; switch (type) { case 'sync-success': this.handleSyncSuccess(data); break; case 'force-reload': window.location.reload(); break; case 'cache-updated': this.handleCacheUpdated(data); break; } } handleSyncSuccess(data) { console.log('Background sync successful:', data); this.showNotification('Data synchronized', 'Your changes have been saved.'); } // Update UI based on connectivity and cache status updateUI({ online }) { const statusElement = document.getElementById('connection-status'); const offlineIndicator = document.getElementById('offline-indicator'); if (statusElement) { statusElement.textContent = online ? 'Online' : 'Offline'; statusElement.className = online ? 'status-online' : 'status-offline'; } if (offlineIndicator) { offlineIndicator.style.display = online ? 'none' : 'block'; } // Update form behavior for offline this.updateFormBehavior(online); } updateFormBehavior(online) { const forms = document.querySelectorAll('form[data-sync]'); forms.forEach(form => { const submitButton = form.querySelector('[type="submit"]'); const statusElement = form.querySelector('.form-status'); if (!online) { if (statusElement) { statusElement.textContent = 'Changes will be saved when you\'re back online'; statusElement.className = 'form-status offline'; } } else { if (statusElement) { statusElement.textContent = ''; statusElement.className = 'form-status online'; } } }); } // Background Sync Setup setupBackgroundSync() { // Intercept form submissions for background sync document.addEventListener('submit', async (event) => { const form = event.target; if (form.hasAttribute('data-sync')) { event.preventDefault(); await this.handleSyncableFormSubmission(form); } }); } async handleSyncableFormSubmission(form) { const formData = new FormData(form); const data = Object.fromEntries(formData); try { const response = await fetch(form.action, { method: form.method || 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(data) }); if (response.ok) { this.showNotification('Success', 'Your data has been saved.'); form.reset(); } else if (response.status === 202) { // Queued for background sync this.showNotification('Queued', 'Your data will be saved when you\'re back online.'); form.reset(); } else { throw new Error('Server error'); } } catch (error) { console.error('Form submission failed:', error); this.showNotification('Error', 'Failed to save data. Please try again.'); } } // Cache Management async getCacheStatus() { if (!this.registration) return {}; return new Promise((resolve) => { const messageChannel = new MessageChannel(); messageChannel.port1.onmessage = (event) => { if (event.data.type === 'CACHE_STATUS') { resolve(event.data.data); } }; navigator.serviceWorker.controller.postMessage( { type: 'GET_CACHE_STATUS' }, [messageChannel.port2] ); }); } async clearCache(cacheName) { if (navigator.serviceWorker.controller) { navigator.serviceWorker.controller.postMessage({ type: 'CLEAR_CACHE', data: { cacheName } }); } } // Update Management showUpdateNotification() { const notification = document.createElement('div'); notification.className = 'update-notification'; notification.innerHTML = `

A new version of the app is available!

`; document.body.appendChild(notification); } async applyUpdate() { if (this.registration && this.registration.waiting) { this.registration.waiting.postMessage({ type: 'SKIP_WAITING' }); window.location.reload(); } } // Push Notifications async setupPushNotifications() { if (!('Notification' in window) || !('serviceWorker' in navigator)) { return; } let permission = Notification.permission; if (permission === 'default') { permission = await Notification.requestPermission(); } if (permission === 'granted' && this.registration) { await this.subscribeToPush(); } } async subscribeToPush() { try { const subscription = await this.registration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: this.urlB64ToUint8Array('YOUR_VAPID_PUBLIC_KEY') }); // Send subscription to server await this.sendSubscriptionToServer(subscription); console.log('Push notification subscription successful'); } catch (error) { console.error('Push subscription failed:', error); } } async sendSubscriptionToServer(subscription) { return fetch('/api/push-subscriptions', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(subscription) }); } urlB64ToUint8Array(base64String) { const padding = '='.repeat((4 - base64String.length % 4) % 4); const base64 = (base64String + padding) .replace(/-/g, '+') .replace(/_/g, '/'); const rawData = window.atob(base64); const outputArray = new Uint8Array(rawData.length); for (let i = 0; i < rawData.length; ++i) { outputArray[i] = rawData.charCodeAt(i); } return outputArray; } // Utility Methods showNotification(title, message) { // Create a simple toast notification const notification = document.createElement('div'); notification.className = 'toast-notification'; notification.innerHTML = `

${title}

${message}

`; document.body.appendChild(notification); // Auto remove after 3 seconds setTimeout(() => { notification.remove(); }, 3000); } // Offline Data Management async saveOfflineData(key, data) { if ('indexedDB' in window) { return this.saveToIndexedDB(key, data); } else { return this.saveToLocalStorage(key, data); } } async loadOfflineData(key) { if ('indexedDB' in window) { return this.loadFromIndexedDB(key); } else { return this.loadFromLocalStorage(key); } } async saveToIndexedDB(key, data) { return new Promise((resolve, reject) => { const request = indexedDB.open('OfflineDataDB', 1); request.onerror = () => reject(request.error); request.onsuccess = () => { const db = request.result; const transaction = db.transaction(['data'], 'readwrite'); const store = transaction.objectStore('data'); store.put({ key, data, timestamp: Date.now() }); transaction.oncomplete = () => resolve(); transaction.onerror = () => reject(transaction.error); }; request.onupgradeneeded = (event) => { const db = event.target.result; if (!db.objectStoreNames.contains('data')) { db.createObjectStore('data', { keyPath: 'key' }); } }; }); } async loadFromIndexedDB(key) { return new Promise((resolve, reject) => { const request = indexedDB.open('OfflineDataDB', 1); request.onerror = () => reject(request.error); request.onsuccess = () => { const db = request.result; const transaction = db.transaction(['data'], 'readonly'); const store = transaction.objectStore('data'); store.get(key).onsuccess = (event) => { const result = event.target.result; resolve(result ? result.data : null); }; }; }); } saveToLocalStorage(key, data) { try { localStorage.setItem(`offline-${key}`, JSON.stringify({ data, timestamp: Date.now() })); return Promise.resolve(); } catch (error) { return Promise.reject(error); } } loadFromLocalStorage(key) { try { const stored = localStorage.getItem(`offline-${key}`); if (stored) { const parsed = JSON.parse(stored); return Promise.resolve(parsed.data); } return Promise.resolve(null); } catch (error) { return Promise.reject(error); } } } // Initialize Service Worker Manager const serviceWorkerManager = new ServiceWorkerManager(); // Export for global access window.serviceWorkerManager = serviceWorkerManager;

Service Workers and Offline Functionality

Written by Rahul Aher