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!
You can download the starter files here!
What will I know once I finish this tutorial?
- How to:
- deploy your project on Firebase
- make your app installable
- customize the splash screen and short icon
- add offline mode support to your app
- add support for iOS devices
- decrease load time
- audit your app performance & what is a Lighthouse
See what the application we will build together looks like! Live Example
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:
Install MDB CLI
It's the fastest way to create and host MDB projects