> Markdown version of [/videos/212-pwa-fundamentals-websites-with-superpowers?t=0](https://www.wearedevelopers.com/videos/212-pwa-fundamentals-websites-with-superpowers?t=0). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# PWA Fundamentals: websites with superpowers

Give your traditional websites native-like superpowers. Master PWA fundamentals from service workers to advanced offline caching. Seamlessly bridge the gap between web and native applications.

- **Speakers:** [Rowdy Rabouw](https://www.wearedevelopers.com/@rowdy-rabouw)
- **Event:** World Congress 2021
- **Published:** June 30, 2021
- **Duration:** 43:06
- **URL:** https://www.wearedevelopers.com/videos/212-pwa-fundamentals-websites-with-superpowers

## Summary

Progressive Web Apps (PWAs) empower traditional websites with native-like capabilities, offering reliability, speed, and offline functionality. This presentation breaks down the core fundamentals of building a PWA from scratch, starting with the `manifest.json` file which defines the app's installation parameters, such as branding, icons, and standalone display modes. By leveraging the `beforeinstallprompt` event, developers can craft custom "Add to Home Screen" experiences instead of relying on default browser dialogs, seamlessly bridging the gap between web and native applications.

At the heart of the PWA architecture is the service worker—a background script acting as a network proxy or "marvel in the middle" to intercept requests. Through practical code examples, the video demonstrates how to implement static and dynamic caching strategies using the Cache API, ensuring assets load instantly and custom offline pages display when connectivity drops. Additionally, the presentation explores the Application Shell model to improve perceived performance by rendering structural UI placeholders while fetching dynamic data in the background.

For managing dynamic API responses, the session introduces IndexedDB as a superior alternative to basic caching, explaining how to synchronize network fetches with local storage for seamless updates. The narrative wraps up by showing how to gracefully prompt users to update to a new service worker version and highlights Google's Workbox library as a robust solution for simplifying complex caching logic. These methodologies enable engineers to deliver fast, engaging, and highly resilient web experiences across diverse network conditions.

**Keywords:** progressive web app fundamentals, web app manifest configuration, add to home screen prompts, beforeinstallprompt event handling, service worker interceptors, javascript cache api, static and dynamic caching, offline web applications, offline html fallbacks, application shell architecture, indexeddb api storage, service worker lifecycle, skipwaiting update patterns, google workbox library, perceived load performance

## Chapters

1. **Key features and characteristics of progressive web apps** (00:00) — Progressive web applications combine modern browser features to ensure reliable, fast, and engaging user experiences.
1. **Configuring the manifest file and generating application icons** (05:30) — The JSON manifest defines the metadata and display constraints for the installed application environment.
1. **Implementing the add to home screen installation feature** (09:49) — The beforeinstallprompt event intercepts the default installation dialog to offer a customized local install flow.
1. **Registering background service workers for network request interception** (16:29) — Service workers operate on a background thread to intercept requests dynamically without blocking the main application flow.
1. **Implementing static caching for offline web application support** (19:21) — The Cache API securely stores core site assets locally to bypass subsequent network requests and improve load times.
1. **Adding dynamic caching strategies for variable network responses** (24:46) — Uncached responses are intercepted during the fetch operation and dynamically stored for future immediate access.
1. **Serving custom offline fallbacks during network connection failures** (26:51) — A dedicated fallback HTML page gracefully handles comprehensive application disconnection scenarios when resources remain uncached.
1. **Building an application shell to improve perceived loading performance** (28:58) — Serving structural layout elements prior to data resolution creates a continuous and visually responsive startup experience.
1. **Caching dynamic JSON payload responses using the IndexedDB database** (32:08) — A client-side IndexedDB implementation successfully mitigates caching limits by storing structured API payloads reliably.
1. **Prompting users to manually update service worker versions** (37:03) — Tracking service worker states enables custom notification prompts that cleanly trigger local cache updates.
1. **Simplifying service worker caching strategies with the Workbox library** (39:03) — Pre-configured Workbox libraries replace verbose custom code with straightforward declarative caching functions.
1. **Answering audience questions on application testing and browser adoption** (39:42) — Discussions around bypass mechanisms for local SSL constraints and comparing progressive features against native capabilities.

## Related Moments

- [Introduction to progressive web apps](https://www.wearedevelopers.com/videos/453-is-your-progressive-web-app-lazy-how-to-read-and-improve-your-pwa-performance) (from "Is your Progressive Web App Lazy? How to read and improve your PWA Performance")
- [Enabling offline capabilities and application installation via service workers](https://www.wearedevelopers.com/videos/438-making-of-paint-js-org-a-web-component-based-productivity-pwa) (from "Making of paint.js.org—a Web Component-based Productivity PWA")
- [Core capabilities of progressive web applications](https://www.wearedevelopers.com/videos/832-project-fugu-extending-the-web) (from "Project Fugu: Extending the web")
- [PWA adoption models and bridging native capabilities](https://www.wearedevelopers.com/videos/293-native-web-apps-are-we-there-yet) (from "Native Web Apps: Are We There Yet?")
- [Questions on styling extensions and progressive web app potential](https://www.wearedevelopers.com/videos/766-from-zero-to-hero-nextjs-13-and-tailwind-css-for-beginners) (from "From Zero to Hero: NextJS 13 and Tailwind CSS for Beginners")
- [Mandatory technical requirements for PWAs](https://www.wearedevelopers.com/videos/453-is-your-progressive-web-app-lazy-how-to-read-and-improve-your-pwa-performance) (from "Is your Progressive Web App Lazy? How to read and improve your PWA Performance")

## Related Articles

- [Native Web Apps: Are We There Yet?](https://www.wearedevelopers.com/magazine/83-native-web-apps-are-we-there-yet)
- [Dev Digest 139 - Soft and hard queries](https://www.wearedevelopers.com/magazine/487-dev-digest-139-soft-and-hard-queries)
- [Dev Digest 133 - Back to Front](https://www.wearedevelopers.com/magazine/474-dev-digest-133-back-to-front)
- [Why Presentations Should Always Work Offline—Even at Online Conferences](https://www.wearedevelopers.com/magazine/602-why-presentations-should-always-work-offline-even-at-online-conferences)

## Related Jobs

- [Software Engineer](https://www.wearedevelopers.com/jobs/ext/1377585-software-engineer) at **Bitpanda**
- [Senior Software Engineer, React (Websites & Martech)](https://www.wearedevelopers.com/jobs/ext/1605272-senior-software-engineer-react-websites-martech) at **Bitpanda**
- [Software Engineer](https://www.wearedevelopers.com/jobs/ext/1304673-software-engineer) at **Bitpanda**
- [Staff Frontend Engineer](https://www.wearedevelopers.com/jobs/48313-staff-frontend-engineer) at **SMG Swiss Marketplace Group**
- [Senior Software Engineer, React (Investing & Trading)](https://www.wearedevelopers.com/jobs/ext/1937625-senior-software-engineer-react-investing-trading) at **Bitpanda**
- [Software Engineer, React & Angular (Broker Web Platform](https://www.wearedevelopers.com/jobs/ext/1558399-software-engineer-react-angular-broker-web-platform) at **Bitpanda**