Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
React Progressive Web App With Workbox and Webpack Tutorial
Rating: 4.6 out of 5(71 ratings)
6,418 students

React Progressive Web App With Workbox and Webpack Tutorial

Learn how to create a React PWA app from scratch with Workbox
Created byImran Sayed
Last updated 10/2022
English

What you'll learn

  • Creating a custom React PWA with Webpack and Workbox.
  • React PWA with Workbox

Course content

6 sections15 lectures2h 9m total length
  • Introduction8:43

    Introduction to PWA.
    React PWA Demo

Requirements

  • Basic Knowledge of JavaScript

Description

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