Services
Technology Web App Development Mobile App Development Windows App Development Database Development UI/UX Development Cloud Development SEO Digital Marketing Guest Posting Content Writing Artificial Intelligence Data Science ERP Development CRM Development CMS Development LMS Development Business Listing Blockchain Technology Startup Promotion AI Tools Integration
Products
Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller
Developer
Article Blog Forum Interview Beginner News Startup Quiz
Users
Career
Apply Job Internship
Pricing
Login Sign Up Get a Quote

interview

Home Interviews How can a service worker be used to implement background sync or push notifications? – MindStick
Ask Question

1 Answers

ICSM Computer
ICSM Computer 17 Aug 2025
Report Abuse

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 => {
    return event.sync.register('sync-posts'); // Tag your sync event
});

self.addEventListener('sync', event => {
    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
        }
    }
}

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 => {
    const subscription = await event.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: urlBase64ToUint8Array('<Your-VAPID-Public-Key>')
    });

    // 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 => {
    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 => {
    event.notification.close();

    if (event.action === 'open') {
        event.waitUntil(clients.openWindow('/dashboard'));
    }
});

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.
MindStick Training
Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.

Open .md