Overview

The 'App Shell' is the minimal HTML, CSS, and JavaScript required to power the user interface. In a PWA, this shell is cached offline using a Service Worker, allowing the application to load instantly on subsequent visits, even without a network connection.

How it Works

  1. Initial Load: The browser downloads the shell and the content.
  2. Caching: The Service Worker caches the shell assets.
  3. Subsequent Visits: The shell loads instantly from the cache, and dynamic content is fetched from the network or a data cache.

Benefits

  • Instant Loading: Perceived performance is significantly improved.
  • Offline Support: The UI is always available, even if the data isn't.
  • Consistency: Provides a reliable, app-like experience.

Related Terms