How can a service worker be used to implement background sync or push notifications?

Question

ICSM · Answer

1. Background Sync with Service Worker
Background sync lets your app retry failed network requests when the user has a stable connection again — even if the app is closed.
Use case: Offline-first apps (e.g., Twitter, Gmail, Todo apps) where you create content offline and it syncs later.
Steps:
Register the sync in your page script
navigator.serviceWorker.ready.then(event =andgt; {
    return event.sync.register('sync-posts'); // Tag your sync event
});
Listen for the sync event in the Service Worker
self.addEventListener('sync', event =andgt; {
    if (event.tag === 'sync-posts') {
        event.waitUntil(syncPendingPosts());
    }
});
async function syncPendingPosts() {
    const posts = await getPendingPostsFromIndexedDB();
    for (const post of posts) {
        try {
            await fetch('/api/posts', {
                method: 'POST',
                body: JSON.stringify(post),
                headers: { 'Content-Type': 'application/json' }
            });
            await markPostAsSynced(post.id);
        } catch (err) {
            console.error('Sync failed, will retry later:', err);
            throw err; // ensures retry on next connection
        }
    }
}
and 
2. Push Notifications with Service Worker
Push notifications allow your server to send messages to users using the 
Push API + Service Workers, even if the site isn’t open.
Use case: Messaging apps, news apps, reminders or marketing notifications.
Steps:
Subscribe to push on the client
navigator.serviceWorker.ready.then(async event =andgt; {
    const subscription = await event.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: urlBase64ToUint8Array('andlt;Your-VAPID-Public-Keyandgt;')
    });
    // Send subscription details to your server
    await fetch('/save-subscription', {
        method: 'POST',
        body: JSON.stringify(subscription),
        headers: { 'Content-Type': 'application/json' }
    });
});
Handle push events in the Service Worker
self.addEventListener('push', event =andgt; {
    let data = {};
    if (event.data) {
        data = event.data.json();
    }
    const options = {
        body: data.body,
        icon: '/icons/icon-192x192.png',
        badge: '/icons/badge-72x72.png',
        actions: [
            { action: 'open', title: 'Open App' },
            { action: 'dismiss', title: 'Dismiss' }
        ]
    };
    event.waitUntil(
        self.registration.showNotification(data.title, options)
    );
});
Handle notification clicks
self.addEventListener('notificationclick', event =andgt; {
    event.notification.close();
    if (event.action === 'open') {
        event.waitUntil(clients.openWindow('/dashboard'));
    }
});
and 
Key Difference
Background Sync → triggered when connectivity is restored, ensures reliable delivery of user actions.Push Notifications → This server-triggered feature lets you re-engage users even if the app is closed.

interview

How can a service worker be used to implement background sync or push notifications?

ICSM

Can you answer this question?

1 Answers

1. Background Sync with Service Worker

Steps:

2. Push Notifications with Service Worker

Steps:

Key Difference

Liked By