React Progressive Web App With Workbox and Webpack Tutorial (Learn How to Create a React PWA App)

This course, “React Progressive Web App With Workbox and Webpack Tutorial,” is suitable for new and beginner to intermediate to advanced learners. It is centered on developing an Application from scratch using React, a Progressive Web App (PWA), with Workbox. They will begin with introducing PWAs and then follow with configurations of a React project along with Webpack and Babel. This tutorial includes setting up the development and production environment to add SVG icons and Google fonts and styling the React app.

The next lesson will include features like Reach Router to navigate, background images, and other features like Dot Env to add custom environment variables. You will be introduced to how to use Axios to fetch data. Arguably the center of the course is service workers and Workbox. Create the Workbox Webpack Plugin, understand how to adjust your service worker, and know how to work with smooth cache updates. Over the course of the article, you will learn further advanced strategies for caching and understand how to cache images and fonts.

One can see that Progressive Web Apps are unique since they can operate offline, emit push notifications, and have background synchronization, which improves the user experience. This tutorial on React Progressive Web App With Workbox and Webpack shall guide you on using these features to create solid PWA web apps. Thus, after learning the principles of React PWAs with Workbox and Webpack, you will be able to develop web applications that are useful, fast, and interesting for users.

React Progressive Web App With Workbox and Webpack Tutorial Table of Contents:

1. Introduction - 08:43
2. Set Up React Application with Webpack - 09:31
3. Add Loaders and Babel Configuration - 06:56
4. Set Up Webpack Server in Development and Production - 05:49
5. Create Layout Component, Add SVG Logo, Adding Fonts and Styles - 09:40
6. Adding Routing with Reach Router and Navigation in the Header - 06:04
7. Add Images and Background Images - 06:12
8. Fetching Data from Third Party API using Axios and Setup ENV Variables - 11:59
9. What is Workbox, Service Worker? - 07:49
10. Setup Workbox Webpack Plugin, CopyWebpack Plugin and Manifest.json File - 07:01
11. Register Service Workers and Cache Update - 09:46
12. Using Workbox Core and Precaching - 13:56
13. Routing | Caching Google Fonts | StaleWhileRevalidate & Cache First Strategies - 11:21
14. Caching Images, Styles and Scripts - Cache First - 06:19
15. Cache Third Party API Response - 08:14

Who is this course for?

1. JavaScript Developers

Click on the links below to Download React Progressive Web App With Workbox and Webpack Tutorial!