4.32 out of 5
125 reviews on Udemy

Complete Progressive Web App Bootcamp

Learn to build discoverable, engaging Progressive Webs Apps (PWAs) from scratch,
Kim Chen
45,453 students enrolled
English [Auto]
What a Progressive Web App is
Use Service Workers to enable your application to work offline
Create a progressive web app that is installable to the home screen

What is Progessive Web App (PWA)?

PWAs are web applications created utilizing various explicit advances and standard examples to permit them to exploit both web and local application highlights. For instance, web applications are more discoverable than local applications; it’s much simpler and quicker to visit a site than to introduce an application, and you can likewise share web applications by essentially sending a connection.

Then again, local applications are better incorporated with the working framework and along these lines offer a more consistent encounter for the clients. You can introduce a local application so it works disconnected, and clients love tapping their symbols to handily get to their most loved applications, instead of exploring to it utilizing a program.

PWAs enable us to make web applications that can appreciate these equivalent favorable circumstances.

It is anything but a shiny new idea—such thoughts have been returned to commonly on the web stage with different methodologies before. Reformist Enhancement and responsive plan as of now permit us to fabricate versatile neighborly sites.

What will you learn in this course?

In this course you’ll begin dealing with your absolute first Progressive Web App (PWA) – a web application that can exploit a considerable lot of the highlights local applications have appreciated. You’ll likewise get more involvement with making a web application that works disconnected utilizing Service Workers. At last, you’ll make your application installable to the client’s home screen with the Web App Manifest file.



In this part, we will introduce what we are going to make. We are going to create a progressive web app with the use of the firestore, user can add contacts, favorite the contacts and of course edit and delete the contact even in the offline situation. Why? Since this is progressive web app.

Create pages

First, we are going to create different pages with the use of the materializecss.

Create input modal and edit modal

After we create the basic structure for this progressive web app. We are going to add the modals and also the necessary JavaScript.

Add the floating action button

In this part, we are going to add the materialize css button, which is for trigger the add contact modal.

Create icons for the progressive web app

In this part, we go to create app icon for this progressive web app. This is the icon for the desktop and mobile app.

Create manifest file

The manifest file tells the browser about your Progressive Web App and how it should behave when installed on the user's desktop or mobile device. Let's create the manifest file together.

Open the web on Android Simulator
iOS Simulator icon problems
What is service worker

In this part, we will briefly introduce what is service worker and how it enhance the web page.

Service worker lifecycle introduction

Every service worker goes through three steps in its life cycle--registration, installation, and activation. In this part, we will briefly introduce these three steps

Service worker registration

In this part, we will do the service worker registration process. We will first check whether the browser support service worker, after that we register the service worker.

Service worker installation

The installation process of the service worker is to allow the pwa to cache all the necessary asset like icons, css and javascript. Let's take a look on how to add the installation process.

Service worker activation

In this part, we will show when the service worker is activated.

Using lighthouse to audit the progressive web app

In this part we will use the light house of google chrome developer tools to check the problems of the PWA. Then we will fix it one by one.

Service worker listen fetch event

Before make the app installable, we have to meet the criteria, so we need to add the fetch event listener inside the service work. So let's learn how to do it.

Open the localhost of the mobile phone

Typing localhost inside android real device or emulator cannot access the website as localhost. This part will show you how to fix it and meet the installable criteria

Cache the core asset of the app

In this part, we will go to cache all the core assets to the cache. So in case the app offline, the app still can be displayed rather than a chrome default no internet page

Return the cached assets to the app
Dynamic Cache

It is not make sense/ possible to cache all the pages of an app to the assests. Instead, we use the dynamic cache to cache the pages that we visited. Let's learn how to do it

Add a fallback page

Sometime the page we haven't visited before. Instead of showing the default error page, we want to show our own customized fallback. Here will show you how.

Limit the number of cache

When we keep browsing more and more page, we will store a lot of cache at last. We want to limit the size so the cache will not get huge.

Create Firebase project

Since we need to use the firebase as a backend, we need to go to firebase to create a new project. And the we need to copy and paste the config file to our project.

Add document in cloud firestore

After we create a new project, it's time to add the data to cloud firestore. Let's learn how to do it

Get realtime update with cloud firestore

In this part, we get realtime updates with cloud firestore

Create the template for the contacts

In this part, we will create a template for each contact, so in the next lecture, we can use this to render the contacts.

Updating the UI

In the last lecture, we already created the template, now it's time to render it out.

Configure Firestore offline persistence

We will not cache the firestore data in the service worker. Instead we will implement firebase firestore offline persistence. This can render the data even offline.

Delete document in cloud firestore

In this part, we will implement the delete document to this PWA, it will delete the document in firestore and also remove the data in the UI.

Edit document in cloud firestore

In this part, we will implement the edit document to this PWA, it will edit the document in firestore and also edit the data in the UI.

Toggle favorite

In this part, we will implement the toggle favorite function.

Render favorite pages

In this part, we will render the favorites in the favorites page.

Promise, async await and fetch

Mimick fetch
Callback and callback hell

Last lecture we already see the problem of random order of the data response. In this lecture, we will use callback to fix this problem

From callback to promise
From promise to async await

Cache Management

Prepare for this section

In this part, we are going to modify the project into a simpler version such that just focus on cache management. You can also download the project directly from the resources.

Cache Only Strategy

No network to fall back to, nothing. It serves the response from the cache ONLY. This strategy is used on assets that will never change once it is cached the first time.

Network only strategy
Network first strategy

With this strategy, instead of using cache only, it use network only. Let's see how to implement it in service worker

Network first + Dynamic Cache strategy

In previous lecture, we see the network first cannot handle those pages that not precached before. In this lecture, we will implement dynamic cache to handle this problem

Cache First Strategy + Fallback
You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
4.3 out of 5
125 Ratings

Detailed Rating

Stars 5
Stars 4
Stars 3
Stars 2
Stars 1
Course available for 2 days
30-Day Money-Back Guarantee


2 hours on-demand video
Full lifetime access
Access on mobile and TV
Certificate of Completion
Never Miss Any Course Join Our Telegram Channel Join Channel
+ +