Progressive Web Apps(PWA) development For beginners

Create and publish Progressive Web Apps from scratch

4.30 (10 reviews)
Web Development
Progressive Web  Apps(PWA)  development For beginners
2.5 hours
Oct 2021
last update
regular price

What you will learn

Build progressive web apps

Publish app to the internet

Add version control to app

Create repository on GitHub and push your project to it

Make the app installable on various devices

Implement offline access for the app

Setup and configure local Server


PWAs are web apps developed using a number of specific technologies and standard patterns to allow them to take advantage of both web and native app features. For example, web apps are more discoverable than native apps; it's a lot easier and faster to visit a website than to install an application, and you can also share web apps by sending a link.

On the other hand, native apps are better integrated with the operating system and therefore offer a more seamless experience for the users. You can install a native app so that it works offline, and users love tapping their icons to easily access their favorite apps, rather than navigating to it using a browser.

PWAs give us the ability to create web apps that can enjoy these same advantages.

It's not a brand new concept—such ideas have been revisited many times on the web platform with various approaches in the past. Progressive Enhancement and responsive design already allow us to build mobile friendly websites.

PWAs, however, provide all this and more without losing any of the existing features that make the web great.

What makes an app a PWA?

There are some key principles a web app should try to observe to be identified as a PWA. It should be:

  • Discoverable, so the contents can be found through search engines.

  • Installable, so it can be available on the device's home screen or app launcher.

  • Linkable, so you can share it by sending a URL.

  • Network independent, so it works offline or with a poor network connection.

  • Progressively enhanced, so it's still usable on a basic level on older browsers, but fully-functional on the latest ones.

  • Re-engageable, so it's able to send notifications whenever there's new content available.

  • Responsively designed, so it's usable on any device with a screen and a browser—mobile phones, tablets, laptops, TVs, refrigerators, etc.

  • Secure, so the connections between the user, the app, and your server are secured against any third parties trying to get access to sensitive data.


What are progressive web apps
Features of progressive web apps
Key components of progressive web apps
Technologies used to create progressive web apps
Creating the app
Installing Text Editor
Installing SublimeText
Installing Visual Studio Code
What we will create
Creating project directory and files
Creating project structure
Adding CSS
Adding logic with JavaScript: Part 1
Adding logic with JavaScript: Part 2
Source Code
Node js Setup
What is Node Node js
Installing Node js
Node js Modules and Packages
Initializing a Node js project
Installing lite server
Lite server Configuration
Converting the app to a progressive web app
What Makes a Web App Progessive
Adding app files to public directory
Running the development server
What is Lighthouse
Creating manifest file
Register service worker
Adding icons directory
Implement caching for offline access: Part 1
Implement caching for offline access: Part 2
Installing the app
Version Control and deployment
Tools to publish your app online
What is git
What is Github
Install git
Git Setup
Create GitHub account
Creating personal access tokens
Adding files to local git repository
Adding files to remote GitHub repository
Publishing app to the internet


15 October 2021
I think this the best course I've ever partake on web application development. Thank you very much for the detailed explanation ?


10/13/2021100% OFF

Related Topics

udemy ID
course created date
course indexed date
Angelcrc Seven
course submited by