Overview
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.
Requirements
- Experience with React
Audience
- Developers
Course Outline
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