> Markdown version of [/videos/45-progressive-web-apps-the-next-big-thing](https://www.wearedevelopers.com/videos/45-progressive-web-apps-the-next-big-thing). 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).

---

# Progressive Web Apps - The next big thing

Crisis communications demand immediate deployment. See how developers built a 100kb offline-first PWA for the Moria refugee camp. Bypass App Store delays and ship vital features in hours.

- **Speakers:** Nico Martin
- **Event:** WeAreDevelopers LIVE
- **Published:** October 12, 2020
- **Duration:** 40:01
- **URL:** https://www.wearedevelopers.com/videos/45-progressive-web-apps-the-next-big-thing

## Summary

While the open web offers a universally accessible and standardized platform, native mobile applications have historically monopolized mobile time because they are inherently fast, deeply integrated, and offline-capable. Progressive Web Apps (PWAs) represent the next evolution in digital product development, bridging this gap by bringing native-like reliability and engagement directly to the browser. By leveraging the Web App Manifest, developers can configure standalone display modes that remove URL bars and enable direct-to-home-screen installations. Furthermore, initiatives like Project Fugu are introducing cross-organization APIs—such as the Web Share and Media Session APIs—that seamlessly blur the line between a traditional website and OS-level functionality.

At the core of an offline-first PWA architecture is the decision to "treat network connectivity as a progressive enhancement." Rather than rendering failure screens on dropped connections, developers utilize client-side web storage and proxy layers. IndexedDB, often streamlined via the `idb` wrapper, operates as a local database for dynamic API payloads, while Service Workers act as persistent network proxies to strategically cache static application shells. Abstracting complex Service Worker lifecycle and fetch events is made significantly easier with Workbox.js. Additionally, PWAs can drive re-engagement using Web Push notifications secured by VAPID (Voluntary Application Server Identification). When implementing push messages, engineering teams must prioritize UX by providing explicit contextual value before triggering intrusive browser permission prompts.

The tangible deployment velocity of PWAs is exceptionally valuable in high-stakes, rapid-iteration environments. In a case study detailing a crisis communication system for the Moria refugee camp, developers selected a PWA stack (Node.js, TypeScript, MongoDB, and Preact) to strictly bypass App Store deployment delays. This light architecture yielded a 100kb app payload that eliminated installation friction, gracefully managed offline states, and permitted crucial feature updates within hours instead of weeks. While the necessary engine capabilities are robustly supported across Android, Chrome, and Firefox, the PWA ecosystem's ultimate success continues to be bottlenecked by Apple’s Safari due to missing feature parity and strict iOS WebKit constraints.

**Keywords:** progressive web apps, service worker caching, web app manifest, project fugu apis, offline-first architecture, indexeddb storage, workbox.js strategies, web push notifications, vapid authentication, persistent storage api, cross-platform web deployment, network proxying, ios webkit restrictions, lightweight frontend architectures, preact web development

## Chapters

1. **Web platform advancements and shared technological ecosystems** (00:00) — The open web serves as an essential global infrastructure built on shared standard languages.
1. **Evolution of native mobile applications and vendor constraints** (02:31) — Relying on native mobile SDKs introduces vendor dependencies and complicates cross-platform maintainability.
1. **Defining progressive web apps and their core advantages** (04:37) — Progressive web apps merge native app performance with open web accessibility through reliability and integration.
1. **Configuring web app manifests for integrated system experiences** (05:53) — Using a web manifest transforms a standard website into an installable desktop or mobile application.
1. **Architecting web applications for seamless offline availability** (09:15) — Treating network connectivity as a progressive enhancement relies on distinct storage systems for static and dynamic data.
1. **Managing dynamic application data effectively using IndexedDB** (11:24) — A promise-based wrapper simplifies non-relational browser database interactions for asynchronous local data retrieval.
1. **Caching static assets with the service worker lifecycle** (13:59) — A localized proxy script running independently from the UI thread overrides fetch requests to serve cached static files.
1. **Streamlining service worker caching strategies using Workbox** (21:27) — An abstraction framework simplifies complex fetch event configurations and repetitive caching logic.
1. **Ensuring long-term data retention with persistent storage APIs** (22:19) — Activating protected browser storage prevents targeted offline assets and cached interactions from being unexpectedly cleared.
1. **Delivering timely push notifications via application server configurations** (24:07) — Securely routing background alerts relies on browser push services, VAPID authentication, and seamless user permission prompts.
1. **Deploying a progressive web app during crisis response** (31:23) — A lightweight progressive web application facilitates critical offline communication within a constrained refugee camp environment.
1. **Evaluating cross-browser support and persistent platform limitations** (37:11) — Inconsistent iOS WebKit functionality restricts complete cross-platform parity for web installability and native push features.

## 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")
- [Core capabilities of progressive web applications](https://www.wearedevelopers.com/videos/832-project-fugu-extending-the-web) (from "Project Fugu: Extending the web")
- [Bridging the gap between native and web apps](https://www.wearedevelopers.com/videos/289-pwas-in-2021) (from "PWAs in 2021")
- [Evaluating progressive web apps for mobile deployment](https://www.wearedevelopers.com/videos/170-intro-to-flutter-development) (from "Intro to Flutter Development")
- [The historical struggles of building persistent progressive web apps](https://www.wearedevelopers.com/videos/1730-wearedevelopers-live-accessibility-isn-t-magic-longevity-devrel-in-times-of-ai-and-more) (from "WeAreDevelopers LIVE - Accessibility isn't magic, Longevity, Devrel in times of AI and more")
- [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")

## Related Articles

- [Native Web Apps: Are We There Yet?](https://www.wearedevelopers.com/magazine/83-native-web-apps-are-we-there-yet)
- [Apple iOS vs. Web Apps affects us all - help the OWA to ensure you can release apps for everyone](https://www.wearedevelopers.com/magazine/389-apple-ios-vs-web-apps-affects-us-all-help-the-owa-to-ensure-you-can-release-apps-for-everyone)
- [Web Development Best Practices: What The Data Tells us](https://www.wearedevelopers.com/magazine/84-web-development-best-practices-what-the-data-tells-us)
- [Dev Digest 139 - Soft and hard queries](https://www.wearedevelopers.com/magazine/487-dev-digest-139-soft-and-hard-queries)

## Related Jobs

- [Staff Frontend Engineer](https://www.wearedevelopers.com/jobs/48313-staff-frontend-engineer) at **SMG Swiss Marketplace Group**
- [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 (Expert+/Lead equivalent) - Hybrid working model, 100%, Ho Chi Minh City](https://www.wearedevelopers.com/jobs/48314-staff-frontend-engineer-expert-lead-equivalent-hybrid-working-model-100-ho-chi-minh-city) 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**