Book Image

Progressive Web Apps with React

By : Domes
Book Image

Progressive Web Apps with React

By: 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 (15 chapters)

What this book covers

Chapter 1, Creating Our App Structure, gives a brief overview of what exactly you will be learning to build-- a real-time chat application with push notifications and offline support. You will get to learn about the challenges that such an app presents, and get a brief overview of the technologies that will be discussed in this book. By the end of the chapter, you will set up the application structure of a chat app, with HTML and CSS.

Chapter 2, Getting Started with Webpack, says that before you write any React code, you need to set up the webpack build process. In this chapter, you will be introduced to webpack; you will learn to install the package and set up some basic configuration as well as get the development server running. This chapter will get you ready to jump into React.

Chapter 3,  Our App's Login Page, introduces you to React time! In this chapter, you will learn to write the first two components: an App wrapper to contain the application and a LoginContainer. Learn about rendering with ReactDOM and JSX, and write a basic form to allow the users to log in. By the end of this chapter, you will be familiar and comfortable with the React syntax.

Chapter 4, Easy Backend Setup With Firebase, informs that the login form looks great, but is lacking actual functionality. To move forward, you will need a backend database and authentication solution to communicate with it. This chapter will introduce you to Firebase by Google. Set up the application on the Firebase console, and then program the login and signup functionality for the form.

Chapter 5, Routing with React, lets you know that once the user logs in, you want to redirect them to the main chat view. Therefore, in this chapter, you will learn to build that main view and then set up the React Router that allows the users to move between the pages. Lastly, learn to add a third view the individual user view--and explore parameter matching in URLs.

Chapter 6, Completing Our App, takes you through the last step in building the basic application, adding functionality to the chat and user views. You will learn to write and read data from Firebase, taking advantage of React life cycle methods to do so. Once that’s done, your web application will be complete, but it’s not quite progressive yet!

Chapter 7, Adding a Service Worker, covers service workers and how they work. Here, you'll understand how to register a custom service worker and learn about its life cycle, and then hook into the default Firebase messaging service worker.

Chapter 8, Using a Service Worker to Send Push Notifications, teaches you to configure the app now that our service worker is ready, to be able to send the push notifications. You will use Firebase Cloud Messaging to manage sending these notifications, and add customization to control how and when they are sent on desktop and mobile.

Chapter 9, Making Our App Installable with a Manifest, teaches that a manifest is a JSON file that allows users to save your app to their home screen. You will learn to create the manifest and understand the best practices as well as iOS-specific considerations. You will also learn to customize your splash screen and icons.

Chapter 10, The App Shell, puts across the point of the App Shell pattern being a key concept in PWAs, but what advantages does it bring? You will be introduced to both the shell and the RAIL system of progressive enhancement, and then move some of you app's layout out of React for optimal rendering.

Chapter 11, Chunking JavaScript to Optimize Performance with Webpack, explores the PRPL pattern, its goals and methods, as well as an overview of how to achieve it in your app. Then, you will dive in, splitting up the JavaScript into chunks based on routes, and then lazy loading the secondary routes.

Chapter 12, Ready to Cache, walks through how you can leverage the service worker to achieve offline capability, by understanding the new Cache API, and how to use it with your service worker to cache the JavaScript chunks.

Chapter 13, Auditing Our App, says it's now time to check our work! In this chapter, you will be introduced to Lighthouse and understand how to audit PWAs with Lighthouse.

Chapter 14, Conclusion and Next Steps, Your first PWA is complete! In the development process, you built most of the PWA infrastructure manually. In this chapter, you will get to learn about the helper libraries and shortcuts to save time, and you'll also explore the future of PWA development. Additionally, you will come across suggestions about the future project ideas and improvements that can be made to your chat app, as an extra challenge.