Progressive Web Application With React Jumpstart
4.0 (18 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
629 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Progressive Web Application With React Jumpstart to your Wishlist.

Add to Wishlist

Progressive Web Application With React Jumpstart

Build Application That Works Offline, Looks Like Native Mobile App etc
4.0 (18 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
629 students enrolled
Created by Anto Aravinth
Last updated 7/2017
English
Current price: $10 Original price: $20 Discount: 50% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 2.5 hours on-demand video
  • 4 Articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Offline Loading
  • Service Worker Life Cycles
  • Intercepting HTTP Request
  • Using Progressive Web App in React Ecosystem
  • Caching the network request calls
View Curriculum
Requirements
  • Basics of React
  • Basics Of Javascript
Description

Have you ever thought about building web application that works offline? A web application that can be added to your smartphone’s screen? A web application that can send you push notifications on the fly? Web application that feels like Native mobile application? Yes, this is what we call as “Progressive Web Applications”.

In this course, we are going to build 2 applications, that will teach you the fundamentals and techniques behind building a Progressive Web Application. Yes, we are going to use React for the same! We will be using the latest React create-app for building our projects. All these projects are started from scratch!

Note that, the course is not for learning React, but using React to build Progressive web application. Fundamentals of React and Javascript is required.  By the end of this course, you will be confident enough to understand the key concepts behind Progressive Web Application:

  1. Service Worker
  2. Application Shell Architecture
  3. Offline/Online Notifications
  4. Add to “HomeScreen”
  5. Caching & Offline loading
  6. Push Notification
  7. and much more!

So, what are you waiting for? Sign up today and learn the cutting-edge technology. 

Who is the target audience?
  • Who wants to learn Progressive Web App
  • Building for Offline Web Application
  • Understanding Service Workers
Students Who Viewed This Course Also Viewed
Curriculum For This Course
38 Lectures
02:19:21
+
Understanding Progressive Web Applications
4 Lectures 19:44

This lecture introduces you the concept of Progressive web application, by showcasing an example of Flipkart.

Preview 05:36

A simple example to show how one could create a service worker. 

Understanding Service Worker
08:22

Talks about how service worker life cycle happens

Life Cycle of Service Worker
04:08

Recap on this particular section

Preview 01:38
+
Bootstrap React Project
4 Lectures 16:10

Side Note: Why not a starter kit?
05:00


Understanding registerServiceWorker.js file
01:39
+
Application Shell Architecture
8 Lectures 26:43

In this lecture, we will write our service worker which will fit into our react project.

Our first Real Service Worker
04:10

In this lecture we will understand what our application is all about.

Understanding our application
01:49

In this lecture, we will design the layout of our application using react material. 

Designing the Layout of our application
06:12

In this lecture, we will analyze the network calls of our application.

Analyzing The Network Calls
01:23

In this lecture, we are going to make use of the cache api to cache our minimal layout files. 

Caching the layout files
05:33

In this lecture, we will intercept the network calls to return our files from caches. 

Intercepting the network calls
04:18

In this lecture, we will reveal what is Application Shell Architecture.

What is Application Shell Architecture?
01:25

In this lecture, we will see how Uber uses application shell architecture for their web application. 

Real World Example of AS
01:53
+
Single Page Application and React Router.
7 Lectures 25:40

General introduction to SPA.

General Intro To SPA
04:18

In this lecture, we will set up our react router. 

Setting up React Router
06:31

We will talk about how to close the drawer on onClick event.

Closing the Side Navigation Automatically
02:29

In this lecture, we will talk about "Update on Reload"

Side Note: Why we are using Incognito Tab?
03:01

Creating Tech Product Home Page
06:09

Exercise - 1

Exercise 1
00:04

General introduction to the product hunt API

General Introduction to Product Hunt APIs
03:08
+
Building Our Dynamic Content
3 Lectures 14:32

In this lecture, we will be using the fetch polyfill to fire ajax calls.

Firing Ajax call using fetch
07:09

We will display the data coming from the server to the UI.

Displaying the data onto the UI
04:03

We will add a simple loading icon for our web application. 

Adding loading Screen
03:20
+
Making The Dynamic Content Work Offline
6 Lectures 23:25

In this lecture we will discuss on how to store the dynamic content to the local storage

Saving the state into local storage
06:39

We will improve our application look and feel by using React Material components.

Improving the look and feel.
06:03

In this lecture, we will a technique to cache the images dynamically.

Caching the images dynamically
06:19

In this lecture we will implement the code for offline and online listeners.

Offline/Online Pop-Up Notifications
03:28

Exercise 2
00:06

Third Exercise details.

Exercise 3
00:50
+
Add To Home Screen
6 Lectures 13:06

In this lecture, we will discuss why we need an android emulator. 

Setting up Android VM
02:08

In this lecture, we will discuss how to build our project in production mode.

Doing the production build.
02:55

In this lecture, we will discuss about web application manifest

Web App Manifest JSON
05:39

In this lecture, we will be changing our icon.

Changing The Icon
02:20

Upcoming
00:02

Source Code Link
00:01
About the Instructor
Anto Aravinth
4.0 Average rating
150 Reviews
3,282 Students
4 Courses
Software Developer & Passionate Teacher

Hi this is Anto. Well, I have around 3+ years Experience in Software development. During my software development there will be lot of learnings for me. I want my learnings to be shared with others! There are tough times when I learn the things. I want it to be easily sharable to others.

I still remember my teacher saying "If you want to understand one thing, you need to teach it". And thats exactly I have been doing in my company and also over here! I'm mostly into web development using Java and front-end technologies. I'm a teacher at my office and over here as well! :)

Apart from work, I'm an open source contributor to Groovy, Selenium and React Js. Member of JUG Chennai!