React Progressive Web App With Workbox and Webpack Tutorial

Learn how to create a React PWA app from scratch with Workbox
English [Auto]
Creating a custom React PWA with Webpack and Workbox.
React PWA with Workbox


  • Basic Knowledge of JavaScript


This course targets all:  beginners, intermediate and advanced.
It teaches you on how to create a React PWA app from scratch with Workbox. You will learn the following in this course:

  • Intro to React PWA With Webpack And Workbox

  • Create a React Project from Scratch With Webpack 5 From Scratch

  • Setup a React app with Webpack and Babel

  • Setup Webpack Dev Server | React Development and Production Server

  • Using SVG Icons In React | Google fonts and styles | Create layout component

  • Reach Router | Navigation in React

  • React Background Image | Set a background Image With React Inline Styles

  • Adding Custom Environment Variables in React with Dot Env

  • Fetch data in React using axios

  • What Are Service Workers | Workbox Webpack Plugin | InjectManifest

  • Setup Workbox Webpack Plugin Configuration and manifest.json

  • Service Worker Registration | Workbox Window | Cache update on application re-deploy

  • Workbox Precaching In React | Workbox Core | preCacheAndRoute | skipwaiting

  • Caching Google Fonts Using Workbox | StaleWhileRevalidate | CacheFirst Caching Strategies

  • Service Worker: How to cache images

  • You will also learn about how a Runtime caching is done in React PWA app using Workbox

    In this collection, you'll learn what makes a Progressive Web App special, how they can affect your business, and how to build them.
    A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don't need a web page or user interaction. Today, they already include features like push notifications and background sync.

Who this course is for:

  • JavaScript Developers

Course content

6 sections13 lectures1h 54m total length
  • Introduction


Software Engineer
Imran Sayed
  • 4.4 Instructor Rating
  • 279 Reviews
  • 19,168 Students
  • 5 Courses

Imran is a Full Stack Developer. He is also a WordCamp Speaker, Organizer, WordPress Meetup Organizer, and a regular contributor to the open source community. He is also a core contributor in WordPress and has a rich experience in Node, React and Laravel.

Apart from this, Imran has a passion for teaching and sharing knowledge which led him to start his YouTube channel - Codeytek Academy in 2013, where he teaches Programming on WordPress, React and Laravel.

Openness and inclusiveness is something he dearly loves about the open source community.