Progressive Web Apps (PWA) - The Complete Guide
4.7 (5,016 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
28,795 students enrolled

Progressive Web Apps (PWA) - The Complete Guide

Build a Progressive Web App (PWA) that feels like an iOS & Android App, using Device Camera, Push Notifications and more
4.7 (5,016 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
28,795 students enrolled
Last updated 3/2019
English, Indonesian [Auto-generated]
Current price: $11.99 Original price: $149.99 Discount: 92% off
30-Day Money-Back Guarantee
This course includes
  • 15 hours on-demand video
  • 22 articles
  • 155 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Assignments
  • Certificate of Completion
Training 5 or more people?

Get your team access to Udemy's top 3,000+ courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Build web apps that look and feel like native mobile apps for iOS and Android
  • Use service workers to build web apps that work without internet connection (offline-first)

  • Leverage device features like the camera and geolocation in your web apps

  • Use web push notifications to increase user engagement with your web apps
Course content
Expand all 202 lectures 14:56:14
+ Getting Started
11 lectures 47:12

Let's start with the most important question first: What are progressive web apps? This lecture takes a closer look!

Preview 03:24

Why would you build a progressive web app if you can just build a native mobile app? There are many reasons, let's dive into the important ones in this lecture.

Preview 06:07

Time to see a progressive web app in action! In this lecture, we'll have a look at a real PWA and at the final course project.

Preview 06:24

Now that we saw a finished progressive web app, let's build our own one. At least a very simple one!

Preview 06:27

You already learned quite a bit about progressive web apps but you also heard a lot of buzzwords. Let me summarize which core building blocks make up a progressive web app in this lecture.

Preview 03:19

Sometimes, PWAs and SPAs get mixed up. What is the difference? In this lecture, you'll learn how both concepts are related to each other - or how they are not.

Preview 03:17

What does the "progressive" in "progressive web app" actually mean? Let's explore this question and have a look at "progressive enhancement" in this lecture.

Preview 03:23

We had a look at a lot of the core concepts of PWAs, now it's time to also dive into the question what this course has to offer to you. Let's explore the course outline.

Preview 04:24

In this course, we're going to learn and apply everything directly on a course project. For that, we of course need one, so let's set it up!

Preview 06:10

My #1 goal is to make sure that YOU get the most out of this course. Let me share some tipps & tricks about how that works out.

Preview 02:11
+ Understanding the App Manifest
14 lectures 46:32

Let's get started with one of the core features: The App Manifest!

Module Introduction

Why is it interesting to use to have an installable app? What does that actually mean? Let's find out in this lecture.

Using an App Manifest to Make your App Installable

With the manifest set up, it's time to add it to our application and make sure it loads in our running app.

Adding the Manifest

Which properties may we actually configure in our web app manifest? This lecture takes a closer look.

Understanding App Manifest Properties

Now that we know which properties we may use, let's use them! In this lecture, we'll explore how to configure our web app manifest.

Adding Properties to the App Manifest

Which browser do support our web app manifest? That's of course an important question and one we'll dive into this lecture.

PWAs and Browser Support

When working with PWAs, you definitely want to make your life easier. We'll do this with the help of the Chrome developer tools. Let's dive into them in this lecture.

Using the Chrome Developer Tools

We're building an app which should behave great on mobile apps. We need a mobile device! Learn how to quickly set one up with the Android simulator in this lecture.

Simulating the Web App on an Emulator

We started a virtual device - this article explains all details about how to do that and dives into how you may prepare your virtual device for the rest of this course.

Preparing the Emulated Device for ALL PWA Features

The cool thing about the web app manifest is, that it allows us to install our application on a real device. Let's do that in this lecture!

Installing the Web App - Prerequisites

Are you a manifest.json expert? Do you know how a good manifest.json file looks like? Check your knowledge!

Understanding manifest.json
4 questions

The web manifest isn't understood by all browsers. We can help Safari as this lecture shows.

Adding Properties for Safari

Just as Safari needed some extra help, this lecture explains how you get your app to work correctly on Internet Explorer, too.

Adding Properties for the Internet Explorer

Let me wrap this module up and summarize what we learned.

Wrap Up

This lecture not only holds the source code of this module but also provides some useful links for you to dive deeper.

Useful Resources & Links
+ The Service Workers
17 lectures 57:43

Let's enter the realm of service workers and learn how to use them!

Module Introduction

Why do we need service workers to begin with? This lecture takes a closer look.

Why Service Workers Are Amazing!

Service Worker support various events - let's get an overview over the most important/ relevant ones.

Understanding Service Worker Events

Service Workers follow a certain lifecycle when we register them on a page. Learn more about that cycle in this lecture.

The Service Worker Lifecycle

Obviously, you need to know which Browser even support service workers before using them. This lecture explores browser support.

Service Worker Browser Support

You know the basics about service workers, but we haven't worked with any yet. Time to change that!

Registering a Service Worker

Let's start using our service worker and register some events. This will also lead us to some important point we have to discuss.

Reacting to Incoming Events (in SW)

What does "fetch" actually mean/ do? Let's dive into it and understand more about this key event listener in this lecture.

Updating & Activating Service Workers

Thus far, we had a look at the "install" and "activate" events. Let's now also dive into other events we can listen to - namely the "fetch" event.

Non-Lifecycle Events

Don't miss this lecture!

The App Install Banner & Chrome 68+

Let's go back to that App Install Banner and see how we can get it to show up.

Getting that "App Install Banner"

Learn how to use chrome to remotely debug your Android devices.

Connecting Chrome Developer Tools to a Real/ Emulated Device

Time to see that App Install Banner in Action - on a real device!

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

The best thing about the app install banner is that you can fully control when it's getting displayed. At least as long as the base requirements are met. Let's dive into that in this lecture.

Deferring the App Install Banner

Let me wrap this module up and summarize what we learned thus far.

Wrap Up

Service Workers are a vast topic - in this lecture, you'll find some FAQs about them.

Service Worker FAQ

This lecture not only holds the source code of this module but also provides some useful links for you to dive deeper.

Useful Resources & Links
+ Promise and Fetch
13 lectures 39:23

Let me introduce you to this module and what you're going to learn in it!

Module Introduction

To understand Promises, you need to understand the problem they solve. Let's dive into that in this lecture.

Async Code in JavaScript

Let's dive into the basics about Promises.

Promises - Basics

Promises simply promise us a response. That can also be an error! Learn how to reject promises.

Rejecting Promises

We're already using Promises in our project! Let's have a look at some examples.

Where we Use Promises in our Project

Now that we had a look at Promises, let's dive into Fetch, another core API we'll use in this course.

Fetch - Basics

We're not limited to using Fetch for getting data - we can also use it to send data via POST request, as strange as that might sound. Learn more in this lecture!

Sending Post Requests via Fetch

Fetch also allows you to work with CORS responses. Learn more in this lecture.

Fetch and CORS

Now that we had a closer look at Fetch, let's see how it compares to traditional Ajax requests.

Comparing Fetch and Ajax

Older browser don't support Promises and Fetch. That's no issue though, we can use polyfills to fix that. So let's do that!

Adding Polyfills (for Legacy Browser Support)

Now that we know more about the Fetch API, let's come back how Fetch interacts with service workers.

Fetch & Service Workers
In this module, I gave you a brief refresher on Promises and the Fetch API. It's now your turn to practice both concepts - at least the basics - as we'll use both throughout the course.
Time to Practice - Promises & Fetch API
1 question

Let me summarize this module and wrap up what we learned.

Wrap Up

This lecture not only holds the source code of this module but also provides some useful links for you to dive deeper.

Useful Resources & Links
+ Service Workers - Caching
18 lectures 01:12:14

Let me introduce you to this module and to what you'll learn in it!

Module Introduction

Let's start with the basics: Why do we need Caching? Why would it be interesting to have our app run without an internet connection?

Why Caching?

Now that we know why caching is interesting, let's dive into the Cache API in this lecture.

Understanding the Cache API

Caching is interesting but where (in which browsers) can we use it? This lecture explores your options.

Browser Support

Let's dive into caching with service workers! For that, we need to adjust our course project. So let's do that now!

Adjusting the Course Project

Of course, we want to cache the right items. How do we identify them? Let's dive into this question in this lecture.

Identifying (Pre-)Cacheable Items

Let's start with "static caching" or "precaching". What is that and how does it work? Well, let's dive into it!

Static Caching/ Precaching

With items being stored in cache, we of course also want to retrieve them from there when the time comes. Let's explore how that works.

Retrieving Items from the Cache

Thus far, we only put one item onto the cache. Time to change that in this lecture!

Adding & Retrieving Multiple Files (to/ from Cache)

Adding files to the cache one-by-one is pretty time-consuming. Let's accelerate that with addAll().

Cache Multiple Files with addAll

Thus far, we only cached files statically. That means during the installation of the service worker. Let's now move on and add items dynamically.

Dynamic Caching - The Basics

With the basics about dynamic caching set, it's now time to use it!

Implementing Dynamic Caching

Let's now dive into how we may work with errors and let's fix some whilst we're at it.

Handling Errors

An important part of cache management is "Versioning". Why is it important and what exactly does it mean? Let's take a closer look!

Adding Cache Versioning

Since we added versioning to our cache, we'll have to deal with outdated versions, too. Learn how to deal with such versions in this lecture.

Different Cache Versions & Cleanup

Let's now optimize our cache management and learn which tools we may use for that.

Optimizing Cache Management
You learned a lot about service workers and caching, it's now time to practice that to ensure that all these basics are really set.
Time to Practice: Service Workers & Caching
1 question

Let me summarize this module and wrap it up!

Wrap Up

In this lecture, you'll find some useful links as well as the source code for this module.

Useful Resources & Links
+ Service Workers - Advanced Caching
22 lectures 01:21:49

Let me introduce you to this module and to what we'll cover in it!

Module Introduction

To dive into advanced caching, we'll actually start simple and add a button. No worries, it'll get more advanced, soon!

Module Preparation: Adding a Button

Let's dive into our first strategy - "Cache on Demand". This allows the user of our page to specify when something should get cached.

Offering "Cache on Demand"

Sometimes, you don't have the right files in the cache. That doesn't mean you can't show a nice page though. Learn how to provide a generic fallback page in this lecture.

Providing an Offline Fallback Page

After having a look at two interesting enhancements (Cache on Demand and Offline Fallback), it's time to dive into our first "real" caching strategy. Learn more about it in this lecture.

Strategy: Cache with Network Fallback

We had a look at our first "real" strategy - time for the next one!

Strategy: Cache Only

What's the opposite of "Cache only"? Correct! Network only. Let's learn how to implement that strategy.

Strategy: Network Only

Network only doesn't fit your needs? No problem at all, let's turn our heads towards "Network with Cache Fallback".

Strategy: Network with Cache Fallback

After having a look at "Network with Cache Fallback", let's dive into another popular strategy in this lecture.

Strategy: Cache then Network

We can actually "enhance" the "Cache then Network" strategy by adding dynamic caching. Learn how that works in this module.

Cache then Network & Dynamic Caching

The "Cache then Network" strategy is pretty good, but right now, it doesn't really work if we're offline. Time to improve this.

Cache then Network with Offline Support

Often times, we want to apply different strategies to different types of assets. A common requirement is to differentiate by URL. Learn how to do that, in this lecture.

Cache Strategies & "Routing"

There is room for a "Cache only" strategy in our app! Learn how to combine it with "Routing" to enhance our app.

Applying Cache Only
We had a look at a lot of caching strategies throughout this module. Do you remember them all? Let's practice them, to make sure you really got them set and do understand how to use them!
Time to Practice - Advanced Caching
1 question

We can improve the way we parse our static cache URLs - let's explore how to do that in this lecture.

A Better Way Of Parsing Static Cache URLs

The current "cache only" route matching has a flaw - learn how to fix it here.

Making Route Matching More Precise

Just as we improved our static-cache parsing, we can improve the way we serve fallback files. Learn how to do that, in this lecture.

A Better Way Of Serving Fallback Files

Thus far, we only worked with GET requests. What about POST requests? Let's explore them, in this lecture.

Post Request and Cache API

Caching everything isn't an option - your cache will get too full. Learn how to manage its size, in this lecture.

Cleaning/ Trimming the Cache

Everything's working great thus far - but did you ever consider getting rid of a service worker? How would that work? Well, let's have a look.

Getting Rid of a Service Worker

With a lot of caching strategies practiced and implemented, let's now prepare the project for the next steps.

Preparing the Project for the Next Steps

Let me wrap this module up and summarize what we learned thus far.

Wrap Up

This lecture contains some useful resources and links for this module.

Useful Resources & Links
+ IndexedDB and Dynamic Data
18 lectures 01:07:48

Let me introduce you to this module and to what you're going to learn in it.

Module Introduction

Let me explain the requirements for this module and what we need to change about our project.

Understanding the Basics
Changed Firebase Console Layout

We need some dynamic data for this module and I don't want to use some dummy endpoint. So let's use Firebase to quickly set up our own, customizable backend.

Setting Up Firebase

With the backend set up, let's use some dummy data there and connect our frontend (the PWA) to the backend (Firebase).

Connecting Frontend to Backend

Hearing about "Dynamic Caching" and "Caching Dynamic Data" can be confusing. Time to clear up the confusion and explain what the difference actually is.

Dynamic Caching vs. Caching Dynamic Content

As mentioned, we'll use IndexedDB in this module. Time to take a closer look at it!

Introducing IndexedDB

Let turn our heads towards browser support and find out where we may use IndexedDB.

IndexedDB Browser Support

We'll use IndexedDB in this section, but the default API is kind of clunky. Let's use a better package which allows us to utilize promises.

Adding the IDB File

We added idb.js, let's now use it. What better way of using it than to start right away with caching incoming posts?

Storing Fetched Posts in IndexedDB

We already used IndexedDB, let me now show you how you may use it in the service worker and even share the relevant code between service worker and "normal" JS code.

Using IndexedDB in the Service Worker

With data being stored in IDB, it's now time to also fetch it. Otherwise, offline access will be hard.

Reading Data from IDB

What happens if data on our server changes and we got old data stored in our client? That's not too good, is it? Learn more about this and how to fix it, in this lecture.

Clearing IDB & Handling Server-Client Mismatch

So we know that clearing our database will be important, let's now implement the logic to do just that.

Implementing the Clear Database Method

Of course, you don't always want to clear the entire database. Hence I'll dive into deleting single items in this lecture.

Deleting Single Items from the Database

With our IndexedDB solution implemented - how does it compare to caching via the Cache API? What about caching strategies? I'll explore that question in this lecture.

IndexedDB and Caching Strategies

Let me wrap this module up and summarize what we learned.

Wrap Up

In this lecture, you'll find the section source code and some useful resources to dive deeper.

Useful Resources & Links
+ Creating a Responsive User Interface (UI)
10 lectures 38:05

Let me introduce you to this module and to what you're going to learn in it.

Module Introduction

Responsive design is a vast topic. Actually, there are very long courses out there which will only focus on that. Hence I won't dive deeply into in this course as I explain in this lecture.

Responsive Design in this Course

We actually already have a responsive application. At least a lot of parts of it are responsive. Let's identify them in this lecture.

Understanding Responsive Design in our Project

CSS Media Queries are a core tool in your toolbox when it comes to creating responsive web pages. Let's dive into the very basics about them in this lecture.

CSS and Media Queries

The posts are deliberately not that high - of course we can change that though!

Want to see more of your Images?

We can also optimize the way we use images. We don't need to load the big high-resolution ones on small devices in the end, do we?

Using Images in a Responsive Way

Animations are not really related to responsive design but still a crucial part of PWAs. We want our app to really look and behave nicely, don't we?

Adding Animations

Let me also briefly dive into the viewport meta-tag and how to handle it correctly.

The Viewport & Scaling

Let me wrap this module up and summarize what we learned.

Wrap Up

Attached to this lecture, you'll find the module code, inside the lecture, you'll find some helpful resources.

Useful Resources & Links
+ Background Sync
12 lectures 01:03:03

Let me introduce you to this module and to what we're going to cover in it.

Module Introduction

Let's dive into the basics about Background Sync and understand how it works behind the scenes.

How does Background Sync Work?

Before we can start using Background Sync, we need to prepare our project. Let's do so now.

Adding the Basic Setup to our Project

We got the app prepared, now it's time to let the service worker know about the data it should synchronize.

Registering a Synchronization Task

In order to sync our data, we also need to store it. Learn how to do that, in this lecture.

Storing our Post in IndexedDB

As always in our app, we have to make sure that we also have a fallback so that it also works on older browsers.

Adding a Fallback

With the data stored and the sync request sent to the service worker, let's now finally add the code to successfully write queued-up data to the backend.

Syncing Data in the Service Worker

Thus far, we had a look at one-time sync, which is useful for sending data at a later point of time. There's also another feature coming up - periodic sync. Learn more about it, in this lecture.

Understanding Periodic Sync

The app is taking shape but we need more control over the backend now. Let's dive into a bit more Firebase here and add our own server-side code.

Adding Server Side Code

Unfortunately, there's an error in our Firebase backend - let's fix it in this lecture!

Fixing Errors

Let me wrap up and summarize what we covered in this module.

Wrap Up

Attached, you find the module source code, in the lecture, you'll find some useful links to learn more.

Useful Resources & Links
+ Web Push Notifications
24 lectures 01:48:21

Let me introduce you to this module and to what we're going to cover here!

Module Introduction

Before we learn HOW to use Notifications, let's learn WHY we might be interested in doing so.

Why we need Web Push Notifications

Let's understand how Push and Notifications (these are different things!) work. More about that, in this lecture.

How Push & Notifications Work

Let's dive into Notifications and let me clarify how it works.

Displaying Notifications - Some Theory First

As always, we of course want to find out how browser support for this feature looks like. We'll do that, in this lecture.

Browser Support

If we want to display Notifications (and send Push Messages), we need to fetch the permissions to do so first. This lecture shows how that works.

Requesting Permissions

With the permissions requested (and hopefully granted), we can now have a look at how we actually display Notifications.

Displaying Notifications

We sent a Notification directly from our JavaScript code, in this lecture we'll have a look at how that works when using a Service Worker instead.

Notifications from Within the Service Worker

Displaying simple notifications is already great but of course not all we can do. You can actually customize a lot about these notifications. Let's learn more in this lecture.

Understanding Notifications' Options

Now that we already had a look at notification options, let's dig deeper and see what else we can configure about these notifications.

Advanced Options

One important option is missing until now: The option to show actions on our notification. Let's implement this feature, too.

Adding Actions to Notifications

Since we can display a notification (maybe even with actions), wouldn't it be great if we could also listen to user interactions with it? We can as this lecture shows!

Reacting to Notification Interaction - Clicks

We're not limited to listening to clicks on the notification or an action, we can also react to the user dismissing it. Learn how that works in this lecture.

Reacting to Notification Interaction - Closing

Notifications are NOT push messages, that's important! Let me explain the difference and explain how to get started with push messages in this lecture.

From Notifications to Push Messages

Now that we learned what Push Messages are, let's set up our first push subscription so that we have a possibility of sending messages to the client.

Creating a Push Subscription

With a new subscription created, we can now also store it on a server. Actually, we should do that. Learn more about it in this lecture.

Storing Subscriptions

We're making good progress! The next step is to take our created subscription and store it on the server. Learn how to establish the connection in this lecture.

Connecting Server & Client (PWA)

Everything's set up now! Let's now dive into sending push messages from a server!

Sending Push Messages from the Server

Now that we're sending push messages from the server, we have to work on the client again to ensure that we're listening to these incoming messages.

Listening to Push Messages

We're sending push messages and listening to that - let's now explore how the whole process works and looks like on a real device.

Displaying Push Notifications on a Real Device

Now that we display a notification, we also want to control what happens when the user clicks/ touches it. We can easily do that as this lecture shows.

Opening a Page upon User Interaction

Not much left to do, let's just improve our code a little bit and then move on.

Improving our Code

Let me wrap this module up and summarize what we learned thus far.

Wrap Up

Attached to this lecture, you'll find the section code, in the lecture, you'll find some useful links.

Useful Resources & Links
  • Basic HTML, CSS and JavaScript knowledge is required
  • NO experience with JavaScript frameworks is required

Progressive Web Apps (PWA) are the next big thing in web development as they bring mobile-app-like experiences to your users without requiring them to install an app from the app store/ play store.

You still create a web application (HTML, CSS, JavaScript) but this course will teach you how to add features such as camera access, service workers for offline support, push notifications and more. This combines the best of both worlds: You deliver fast, engaging and reliable experiences whilst still having the reach and accessibility of a web page.

"Progressive Web App" simply is a term summarizing all the features allowing you to deliver mobile-like experiences. The topic is highly trending and it also is a topic which is here to stay! Not only is it strongly promoted by Google (actually a lot of talks at Google I/O 2017, Google's developer conference, were devoted to PWAs), it's also quickly being adopted by big companies like Twitter or the Washington Post.

Having the skills to build and optimize these kind of web apps is already an important and highly demanded skill for modern web developers, a trend which is only going to accelerate! Therefore, learning how to build PWAs will give you a competitive edge!

In detail, this course will cover everything you need to build amazing PWAs - leading to a score of 100 (out of 100) in Google's PWA auditing tool "Lighthouse":

  • Detailed explanation about what a PWA exactly is
  • How to use an app manifest to make your web app installable on device homescreens
  • Using service workers to offer offline support by caching assets
  • Advanced service worker usage and caching strategies
  • A refresher on Promises and the Fetch API as both concepts are heavily used in PWAs
  • How to improve user engagement by adding push notifications
  • A way to synchronize data in the background, even if connection is lost
  • How to access native device features like the camera or geolocation
  • Using Workbox to make service worker management easier
  • Explanations on how to turn your next SPA project into a PWA
  • And more

All these things are of course put into practice by building a course project. To ensure that you can apply the knowledge to ANY of your projects, the course project doesn't assume any JavaScript framework but focuses on the core features mentioned above!

So this course has a lot to offer, how do you tell if it's for you though?

It definitely is the right choice if ...

  • ... you already are a web developer (no matter if experienced or still new to the business) and want to prepare for the future
  • ... you enjoy working with HTML, CSS and JavaScript and want to leverage the full power the web and browser technologies have to offer
  • ... you want to deliver the best possible experiences to your users, using technologies like web push notifications or offline support

What do you need to know to get the most out of the course?

  • You need to know at least the basics of HTML, CSS and JavaScript
  • No advanced knowledge of these technologies required though
  • You DON'T need to know any JavaScript framework like Angular or React - PWAs work with ANY JavaScript app, even if you don't use a framework at all (actually, that's what we'll build in the course!)

I'd be very happy to welcome you on board of this course and start this journey together with you!


Who this course is for:
  • Students who want to build web apps that look and behave like native mobile apps
  • Students who want to build offline-ready web apps (yes, that works!)
  • Anyone who wants to build web apps that offer access to the device camera, geolocation, push notifications and provide offline support
  • Students who want to leverage latest browser features whilst still supporting older browsers