Book Image

Progressive Web Apps with React

By : Scott Domes
Book Image

Progressive Web Apps with React

By: Scott Domes

Overview of this book

For years, the speed and power of web apps has lagged behind native applications. Progressive Web Apps (PWAs) aim to solve this by bridging the gap between the web apps and native apps, delivering a host of exciting features. Simultaneously, React is fast becoming the go-to solution for building modern web UIs, combining ease of development with performance and capability. Using React alongside PWA technology will make it easy for you to build a fast, beautiful, and functional web app. After an introduction and brief overview of the goals of PWAs, the book moves on to setting up the application structure. From there, it covers the Webpack build process and the process of creating React components. You'll learn how to set up the backend database and authentication solution to communicate with Firebase and how to work with React Router. Next, you will create and configure your web app manifest, making your PWA installable on mobile devices. Then you'll get introduced to service workers and see how they work as we configure the app to send push notifications using Firebase Cloud Messaging. We'll also explore the App Shell pattern, a key concept in PWAs and look at its advantages regarding efficient performance. Finally, you'll learn how to add of?ine capabilities to the app with caching and confirm your progress by auditing your PWA with Lighthouse. Also, you'll discover helper libraries and shortcuts that will help you save time and understand the future of PWA development.
Table of Contents (21 chapters)
Title Page
Credits
About the Author
About the Reviewer
www.PacktPub.com
Customer Feedback
Preface

Setting the scene


One of your friends calls you on the phone, bursting with excitement about his latest start-up idea (you know the one). You patiently listen to his description, but respectfully decline to be a part of it. He's disappointed, but understands and promises to keep you updated on the project details. You murmur your assent.

A few months later, he meets you at your work and announces that he has found a group of serious investors, and he needs you to help him build the software he promised them. You again decline, but when discussing compensation, he mentions a number that you can't refuse. A week later, you're on a plane to San Francisco.

In front of the investors (who are, to your surprise, a rapt audience), your friend guides you through the basics of the application. In between the buzzwords ("mass interconnection" and "global community"), you gather just enough to summarize the application in a sentence.

"So, it's a chat room… for everyone in the world… all at once…"

Your friend smiles. "Yes."

You're bewildered by the image of a million strangers all talking at once on the same application, in the same room, but the investors break into applause. As you head for the door, your friend again announces how they'd like to compensate you… citing an even higher number than before. You sit down.

The problem

"The problem," your friend explains, "is that this chat room has to be for everyone."

"Global community," you say with a knowing nod.

"Exactly. Everyone. Even if they have terrible internet in some hut in the desert. They should be included."

"Mass interconnection," you add.

"Exactly! So it needs to be fast. And lightweight. And beautiful. And dynamic."

"So everyone will be talking at once? Won’t that be-"

"A worldwide collective, yes."

The other problem

"The other problem," your friend declares, "is that our users will mostly be on their phones. On the go."

"So you want to do an iOS and Android app?"

Your friend waves his hand. "No, no. No one downloads apps anymore. Especially in developing countries; that takes too much bandwidth. Remember, worldwide collective."

"So a web app."

"Yes. A web collective."

Despite your best instincts, the project intrigues you. How do you craft a web application to be as fast as possible? How do you make it work under all network conditions? How do you make a chat application with all the conveniences of a native app, but for the web?

You sigh and shake his hand. "Let's get to work."