Progressive Web Apps (PWA) – The Complete Guide

About Course

Learn how to build Progressive Web Apps (PWAs) from scratch and add mobile-app-like experiences to your websites. This free Udemy course covers everything you need to know about PWAs, including:

Detailed explanation of PWAs
How to make your web app installable on device homescreens
Using service workers for offline support and caching strategies
Promises and the Fetch API
Adding push notifications for better user engagement
Synchronizing data in the background
Accessing native device features like the camera and geolocation
Using Workbox for easier service worker management
Turning your Single-Page Application (SPA) project into a PWA
And more

This course is taught by Max, a passionate web developer who focuses on core features and doesn’t assume any JavaScript framework. You’ll build a course project to put your knowledge into practice. This course is perfect for you if you are a web developer who wants to learn how to build modern web apps and take advantage of the latest technologies.

Learn how to build PWAs with this free course from Udemy. This course is part of Theetay’s collection of free online courses from top platforms like Udemy, Udacity, Coursera, MasterClass, NearPeer, and more.

Course Content

Getting Started

A Message from the Professor
About this Course

02:06
What are Progressive Web Apps

03:24
PWAs vs Native Mobile Apps

06:07
A Demo PWA & What We’ll Build in this Course

06:24
Our First Progressive Web App

06:27
PWA Core Building Blocks

03:19
Comparing PWAs and SPAs

03:17
What is Progressive Enhancement

03:23
Course Outline

04:24
Course Project Setup

06:10
How to get the Most out of this Course

02:11
Course Material Download Link

00:00

Understanding the App Manifest

Module Introduction

01:01
Using an App Manifest to Make your App Installable

01:36
Adding the Manifest

03:40
Understanding App Manifest Properties

09:43
Adding Properties to the App Manifest

09:44
PWAs and Browser Support

02:16
Using the Chrome Developer Tools

01:35
Simulating the Web App on an Emulator

04:36
Installing the Web App – Prerequisites

02:30
Adding Properties for Safari

05:50
Adding Properties for the Internet Explorer

02:30
Wrap Up

00:28

The Service Workers

Module Introduction

00:40
Why Service Workers Are Amazing!

04:40
Understanding Service Worker Events

06:18
The Service Worker Lifecycle

05:20
Service Worker Browser Support

01:24
Registering a Service Worker

09:26
Reacting to Incoming Events (in SW)

05:39
Updating & Activating Service Workers

03:00
Non-Lifecycle Events

04:49
Getting that App Install Banner

02:40
Testing the App on Real Device (and Installing the App!)

03:42
Deferring the App Install Banner

06:43
Wrap Up

01:20

Promise and Fetch

Module Introduction

00:49
Async Code in JavaScript

03:54
Promises – Basics

04:40
Rejecting Promises

04:05
Where we Use Promises in our Project

02:25
Fetch – Basics

06:11
Sending Post Requests via Fetch

04:22
Fetch and CORS

03:12
Comparing Fetch and Ajax

03:04
Adding Polyfills (for Legacy Browser Support)

03:29
Fetch & Service Workers

02:05
(OPTIONAL) Assignment Solution

08:03
Wrap Up

00:56

Service Workers – Caching

Module Introduction

00:43
Module Introduction

03:06
Understanding the Cache API

04:00
Browser Support

01:49
Adjusting the Course Project

02:53
Identifying (Pre-)Cacheable Items

03:07
Static Caching Precaching

11:04
Retrieving Items from the Cache

04:55
Adding & Retrieving Multiple Files (to from Cache)

03:05
Cache Multiple Files with addAll

09:10
Dynamic Caching – The Basics

01:54
Implementing Dynamic Caching

07:19
Handling Errors

02:13
Adding Cache Versioning

06:56
Different Cache Versions & Cleanup

06:37
Optimizing Cache Management

02:42
(OPTIONAL) Assignment Solution

21:51
Wrap Up

00:35

Service Workers – Advanced Caching

Module Introduction

01:12
Module Preparation Adding a Button

04:04
Offering Cache on Demand

06:51
Providing an Offline Fallback Page

06:21
Strategy Cache with Network Fallback

01:43
Strategy Cache Only

03:06
Strategy Network Only

01:57
Strategy Network with Cache Fallback

06:21
Strategy Cache then Network

09:04
Cache then Network & Dynamic Caching

05:11
Cache then Network with Offline Support

05:59
Cache Strategies & Routing

03:09
Applying Cache Only

05:45
(OPTIONAL) Assignment Solution

25:52
A Better Way Of Parsing Static Cache URLs

02:40
A Better Way Of Serving Fallback Files

02:57
Post Request and Cache API

03:18
Cleaning Trimming the Cache

06:06
Getting Rid of a Service Worker

03:49
Preparing the Project for the Next Steps

00:28
Wrap Up

00:57

IndexedDB and Dynamic Data

Module Introduction

01:01
Understanding the Basics

01:12
Setting Up Firebase

07:19
Connecting Frontend to Backend

08:31
Dynamic Caching vs. Caching Dynamic Content

04:51
Introducing IndexedDB

03:34
IndexedDB Browser Support

00:38
Adding the IDB File

02:31
Storing Fetched Posts in IndexedDB

13:11
Using IndexedDB in the Service Worker

03:56
Reading Data from IDB

06:40
Clearing IDB & Handling Server-Client Mismatch

03:40
Implementing the Clear Database Method

03:58
Deleting Single Items from the Database

04:05
IndexedDB and Caching Strategies

01:33
Wrap Up

00:45

Creating a Responsive User Interface (UI)

Background Sync

Module Introduction

01:04
How does Background Sync Work

03:33
Adding the Basic Setup to our Project

04:04
Registering a Synchronization Task

04:37
Storing our Post in IndexedDB

06:00
Adding a Fallback

04:12
Syncing Data in the Service Worker

15:52
Understanding Periodic Sync

02:16
Adding Server Side Code

15:11
Fixing Errors

05:20
Wrap Up

00:49

Web Push Notifications

Module Introduction

01:04
Why we need Web Push Notifications

01:56
How Push & Notifications Work

09:04
Displaying Notifications – Some Theory First

01:52
Browser Support

02:02
Requesting Permissions

08:07
Displaying Notifications

03:38
Notifications from Within the Service Worker

03:33
Understanding Notifications’ Options

08:49
Advanced Options

02:58
Adding Actions to Notifications

02:23
Reacting to Notification Interaction – Clicks

05:21
Reacting to Notification Interaction – Closing

02:36
From Notifications to Push Messages

06:36
Creating a Push Subscription

04:32
Storing Subscriptions

10:50
Connecting Server & Client (PWA)

01:45
Sending Push Messages from the Server

09:55
Listening to Push Messages

07:39
Displaying Push Notifications on a Real Device

02:03
Opening a Page upon User Interaction

05:45
Improving our Code

04:28
Wrap Up

01:16

Native Device Features

Module Introduction

00:55
Preparing the Project

07:28
Getting DOM Access

04:35
Creating our own Polyfills

08:04
Getting the Video Image

07:25
Hooking Up the Capture Button

06:24
Storing the Image on a Server

08:40
Accepting File Upload Example with Firebase

14:36
Testing the Camera & Upload

04:51
Implementing a Fallback

02:30
Getting the User Position

16:38
Fixing Bugs

08:46
Testing the App on a Real Device

01:43
Wrap Up

00:47

Service Worker Management with Workbox

Module Introduction

01:01
Understanding the Basics

00:55
Installing Workbox & Using It

06:56
Configuring Workbox Precaching

05:02
Customizing the Service Worker

04:45
Implementing Routing with the Workbox Router

06:41
Expanding Dynamic Caching

03:31
Options and Setting Up Strategies

06:09
Custom Handlers (Example For IndexedDB)

03:45
Providing an Offline HTML Fallback

06:47
Handling Background Synchronisation and Push Notifications

03:26
Understanding the Workbox Documentation

05:17
Enhancing the Build Workflow

06:30
Running our App on a Real Server

03:56
Auditing our Webpage with Lighthouse

04:24
Wrap Up

01:11

SPAs and PWAs

Course Roundup

Add this certificate to your resume to demonstrate your skills & increase your chances of getting noticed.

Student Ratings & Reviews

No Review Yet

About Course

What Will You Learn?

Course Content

Getting Started

A Message from the Professor

About this Course

What are Progressive Web Apps

PWAs vs Native Mobile Apps

A Demo PWA & What We’ll Build in this Course

Our First Progressive Web App

PWA Core Building Blocks

Comparing PWAs and SPAs

What is Progressive Enhancement

Course Outline

Course Project Setup

How to get the Most out of this Course

Course Material Download Link

Understanding the App Manifest

Module Introduction

Using an App Manifest to Make your App Installable

Adding the Manifest

Understanding App Manifest Properties

Adding Properties to the App Manifest

PWAs and Browser Support

Using the Chrome Developer Tools

Simulating the Web App on an Emulator

Installing the Web App – Prerequisites

Adding Properties for Safari

Adding Properties for the Internet Explorer

Wrap Up

The Service Workers

Module Introduction

Why Service Workers Are Amazing!

Understanding Service Worker Events

The Service Worker Lifecycle

Service Worker Browser Support

Registering a Service Worker

Reacting to Incoming Events (in SW)

Updating & Activating Service Workers

Non-Lifecycle Events

Getting that App Install Banner

Testing the App on Real Device (and Installing the App!)

Deferring the App Install Banner

Wrap Up

Promise and Fetch

Module Introduction

Async Code in JavaScript

Promises – Basics

Rejecting Promises

Where we Use Promises in our Project

Fetch – Basics

Sending Post Requests via Fetch

Fetch and CORS

Comparing Fetch and Ajax

Adding Polyfills (for Legacy Browser Support)

Fetch & Service Workers

(OPTIONAL) Assignment Solution

Wrap Up

Service Workers – Caching

Module Introduction

Module Introduction

Understanding the Cache API

Browser Support

Adjusting the Course Project

Identifying (Pre-)Cacheable Items

Static Caching Precaching

Retrieving Items from the Cache

Adding & Retrieving Multiple Files (to from Cache)

Cache Multiple Files with addAll

Dynamic Caching – The Basics

Implementing Dynamic Caching

Handling Errors

Adding Cache Versioning

Different Cache Versions & Cleanup

Optimizing Cache Management

(OPTIONAL) Assignment Solution

Wrap Up

Service Workers – Advanced Caching

Module Introduction

Module Preparation Adding a Button