Best practices

PWA excellence checklist

Best practices include: HTTPS always, responsive design, fast load times (under 3s), clear install prompts, proper error handling, accessibility, and comprehensive testing.

Progressive enhancement patterns

Build with progressive enhancement: core functionality works without JavaScript.

<!-- Fallback for no JS -->
<noscript>This app requires JavaScript. Please enable it.</noscript>

<!-- Base functionality with forms -->
<form method="POST" action="/api/save">
  <input type="text" name="task" required>
  <button type="submit">Save</button>
</form>

<!-- Enhanced with JS/PWA -->
<script>
  document.querySelector('form').addEventListener('submit', async e => {
    e.preventDefault();
    // Use PWA features: offline sync, IndexedDB, etc.
  });
</script>

Output:

App works without JavaScript and enhanced with PWA features when available.

A common trap

Never assume PWA features are available. Always check with feature detection (if ('serviceWorker' in navigator)) before using them.