Building Progressive Web Applications

The beauty of building a modern web application is being able to take advantage of functionalities such as a Progressive Web App (PWA)! But they can be a little complicated to work with. As always, the Create React App project makes a lot of this easier for us, but this time carries some significant caveats that we'll need to think about.

In this chapter, we will cover the following topics:

• Examining PWAs and what they add
• Learning how to configure our Create React App project into a custom PWA
• Modifying and tuning the manifest file
• Exploring service workers, their life cycle, and how to use them with Create React App
• Exploring the caveats of using Create React App to build a PWA

Understanding and building PWAs

PWAs are one of those features that sounds amazingly cool but it's surprisingly complicated to understand the when, why, and how of building them. Let's spend a little bit of time demystifying them and helping you understand why they are such a powerful (and appreciated) inclusion in our Create React App projects and how we can get started using them!

What is a PWA?

Let's talk a little bit about what a PWA is, because there is unfortunately a lot of misinformation and confusion about precisely what a PWA does!

Here's a short, maybe slightly unhelpful, version of what a PWA does; it's simply a website that does the following:

• Only uses HTTPS
• Adds a JSON manifest (a...

Summary

Hopefully, we've explored at least enough of Progressive Web Apps that they have at least been partially demystified! A lot of the confusion and trouble with building PWAs tends to stem from the fact that there's not always a good starting point for building one. To get the value out of PWAs, you have to have a PWA, but to build a PWA you typically need to demonstrate the value of them! What a whirlwind!

Create React App limits us a little bit in how we can implement Service Workers, which admittedly limits the functionality and usefulness of our PWA. It doesn't hamstring us, by any means, but doing fun tricks with pre-caching networks and API responses, and loading up our application instantly, even if the browser doing the loading is offline in the first place. That being said, it's like many other things in Create React App: an amazing stepping...