Progressive Enhancements

What is Progressive Enhancement?

Progressive enhancement is a strategy for web design that emphasizes core web content first, then layers on more advanced features for browsers that support them. PWAs are the epitome of progressive enhancement.

Feature Detection

Always check for feature support before using advanced APIs:

// Feature detection helper
function supports(feature) {
  switch (feature) {
    case 'service-worker':
      return 'serviceWorker' in navigator;
    case 'cache':
      return 'caches' in window;
    case 'indexeddb':
      return 'indexedDB' in window;
    case 'webgl':
      return !!window.WebGLRenderingContext;
    case 'webp':
      const elem = document.createElement('canvas');
      return elem.toDataURL('image/webp').indexOf('data:image/webp') === 0;
    case 'web-share':
      return navigator.share !== undefined;
    case 'clipboard':
      return navigator.clipboard !== undefined;
    case 'badging':
      return navigator.setAppBadge !== undefined;
    default:
      return false;
  }
}

// Usage
if (supports('web-share')) {
  shareButton.style.display = 'block';
}

Graceful Degradation

While progressive enhancement starts with the basics and adds features, graceful degradation starts with the full experience and scales back when features are missing.

// Graceful degradation example for push notifications
async function sendNotification(message) {
  if (!('Notification' in window)) {
    // Browser doesn't support notifications at all
    showInlineAlert(message);
    return;
  }

  if (Notification.permission === 'granted') {
    new Notification(message);
    return;
  }

  if (Notification.permission === 'default') {
    const permission = await Notification.requestPermission();
    if (permission === 'granted') {
      new Notification(message);
    } else {
      showInlineAlert(message);
    }
    return;
  }

  // Permission denied
  showInlineAlert(message);
}

Enhancement Layers

Think of PWA features in layers:

Testing Enhancement Layers

Always test your PWA at each enhancement layer:

• Disable JavaScript — does the core content still render?
• Disable CSS — is the content still readable?
• Go offline — does the PWA still function?
• Use an older browser — do basic features work?
• Use a screen reader — is the app accessible?