Web Development


Progressive Web Apps - Beginner to Expert - 2021

Beginner to Advanced build a Progressive Web App (PWA) that will run and feel like a native Android and IOS App

4.14 (29 reviews)


15.5 hours


Jan 2021

Last Update
Regular Price

Exclusive  Offer
Unlimited access to 30 000 Premium SkillShare courses

What you will learn

Progressive Web Apps


Practical Case Studies

The use of Javascript Promises

REST API End Points

Index DB

Web Application Audit

Browser Debugging

Java Script Arrow Functions

PWA Service Workers

NodeJS HTTP Server

Cloud Databases

Package JSON and Node JS

Background Sync to the Coud

Making your website installable on PCs and Phones

Exciting New Developments in the Industry of PWAs

Cloud Firebase

News Agency Project where PWAs can be put to use


Welcome to the complete Progressive Web App(PWA) Training bootcamp 2021!

I am very excited to share all my knowledge around Progressive Web Applications.

The Web landscape is constantly evolving. Browsers are continuously improving and new features are constantly being released. The future for Progressive Web Apps is looking good. 2021 is an exciting time to be a web developer!

In this course you will learn how to implement Progressive Web App features for new and your existing web applications. Along the way you will learn how to measure and debug your PWAs so you are not missing any PWA core feature, you will learn the core concepts of building Progressive Web Apps, Rest API endpoints, cloud Firebase, Index DB, Application Auditing and Browser debugging, Java Script Arrow functions, Core concepts around Service Workers, Node JS and much much more !

With 15+ hours, this PWA course is most up-to date for those beginning to learn PWA in 2021. We'll take you step-by-step through engaging video tutorials and teach you everything you need to know to succeed as a web developer.

The course includes over 15+hours of HD video tutorials and builds your programming knowledge while making real-world websites and web apps.

Even if you have basic HTML programming skills, this course will take you from beginner to Mastery!

Progressive Web Apps are a set of features you can add to ANY web application and make it run like a native application on your IOS and Android phone, giving web the features that were only available to the native software. If you are looking to leverage your existing basic web development skills and learn how to build modern Progressive Web Apps, then this course is for you.

So what are you waiting for, lets hit the road and get started on Progressive Web Apps development !


Progressive Web Apps - Beginner to Expert - 2021
Progressive Web Apps - Beginner to Expert - 2021
Progressive Web Apps - Beginner to Expert - 2021
Progressive Web Apps - Beginner to Expert - 2021


Chapter 1 - Introduction

Course Introduction

Chapter 2 - The Progressive Web Apps Landscape

What to build in 2021

The Web Strikes Again

Progressive WebApps are the Future

Competition in the NativeAppSpace

Zero Statistics of New Native app Installs

Core Technologies of Progressive Web Apps

The Concept of Progressive Enhancement

PWA Checklist

Frequently Asked Questions about PWAs

Preparing the Development Environment - Beginning Node JS

Module Introduction

What is Node JS

Check Version of Node JS

Download Node JS

Install and Verify Node JS

Download VS Code

Understanding your Code Editor

Setting up your PWA Skeleton Structure

Creating your HTML file

Run your HTML File

What is the Package.JSON File

Configure the Package.JSON File

Part -1 - Modifying the Package.JSON File

Part -2 - Modifying the Package.JSON File

Understanding Node JS HTTP Server

Understanding the Code of START

Start your HTTP Server

Running your HTML File on HTTP Server

Why we need HTTP Server

Project Folder Structure

Configuration of the PWA News App

PWA Completed Checklist

Download News Progressive Web App

Open the News PWA Project resource

Navigating the PWA File Structure

Running the News PWA

Hands on Browser Debugging and Learning Lighthouse - Avoid hitting the Rocks

Lighthouse to protect your ship from the rocks

Debugging Progressive Web Apps Module Introduction

PWA and Phone Simulators

Making our PWA Work Offline

PWA Debugging the Elements Section

Debugging Techniques - Eye Movements

Troubleshooting NodeJS HTTP Server

Lab Exercise

Browser Console Tab

PWA Browser Sources Part 1

PWA Browser Sources Part 2

PWA APIs and BrowserSupport Index

Debugging PWA using the NetworkTab

Debugging Manifest and Service Worker Caches

Auditing the News Progressive Web App

Add to Home Screen - A2HS

Browser Apps

The PWA Install Button

Remove PWA from Chrome

JSON File concepts - Manifest

Effects of not having the Manifest File

Coding the Manifest File

Light House Audit on our code

Fixing Errors after LightHouse Auditing

Programming Tip - Code with your hands

Referring to the Index File

Checking Installability of our News Progressive Web App

Android Simulator and PWA

Run your PWA on Android Studio

Launch Simulator for Android

Exciting New Developments -Chrome experimental Features

Wrap up - Generate NativeApp Splash Screen From PWAManifestFile

The ServiceWorker Mindset - FoundationConcepts

Service Worker - Goals

The Web Today without Service Workers

Intercepting Request and Response Concept

ServiceWorker Lifecycle

Service Worker and the Cache

Wrap-up and Recap

ServiceWorker Mindset - Understanding Synchronous Java Script

Part A-Setting up the Synchronous Module

Part B - Setting up the Synchronous Module

Part C - Setting up the Synchronous Module

Part D - Setting up the Synchronous Module

Executing Synchronous Code

Executing Synchronous Java Script

Synchronous Java Script Single Thread

Understanding Blockcing UI

Chapter Recap

ServiceWorker Mindset - Javascript Arrow Functions

Part A - Setup a New Project for Functions

Part B - Setup a New Project for Functions

JAVA Script functions

Deep Dive Arrow Functions

ServiceWorker Mindset - Asynchronous JavaScript-Promises-AsyncAwait-fetchAPI

Java Script Promises - Concepts

Part 1 - Fulfill your Promises

Promise Fulfilled - Deep Dive


Exciting New Experimental APIs for PWAs

Async Await Setup

Combining Async with Promises

Why We need Async and Await

Understanding Await with the SetTimeOutFunction Promise

Expanding our program -Combining Async-Await-Promises await

FetchAPI Environment readiness

FetchAPI - Theory

Checking Support of fetch feature using code

Universal Support for FetchAPI

RestAPI Calls with FetchAPI

Exploring Network call methods

FetchAPI-Arrow Function Style of Programming

FetchAPI using Promise Chaining style of coding

FetchAPI and Promise Chaining-Further Explained

Concepts - FetchAPI and Post data to Server

Production FetchAPI-Post Data to Server

Apply the Concepts to the News PWA

Wrap Up

Mid Course Break - Exciting New Developments Progressive Web Apps and Web As

New Chromium Releases

New Capabilities for Developers Chrome and WebAssembly

WebAssembly and Google Chrome

Emerging PWA and Web Assembly Features

CaseStudy Educational Purpose ServiceWorkers and Manifest

Production Level Understanding Programming the ServiceWorkers-Basic Level

Application Architecture What we will do in this chapter

Setting up the Service Worker Files

ServiceWorkers Browser Support

Service Worker Registered Using Local Host

Concepts-registering a blank ServiceWorker File from Java Script

Service Worker Handling from the Browser

Service Worker LifeCycle Events

Service Worker-Listening for Events

Updating Service Workers

Carefully Plan your ServiceWorkers

ServiceWorker-Background Holding Behaviour After Updates

Important Concepts Recap

ServiceWorker-Coding the event to listen to ActivateEvent

ServiceWorker-Browser Debugging Management of LifeCycle

ServiceWorker Updating and Version Controlling

ServiceWorkers in Arrow Notation Code

Service Workers in our News Progressive WebApp

Wrap Up

Exciting New Developments in the industry

Case Study Zee 5

Programming the ServiceWorkers-Intermediate Level

ServiceWorkers-Introduction to Event-waitUntil

Introduction to Cache API

Code your first Cache

Combine the FetchAPI and CacheAPI with offline capability


Programming the Service Workers-Advanced Level

ServiceWorkers in our News Progressive WebApp

Cache First Strategy in our News Progressive Web App

Cache First then Network Strategy

Take A Break-Case Study-education Purposes Only

Combining the Power of Index DB and BackGround Sync with the Cloud

Background IndexDb

Concepts-CacheAPI and ServiceWorkers one side of the picture

Concepts - Ordinary Form but big functionality

Workflow-Letter to the Editor form-IndexDB and Firebase

Concepts - Two Scenarios

Concepts in Action - Storing Data in Index DB

Concepts in Action - Synching to Cloud Database

IndexDB Library

Index DB Basics

Intro to Index DB

Layers of Index DB

Versions of Indexdb

indexDB Browser Support

Intermediate IndexDB

Understanding the skeleton structore of Letter to the Editor HTML File

Native IndexDB or GitHub Library

Linking Letter to the editor with index page

Exploring IndexDB Integration Options

IndexDB Online Resources

Index DB Library

Methods to Include the Library

Library Code

Wrap up

Advanced Index DB

Google Compliance Issue - downloading the idb.js file

having a look at the folder structure


Storing the letter to the editor inside indexDB

Our Plan of action

indexDB Compatibility with the Browser

Open the indexdb database

Create an Object store inside idb.open

Recap of what we have done

Sucessfully created the database and Object Store

Verifying Index DB and Object Store

Explanation of Index DB Cases

Understanding Scope of IDB.Open

DBPromise.then Function Scope

Transaction on Object Store

Open the Transaction Mode

Open the Object Store on the Transaction

Adding Records to the Object Store inside Index DB

Creating the Variables JSON File to be passed to the transaction

Part-1 -Add Data to the Object Store

Successful Insertion in the Object Store

Mid Chapter Recap

The Double Return Statements

Items.Map - Explanation of code

Items.Map and Store.Add

Detailed explanation of promise.all-items.map and Store.Add

Wrap Up

Production Level Back Ground Sync Deep Dive

What is Background Sync

BackGround Sync Cool Features

Check list for BackgroundSync

check if ServiceWorker is ready to register Background sync task

Navigator.service worker ready

Unique tag name to each Background Sync task

Sucessfully Registered Sync

SyncManager Class

Accessing the Service worker in Javascript

SyncManager GetTags

Explanation of the line by line code

Code explanation - Arguments of the .then function

Explanation of Get Tags

Step away from App-js File

Change Name of the BackGroundSync Message

Locating the Place to listen to SYNC event

Listening for SyncEvent-Inside Service Worker

Checkpoint Picking up the BackGround Sync Event

Debugging BackGround Sync Errors

Fixing the Error for background Sync

Wrap up

Background Sync - Practical Cloud Database with Background Sync

Introduction to the Cloud Database

Sign in to the Cloud

Introduction to the Cloud Environment

Cloud Database. - URL and JSON Exports

Data and Rules and Usage

Cloud Database Rules

Configuring and Simulating the Read Rule

Configuring and Simulating the WRITE Rule

Recap and Start Populating Data in Cloud Database


Entering some Dummy Values in your Cloud Database

Cloud Database URL

Changing node adding style

Learning how to create parent and child nodes in the cloud

exporting cloud database to JSON

Accessing cloud data base using URL of JSON

Wrap Up

Joining the last pice of the puzzle

Goals of this Chapter

Connecting all the Pieces of the Puzzle

Coding the DoSomeStuff function

Constructing the Read All Data Function in the Service Worker

importing javascript inside service worker

IDB.Open to open the Database inside Service worker

Coding the Reading from Index DB - Separate Function

reading the Promise from Read all function

Transforming the Values from IndexDB to Local array

Coding - CheckPoint

One Error Resolved - Another Error Data array not defined

Identification of the Error using Browser Debugging

Fixing the Error in the source code

Fixing and Debugging Service Workers

Problem fixed Code Check Point Cleared

Mapping dataArray to local JavaScript variables

Creating the JSON Pay load for the Fetch statement

Fetch should be within the function

Coding the Fetch and Catch

Handling the Read all Return False conditions

Scope of the program segments

Getting the URL for Fetch

Fetch Updated with the Cloud Database URL

The final push connection to cloud using Background sync

Debugging Cloud Database Using the Network tab

Source Code Explanation Part-1

Source Code Explanation Part-2

Chapter Wrap Up

Course Roundup

Wrap Up


Cristiano16 May 2021

É um excelente material, me deu uma boa base de PWA. Durante o curso consegui aplicar os conceitos em 2 projetos, um já está em produção e o outro com a conclusão do curso devo liberar em breve com os novos recursos que aprendi. Minha gratidão ao Fahd Saifuddin por compartilhar o conhecimento e a Udemy pela estrutura.

Numair6 February 2021

Excellent course. It thoroughly covers almost all range of areas with proper explanation. For every section, videos are short and to the point which leads a beginner to the expert level. Recap of all section is interesting which helps one to revise what he learned. I like the energy of the instructor with a clear accent and voice. Highly recommended and something really worth investing in. Happy learning!

Adnan31 January 2021

Topic covered in a very Detail I am excited to see more course of this instructor in the future. Thank you for your efforts

Adrian31 January 2021

I wanted to pick up creating an APP but was not sure where to start. Going through the first few lectures, the instructor has given me lots of things to think about. For example, what to consider when starting a new APP and how my future APP users will acquire my APP etc. The instructor is clear in his explanations and has paced it well for a newcomer like myself. Looking forward to gaining more insight as I go along the course.

Ayesha30 January 2021

Yes, the instructor did an amazing job because as a beginner at this course I understood the depths and everything was crystal clear.


Udemy ID


Course created date


Course Indexed date
Course Submitted by