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

• Experience with React

Audience

• Developers

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.

Introduction

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