
Introduction to PWA.
React PWA Demo
Create a reusable layout with header and footer for a React app, add an SVG logo as a component, and apply fonts and styles with Tailwind and global styles.
Learn to set up routing with Reach Router, wrap the app in a router, and build a header navigation with links to the root and topics pages.
Fetch data from a third-party api with axios and manage api keys using dotenv and a .env file. Build a React component to display movies from the api.
Discover how workbox simplifies building service workers, enabling precaching, runtime caching, routing, and background syncing to progressively enhance a react progressive web app using the webpack plugin and inject manifest.
Learn to implement a cache first strategy for images, styles, and scripts in a React progressive web app using Workbox, including cache naming, expiration rules, and handling catchable responses.
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.