Implementing Progressive Web Apps with Offline Support and Push Notifications

Progressive Web Apps (PWAs) combine the best of web and mobile apps to deliver fast, reliable, and engaging experiences. In this post, we’ll walk through how to add offline support via service workers and integrate push notifications to re-engage users. Whether you’re just getting started or looking for practical tips from real-world debugging, you’ll find takeaways to level up your next PWA project.

1. Getting Started with Service Workers

Service workers are the backbone of offline capabilities. They act as a network proxy between your web app and the internet, intercepting requests and deciding whether to serve cached assets or fetch fresh resources.

1.1 Registering the Service Worker

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(reg => console.log('Service Worker registered', reg))
      .catch(err => console.error('SW registration failed:', err));
  });
}

Key tips:

• Place sw.js at your server root so it controls all pages.
• Use HTTPS (or localhost for development).
• Log registration events to catch failures early.

1.2 Writing a Simple Service Worker

const CACHE_NAME = 'pwa-v1';
const ASSETS_TO_CACHE = [
  '/',
  '/index.html',
  '/styles.css',
  '/app.js',
  '/images/logo.png'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(ASSETS_TO_CACHE))
  );
  self.skipWaiting();
});

self.addEventListener('activate', event => {
  // Clean up old caches
  event.waitUntil(
    caches.keys().then(keys => 
      Promise.all(keys
        .filter(key => key !== CACHE_NAME)
        .map(key => caches.delete(key))
      )
    )
  );
  self.clients.claim();
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(cached => cached || fetch(event.request))
  );
});

This “Cache First” approach ensures quick loads after the initial visit. You’ll often refine this with “Network First” for API calls (see next section).

2. Offline Caching Strategies

Depending on your app, you’ll choose different caching patterns:

• Cache First – great for assets like scripts, styles, and images.
• Network First – preferred for dynamic data (APIs), fallback to cache on failure.
• Stale-While-Revalidate – serve cache immediately, then update in background.

2.1 Implementing Network First

self.addEventListener('fetch', event => {
  if (event.request.url.includes('/api/')) {
    event.respondWith(
      fetch(event.request)
        .then(response => {
          // Clone & store in cache
          const resClone = response.clone();
          caches.open(CACHE_NAME).then(cache => cache.put(event.request, resClone));
          return response;
        })
        .catch(() => caches.match(event.request))
    );
  }
});

Debugging tip: Use DevTools’ Application > Service Workers panel. You can “Update on reload”, inspect caches, and view logs.

3. Enabling Push Notifications

Push notifications bring users back. We’ll use the Push API and a typical Web Push server (Node.js example).

3.1 Requesting Permission

async function askPermission() {
  const perm = await Notification.requestPermission();
  if (perm !== 'granted') {
    throw new Error('Permission not granted');
  }
}

3.2 Subscribing to Push Service

async function subscribeUser() {
  const registration = await navigator.serviceWorker.ready;
  const subscription = await registration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: urlBase64ToUint8Array('')
  });
  // Send subscription to your server
  await fetch('/subscribe', {
    method: 'POST',
    body: JSON.stringify(subscription),
    headers: { 'Content-Type': 'application/json' }
  });
}

Helper for converting VAPID key:

function urlBase64ToUint8Array(base64String) {
  const padding = '='.repeat((4 - base64String.length % 4) % 4);
  const base64 = (base64String + padding)
    .replace(/-/g, '+')
    .replace(/_/g, '/');
  const rawData = window.atob(base64);
  return Uint8Array.from([...rawData].map(char => char.charCodeAt(0)));
}

3.3 Handling Push Events

self.addEventListener('push', event => {
  const data = event.data.json();
  event.waitUntil(
    self.registration.showNotification(data.title, {
      body: data.body,
      icon: '/images/notification-icon.png'
    })
  );
});

4. Debugging and Common Pitfalls

• Cache Bloat: Version your caches and remove old entries during activate.
• SW Not Updating: Call self.skipWaiting() and clients.claim(), or manually unregister in DevTools.
• CORS Errors: Ensure static assets and API endpoints send proper CORS headers.
• Push Failures: Verify VAPID keys match between server and client. Check browser console for “Failed to subscribe”.

5. Real-World Insights

In a recent project, we noticed dramatic improvements in repeat visits when push reminders were tied to user actions (e.g., cart abandonment notice). Offline support cut bounce rates by 30% in low-network regions. Key takeaways:

• Test on real devices with flaky networks (use throttling in DevTools).
• Keep payloads small—both for push notifications and cached assets.
• Monitor service worker lifecycle events and log them to understand when updates occur.
• Use libraries like Workbox when your caching logic grows complex.

6. Conclusion and Takeaways

Progressive Web Apps unlock powerful capabilities: offline availability, fast loads, and push notifications for re-engagement. By following best practices for service worker registration, caching strategies, and push integration, you’ll build resilient apps that delight users.

Key takeaways:

1. Register and version your service worker thoughtfully.
2. Choose caching strategies per resource type.
3. Handle permission flows and VAPID keys carefully for push.
4. Use DevTools extensively to debug service worker and push events.

Now it’s your turn: try adding offline support to your next web app and send a friendly push notification to welcome users back!