Progressive web apps with React : create lightning fast web apps with native power using React and firebase / Scott Domes.

Format:

Book

Author/Creator:

Domes, Scott, author.

Language:

English

Subjects (All):

React (Computer program).

JavaScript (Computer program language).

Web applications--Development.

Web applications.

Physical Description:

1 online resource (1 volume) : illustrations

Edition:

1st edition

Place of Publication:

Birmingham, England ; Mumbai, [India] : Packt, 2017.

System Details:

text file

Summary:

Enhance the performance of your applications by using React and adding the Progressive web app capability to it About This Book Bring the best of mobile sites and native apps to your users with progressive web applications Create fast, reliable, and engaging PWAs with React and Firebase Create high-performance applications even with low connection speeds by leveraging modern web technologies Who This Book Is For 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. What You Will Learn Set up Webpack configuration, as well as get the development server running Learn basic Firebase configuration and deployment Create routes, manage multiple components, and learn how to use React Router v4 to manage the flow of data Use React life cycle methods to load data Add a service worker to the app and learn how it works Use a service worker to send Push Notifications Configure Webpack to split up the JavaScript bundle and lazy load component files Learn how to use the web Cache API to use your app offline Audit PWAs with Google's Lighthouse tool In Detail 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 offline capabilities to the app with caching and confirm yo...

Contents:

Cover

Title Page

Copyright

Credits

About the Author

About the Reviewer

www.PacktPub.com

Customer Feedback

Table of Contents

Preface

Chapter 1: Creating Our App Structure

Setting the scene

The problem

The other problem

Beginning work

Why Progressive Web Apps?

Why React?

A rose by any other name

User stories

Application challenges

Instant loading

Push notifications

Offline access

Mobile-first design

Progressive enhancement

Let's get going

Our app skeleton

CSS and assets

Meta tags and favicons

What is npm?

Node setup

The dark side of npm

Project initiation

Installing React

Using React

Welcome to ReactDOM

Summary

Chapter 2: Getting Started with Webpack

Our project structure

Welcome to Webpack

Bundling files

Moving our React

Shortcuts

Our Dev server

Webpack loaders

Our first ES6

Splitting up our app

Hot reloading

Building for production

Creating a custom script

Making an asset manifest

Chapter 3: Our App's Login Page

What is a React component?

Controversies and Separation of Concerns

Class components versus functional components

Our second component

State in React

Reusing components

Chapter 4: Easy Backend Setup With Firebase

What is Firebase?

Firebase gotchas

Setting up

Hiding our API key

Deploying Firebase

Authentication with Firebase

What is a promise?

Back to authentication

Code cleanup

Signing up

Saving our user

Event listeners

Lifecycle methods

Chapter 5: Routing with React

The plan

Pages on pages

The React Router difference

Our ChatContainer

Installing React Router

Our BrowserRouter

Our first two Routes

Redirecting on login

Logging out

Detour - higher order components.

Our third Route

Chapter 6: Completing Our App

User stories progress

ChatContainer skeleton

Managing data flow

Creating a message

Sending a message to Firebase

Our message data

Loading data from Firebase

Displaying our messages

Message display improvements

Multiple users

Batching user messages

Scrolling down

React refs

Loading indicator

The Profile page

Chapter 7: Adding a Service Worker

What is a service worker?

The service worker life cycle

Registering our first service worker

Checking for browser support

Listening for the page load

Registering the service worker

Logging out the result

Experiencing the service worker life cycle

Adding Firebase to our service worker

Naming our service worker

Chapter 8: Using a Service Worker to Send Push Notifications

Requesting permission

Tracking tokens

Attaching a user to the token

Changing the user inside NotificationResource

Creating a new token

Updating an existing token

Sending push notifications

Writing our Cloud function

Sending to the tokens

Testing our push notifications

Debugging push notifications

Checking the Cloud Functions logs

Checking the Service Worker

Checking the tokens

Chapter 9: Making Our App Installable with a Manifest

What is an app manifest?

Browser support

Making our app installable - Android

Manifest properties

Other properties

Linking our manifest

Making our app installable - iOS

App install banners and you

Delaying the app install banner

Listening for the event

Chapter 10: The App Shell

What is progressive enhancement?

The RAIL model

Load

Idle

Animation

Response

Timeline

Measuring using the timeline

The Summary tab

Network requests

Waterfall.

Screenshots

PageSpeed Insights

The app shell pattern

Moving shell HTML out of React

Moving CSS out of React

Moving the loading indicator

Chapter 11: Chunking JavaScript to Optimize Performance with Webpack

The PRPL pattern

Push

Render

Pre-cache

Lazy-load

What is code splitting?

Webpack configuration

Babel stage 1

Conditional imports

Higher-order components

AsyncComponent

Route splitting

Lazy loading

Chapter 12: Ready to Cache

What is caching?

The importance of caching

The Cache API

Methods

The asset manifest

Setting up our cache

The install event

Opening up the cache

Fetching the asset manifest

Parsing the JSON

Adding the relevant URLs to the cache

The fetch event

The activate event

Grab the list of cache names

Loop over them

Testing our cache

Chapter 13: Auditing Our App

What is Lighthouse?

The criteria

The Audits tab

Our first audit

Evaluating the readout

Using the Lighthouse CLI

Serving our build folder

Using Lighthouse to assess the served page

Logging the results

Chapter 14: Conclusion and Next Steps

Next steps

Learning resources

Case studies

Building the Google I/O 2016 Progressive Web App

AliExpress case study

eXtra Electronics case study

Jumia case study

Konga case study

SUUMO case study

Example applications

PWA.rocks

Flipboard

React Hacker News

Notes

Twitter

2048 Puzzle

Articles to read

Native apps are doomed

A BIG list of Progressive Web App tips &amp

amp

tricks

Testing service workers

Twitter Lite and High Performance React Progressive Web Apps at Scale

Why are App Install Banners Still a thing?

A Progressive Web Application with Vue JS.

Transforming an existing Angular application into a Progressive Web App

Progressing the Web

Designed Degradations - UX Patterns for Hostile Environments

Instant Loading Web Apps With An Application Shell Architecture

Trick users into thinking your site's faster than it is

Apple's refusal to support Progressive Web Apps is a detriment to the future of the web

Tools

Workbox

Sw-precache

Sw-toolbox

Offline-plugin

Manifest-json

Serviceworker-rails

Sw-offline-google-analytics

Dynamic Service Workers (DSW)

UpUp

Generator-pwa

Progressive-webapp-config

Stretch goals

Switch to Preact

Show online status

Show when typing

Include file upload

Create chat rooms

Interactive without React

Building your own backend

Closing words

Index.

Notes:

Includes index.

Description based on online resource; title from PDF title page (ebrary, viewed November 24, 2017).

ISBN:

9781788296137

1788296133

OCLC:

1012132657