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.

All you require is a computer that can run Node.js (https://nodejs.org/en/download/), a text editor for writing code, and the latest version of the Chrome browser. If you want to test your application on mobile, you'll also need an Android or iOS phone.

This book is for JavaScript developers who want to develop high-performance Web User interfaces. This book requires basic knowledge of HTML, CSS and JavaScript.

In this book, you will find a number of text styles that distinguish between different kinds of information. Here are some examples of these styles and an explanation of their meaning. Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: Inside App.js, we first import the LoginContainer.

A block of code is set as follows:

import React, { Component } from 'react';
import LoginContainer from './LoginContainer';
import './app.css';


class App extends Component {
  render() {
    return <LoginContainer />
  }
}

export default App;

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

if (module.hot) {
  module.hot.accept('./components/App', () => {
    const NextApp = require('./components/App').default;
    ReactDOM.render(
      <App/>,
      document.getElementById('root')
    );
  });
}

Any command-line input or output is written as follows:

 yarn add css-loader style-loader

New terms and important words are shown in bold. Words that you see on the screen, for example, in menus or dialog boxes, appear in the text like this: Flip back to the app, and you should see the Hello from LoginContainer of our new component.

Feedback from our readers is always welcome. Let us know what you think about this book-what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of. To send us general feedback, simply email [email protected], and mention the book's title in the subject of your message. If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide at www.packtpub.com/authors.

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.