Rowdy Rabouw
PWA Fundamentals: websites with 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
Notifying users about available PWA updates
Implement a non-disruptive update flow by showing a notification when a new service worker is installed, allowing the user to activate it.
#10about 4 minutes
Simplifying PWA development with Workbox and Q&A
Workbox is a set of libraries that simplifies common PWA patterns, followed by a Q&A session on PWA adoption and development practices.
Related jobs
Jobs that call for the skills explored in this talk.
Featured Partners
Related Videos
Progressive Web Apps - The next big thing
Nico Martin
PWAs in 2021
Ire Aderinokun
Is your Progressive Web App Lazy? How to read and improve your PWA Performance
Laura Morinigo
Project Fugu: Progressive Web Apps, Superpowered
Christian Liebel
Native Web Apps: Are We There Yet?
Maxim Salnikov
Unleash your web skills on native!
Rowdy Rabouw
Catching up on the basics you don't really need that much code
Chris Heilmann
Making of paint.js.org—a Web Component-based Productivity PWA
Christian Liebel
From learning to earning
Jobs that call for the skills explored in this talk.
![Senior Software Engineer [TypeScript] (Prisma Postgres)](https://wearedevelopers.imgix.net/company/283ba9dbbab3649de02b9b49e6284fd9/cover/oKWz2s90Z218LE8pFthP.png?w=400&ar=3.55&fit=crop&crop=entropy&auto=compress,format)

Senior Software Engineer [TypeScript] (Prisma Postgres)
Prisma
Remote
Senior
Node.js
TypeScript
PostgreSQL
Desarrollador/a Web Interactivo (Next.js / Supabase / PWA / API)
SIGGO
Barcelona, Spain
API
React
Next.js
PostgreSQL
Senior Web Applications Developer - JavaScript / React / HTML
Adaptive Financial Consulting
Municipality of Madrid, Spain
CSS
HTML
React
JavaScript
TypeScript
Senior Web Applications Developer - JavaScript/React/HTML
Adaptive Financial Consulting
Barcelona, Spain
CSS
HTML
React
JavaScript
TypeScript





