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.

Matching moments

PWA fundamentals for installation and offline support
06:03 MIN

PWA fundamentals for installation and offline support

Making of paint.js.org—a Web Component-based Productivity PWA

How progressive web apps enhance the web platform
06:20 MIN

How progressive web apps enhance the web platform

Project Fugu: Extending the web

What are Progressive Web Apps (PWAs)?
01:23 MIN

What are Progressive Web Apps (PWAs)?

Progressive Web Apps - The next big thing

Using Progressive Web Apps for offline capabilities
05:33 MIN

Using Progressive Web Apps for offline capabilities

Challenges for omnichannel applications at ALDI: Data distribution and offline capabilities

Understanding the core principles of PWAs
01:15 MIN

Understanding the core principles of PWAs

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

Understanding the web's evolution into an app platform
12:30 MIN

Understanding the web's evolution into an app platform

Native Web Apps: Are We There Yet?

Using service workers to enhance multi-page apps
01:38 MIN

Using service workers to enhance multi-page apps

The Lean Web

Summary and real-world examples of advanced PWAs
04:25 MIN

Summary and real-world examples of advanced PWAs

Making of paint.js.org—a Web Component-based Productivity PWA

Featured Partners

Related Videos

See all videos
Progressive Web Apps - The next big thing
40:01

Progressive Web Apps - The next big thing

Nico Martin

PWAs in 2021
41:49

PWAs in 2021

Ire Aderinokun

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

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

Laura Morinigo

Project Fugu: Progressive Web Apps, Superpowered
45: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

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

Catching up on the basics you don't really need that much code

Chris Heilmann

The State Of The Web
43:11

The State Of The Web

Jeremy Keith

Web development: where are we, and where are we going?
32:56

Web development: where are we, and where are we going?

Laurie Voss

Related Articles

View all articles
Chris Heilmann
All the videos of Halfstack London 2024!
Last month was Halfstack London, a conference about the web, JavaScript and half a dozen other things. We were there to deliver a talk, but also to record all the sessions and we're happy to share them with you. It took a bit as we had to wait for th...
All the videos of Halfstack London 2024!
Benedikt Bischof
Native Web Apps: Are We There Yet?
Welcome to this issue of the WeAreDevelopers Live Talk series. This article recaps an interesting talk by Maxim Salnikov who spoke about the development of native web apps. What you will learn:Some pros and cons of web applicationsThe most important ...
Native Web Apps: Are We There Yet?
Luis Minvielle
10 Developer Websites in 2023
As a web developer, you're always investigating how to level up your skills and streamline your workflow. That's why we've gathered a collection of 10 innovative tools that are guaranteed to boost your productivity, enhance your coding abilities, ele...
10 Developer Websites in 2023

From learning to earning

Jobs that call for the skills explored in this talk.