PWA Fundamentals: websites with superpowers

What if your website could work offline and install like a native app? Learn the fundamental APIs that give websites superpowers.

#1about 4 minutes

Understanding the core principles of Progressive Web Apps

PWAs are reliable, fast, and engaging websites that offer an app-like experience with features like offline support and installability.

#2about 4 minutes

Configuring your PWA with a web app manifest

The manifest.json file informs the browser about your application, enabling features like a custom home screen icon and splash screen.

#3about 7 minutes

Prompting users to install your PWA

Use the `beforeinstallprompt` event to create a custom, user-friendly installation button instead of relying on the default browser banner.

#4about 5 minutes

Getting started with service workers and the Cache API

Register a service worker and use its install event to pre-cache essential application assets with the Cache API for offline access.

#5about 4 minutes

Using the Fetch API for a cache-first strategy

Intercept network requests using the service worker's fetch event to serve assets from the cache first, improving load times and enabling offline use.

#6about 4 minutes

Caching dynamic assets and creating an offline page

Store new assets in a dynamic cache as they are requested and provide a custom offline fallback page when a resource is unavailable.

#7about 3 minutes

Improving perceived speed with an application shell

Use an application shell with placeholder UI elements to give users an immediate visual response while dynamic content loads in the background.

#8about 5 minutes

Managing API data with IndexedDB for offline use

Use IndexedDB, a browser-based database, to efficiently store and retrieve structured data like JSON from API responses for robust offline functionality.

#9about 2 minutes