Progressive Web Apps with React电子书

Title Page

Copyright

Progressive Web Apps with React

Credits

About the Author

About the Reviewer

www.PacktPub.com

Why subscribe?

Customer Feedback

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

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

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

Summary

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

Summary

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

Summary

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

Summary

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

Summary

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

Summary

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

Summary

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

Summary

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

Summary

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

Summary

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

Summary

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

Summary

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 & 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

Summary