Service Workers

Service Workers are proxy servers that sit between web apps, the browser, and the network. They enable reliable offline experiences, background sync, and push notifications.

Offline First approach
Push Notifications
Background Sync
Network request interception
Resource caching strategies

⚙️ Service Worker Status

State:checking...

Network Status:Online

Note: Service Workers are client-side only. These features will work when the page loads in the browser.

🔔 Push Notifications

💾 Cache Storage

No caches found

🌐 Network Demo

Common Caching Strategies:

Cache First: Serve from cache, fallback to network
Network First: Try network, fallback to cache
Stale While Revalidate: Serve cache, update in background
Cache Only: Only serve from cache
Network Only: Only serve from network

📝 Code Example

JavaScript Editor

// Register Service Worker
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js', {
    scope: '/'
  }).then(registration => {
    console.log('SW registered:', registration);
  });
}

// --- Service Worker (sw.js) ---

// Install event
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('v1').then(cache => {
      return cache.addAll([
        '/',
        '/index.html',
        '/styles.css',
        '/app.js'
      ]);
    })
  );
});

// Activate event
self.addEventListener('activate', event => {
  console.log('Service Worker activated');
});

// Fetch event (cache-first strategy)
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    })
  );
});

// Push event
self.addEventListener('push', event => {
  const title = 'Push Notification';
  const options = {
    body: event.data.text(),
    icon: '/icon.png',
    badge: '/badge.png'
  };
  
  event.waitUntil(
    self.registration.showNotification(title, options)
  );
});

// Background Sync
self.addEventListener('sync', event => {
  if (event.tag === 'sync-data') {
    event.waitUntil(syncData());
  }
});

async function syncData() {
  // Sync data with server
}

Service Worker Lifecycle

Download: Browser downloads the service worker file
Install: Installation event triggers, perfect for caching
Activate: Activation event triggers, old caches cleaned up
Idle: Service worker is idle, waiting for events
Fetch/Message/Push: Handles network requests and events
Terminate: Service worker is terminated when not needed

← Web Workers Intersection Observer →

Frontend

JavaScript & Frameworks

Backend

Artificial Intelligence

Database

CSS Frameworks

Data Analytics

Digital Marketing

Frontend

Backend

Artificial Intelligence

DevOps

Database

Cyber Security

JavaScript Tutorial

Service Workers

⚙️ Service Worker Status

🔔 Push Notifications

💾 Cache Storage

🌐 Network Demo

📝 Code Example

Service Worker Lifecycle

Follow Us

Our Tools

Our Company

Special Tools