PWA Foundations

Core Concepts

Understanding these foundational concepts is essential for building effective PWAs:

The App Shell Model

App Shell architecture separates the core application shell (UI infrastructure) from the dynamic content. The shell is cached on first load and instantly renders on subsequent visits.

<!-- app-shell.html -->
<!DOCTYPE html>
<html>
<head>
  <!-- Shell resources -->
  <link rel="stylesheet" href="/css/app-shell.css">
  <link rel="stylesheet" href="/css/content.css">
</head>
<body>
  <header>
    <nav id="main-nav">...</nav>
  </header>

  <main id="content">
    <!-- Dynamic content loads here -->
  </main>

  <footer>...</footer>

  <script src="/js/app-shell.js"></script>
  <script src="/js/content.js"></script>
</body>
</html>

HTTPS Requirement

Service Workers require secure contexts. This means your PWA must be served over HTTPS. HTTPS ensures the integrity of the Service Worker and prevents man-in-the-middle attacks.

Exception: Localhost is treated as a secure context for development purposes.

PWA Ecosystem

Service Workers: Background scripts that enable offline functionality.
Cache API: A storage system for Request/Response pairs.
IndexedDB: Client-side NoSQL database for structured data.
Web App Manifest: JSON metadata for installable web apps.
Push API: Server-to-client push notifications.
Background Sync: Defer actions until connectivity is available.

Best Practices

Always use HTTPS
Implement responsive design
Provide a 404 offline page
Use semantic HTML and ARIA for accessibility
Optimize images and assets
Test on real devices
Ensure backward compatibility
Use a privacy-friendly approach

Exercise: Audit your current website (or a simple HTML page) using Lighthouse in Chrome DevTools. Check the PWA section and identify which criteria it passes and fails. Document your findings.