Transform a React Application into a Progressive Web App (PWA) Training Course


React is a JavaScript library used to create front-end web applications. Progressive Web Apps are web applications that function and appear like native applications on Android, Windows, and more. Transforming a React application integrates native features such as offline usability, push notifications, etc.

This instructor-led, live training (online or onsite) is aimed at developers who wish to transform a React application into a Progressive Web App.

By the end of this training, participants will be able to:

  • Set up the necessary development environment to start transforming a React application.
  • Cache using Service Worker to make a React application work offline.
  • Create and style a push notification.
  • Install the progressive web app into a mobile device.

Format of the Course

  • Interactive lecture and discussion.
  • Lots of exercises and practice.
  • Hands-on implementation in a live-lab environment.

Course Customization Options

  • To request a customized training for this course, please contact us to arrange.


  • Experience with React


  • Developers

Course Outline


React and JavaScript Libraries

  • Processes used in JavaScript libraries to develop web applications

Overview of the Web Application Development Cycle

  • Native applications versus progressive applications
  • Javascript logic, CSS templates, and HTML templates

React Goes Native with Progressive Web Apps

  • Cross-platform
  • Backward compatibility
  • Feature parity

Progressive Web Apps and Push Notifications

  • Push API
  • Notification API

Preparing the Development Environment

  • Installing and configuring Node.Js
  • Installing and configuring NPM

Programming and Optimizing the React Application

  • Creating a new boilerplate React application
  • Installing dom routers to navigate and save in the React application
  • Coding a todo list
  • Updating the default styles
  • Registering Service Worker

Configuring Icons and Push Notifications

  • Creating and styling push notification
  • Creating and styling icons

Deploying the Application

  • Runnng the React application on a mobile simulator or on a mobile device

Testing the Application

  • Proof checking the React application with Lighthouse to determine if it meets the PWA standard

Summary and Conclusion

Leave a Reply

Your email address will not be published. Required fields are marked *