React Progressive Web App With Workbox and Webpack Tutorial

React Progressive Web App With Workbox and Webpack Tutorial, available at $49.99, has an average rating of 4.05, with 15 lectures, based on 70 reviews, and has 6410 subscribers.

You will learn about Creating a custom React PWA with Webpack and Workbox. React PWA with Workbox This course is ideal for individuals who are JavaScript Developers It is particularly useful for JavaScript Developers.

Enroll now: React Progressive Web App With Workbox and Webpack Tutorial

Summary

Title: React Progressive Web App With Workbox and Webpack Tutorial

Price: $49.99

Average Rating: 4.05

Number of Lectures: 15

Number of Published Lectures: 15

Number of Curriculum Items: 15

Number of Published Curriculum Objects: 15

Original Price: $199.99

Quality Status: approved

Status: Live

What You Will Learn

Creating a custom React PWA with Webpack and Workbox.

React PWA with Workbox

Who Should Attend

JavaScript Developers

Target Audiences

JavaScript Developers

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.

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction

Chapter 2: React Application Setup with Webpack

Lecture 1: Set up React Application with Webpack

Lecture 2: Add Loaders and Babel Configuration

Lecture 3: Set up Webpack Server in Development and Production

Chapter 3: Creating Components, Adding SVGS, Images, Styles, Routing

Lecture 1: Create layout component, Add SVG logo, Adding Fonts and Styles

Lecture 2: Adding Routing with Reach Router and Navigation in the header

Lecture 3: Add Images and Background images

Chapter 4: Fetching Data from Third Party API and ENV Variables

Lecture 1: Fetching Data from Third Party API using Axios and setup ENV Variables

Chapter 5: Introduction to Workbox, Service Workers and Caching | Setup and Registration

Lecture 1: What is Workbox, Service Worker?

Lecture 2: Setup Workbox Webpack Plugin, CopyWebpack plugin and Manifest.json file

Lecture 3: Register Service Workers and Cache Update

Lecture 4: Using Workbox Core and Precaching

Chapter 6: Caching At Runtime and Caching Strategies

Lecture 1: Routing | Caching Google Fonts | StaleWhileRevalidate & Cache First Strategies

Lecture 2: Caching Images, styles and scripts – Cache first

Lecture 3: Cache third party api response

Instructors

Imran Sayed
Software Engineer

Rating Distribution

1 stars: 1 votes

2 stars: 1 votes

3 stars: 4 votes

4 stars: 13 votes

5 stars: 51 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!