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
3.65 (48 reviews)
354
students
15.5 hours
content
Jan 2021
last update
$54.99
regular price
What you will learn
Progressive Web Apps
HTML
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
Why take this course?
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 !
Content
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
Promises-Assignment
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
Recap-Algorithm
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
idb-js-file
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
9.2
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
Screenshots
Reviews
Amit
May 28, 2023
Good course. Told everything from basic. Explained each step. But didn't implement Push notification feature
Nick
November 28, 2022
This course does not go from "Beginner to Expert". It is a purely Beginner-level course that also only partially focuses on PWAs. At least half of it is for people who know nothing at all about web development - how to set up VS Code, use Browser Dev Tools, how to do basic Javascript stuff (taught through irrelevant code examples and much of which isn't even used later in the course, like async/await), and more.
There's also a large amount of redundancy - consecutive lessons repeat the same introductions etc... He also talks very slowly - you can easily watch on 2x speed.
With all these things combined, the course could easily be half as long, even while covering the same topics. And the PWA-centric material is probably only 1/3 of the course, and never gets all that in-depth. It also doesn't talk about Workbox, which is a very useful toolkit for building PWAs.
If you know nothing at all, take this course. Either way, the PWA course from Max Schwartzmuller of Academind is far superior.
Alexandra
October 27, 2022
Not sure how you can call this a Beginner to Expert course when there's nothing about designing a PWA.
Nick
August 12, 2022
This course explains concepts relating to PWAs really well. It covers submitting a form to the cloud when in offline mode, but does not cover Push Notifications - something that would alert app users of changes on the server side when re-establishing internet connectivity.
Cristiano
May 16, 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.
Numair
February 6, 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!
Adnan
January 31, 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
Adrian
January 31, 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.
Ayesha
January 30, 2021
Yes, the instructor did an amazing job because as a beginner at this course I understood the depths and everything was crystal clear.
Charts
Price
Rating
Enrollment distribution
Related Topics
3761370
udemy ID
1/9/2021
course created date
2/24/2021
course indexed date
ANUBHAVJAIN
course submited by