React PWA Introduction

Author: Anna Morawska

-

React Progressive Web App Tutorial

Recently, Google, one of the biggest proponents of PWA, released Chrome 72 for Android, which supports the long-awaited TWA (Trusted Web Activity) API. It means that from now on, PWA can be distributed via the Google Play Store.

Thanks to Google’s strong advocacy of PWA, it is safe to say that PWA is the future of web applications. In this tutorial series, we are going to explain the core concepts involved in creating PWA Apps with React.

What do I need to know to start this course?

This tutorial requires basic knowledge of React. If you are new to React, please check out our tutorial

It is short, simple and also free.

I have the basics, how shall I start the course?

Node Package Manager and create-react-app package should be installed on your machine. If you have worked with React we can assume, that everything is ready, so, you can start the course directly!

Do I need anything else?

You will need a text editor. We recommend Visual Studio Code.

Is this tutorial really free?

Yes, it's completely free.

What will I build?

In this tutorial, we will transform our Agenda App, which we created from scratch in our basic tutorial into a Progressive Web App. Lesson after lesson, we are going to add new functionalities - in fact, this is the essence of PWA - we aim to enhance user's experience progressively. You will be able to successfully apply all the techniques we are going to learn to in your own project. In fact any web app or website can be converted into PWA, so I encourage you to use what you will learn with your React Appa, trust me, this will be a fun challenge!

Add new event preview

You can download the starter files here!

What will I know once I finish this tutorial?

    How to:
  1. deploy your project on Firebase
  2. make your app installable
  3. customize the splash screen and short icon
  4. add offline mode support to your app
  5. add support for iOS devices
  6. decrease load time
  7. audit your app performance & what is a Lighthouse

See what the application we will build together looks like! Live Example

Note!

Within this tutorial we are using Material Design for Bootstrap, you can download it for free from here.

Visit our official 5min-quickstart guide to go through the MDB React installation process.

If you notice an error, or something below is not clear to you - we invite you to visit our support forum.



Previous lesson Next lesson

Spread the word:
Do you need help? Use our support forum

About the author