Rowdy Rabouw

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.

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 thing40:01

Progressive Web Apps - The next big thing

Nico Martin

PWAs in 202141:49

PWAs in 2021

Ire Aderinokun

Is your Progressive Web App Lazy? How to read and improve your PWA Performance29:57

Is your Progressive Web App Lazy? How to read and improve your PWA Performance

Laura Morinigo

Project Fugu: Progressive Web Apps, Superpowered45:20

Project Fugu: Progressive Web Apps, Superpowered

Christian Liebel

Native Web Apps: Are We There Yet?44:40

Native Web Apps: Are We There Yet?

Maxim Salnikov

Unleash your web skills on native!52:01

Unleash your web skills on native!

Rowdy Rabouw

Catching up on the basics you don't really need that much code14:44

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 PWA44:22

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.

Web Developer

Frontend Revolution

Intermediate
CSS
HTML
React
JavaScript