Progressive Web Apps with React: Create lightning fast web apps with native power using React and Firebase 9781788296137, 1788296133

Table of 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
Summary
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
Summary
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
Summary
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
Summary
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
Summary
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
Summary
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
Summary
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
Summary
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
Summary
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
Summary
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
Summary
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
Summary
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 & 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
Index

Polecaj historie

Progressive Web Apps with React: Create lightning fast web apps with native power using React and Firebase 9781788296137, 1788296133

Enhance the performance of your applications by using React and adding the Progressive web app capability to it About Th

111 22 11MB Read more

Progressive Web Apps with React: Create lightning fast web apps with native power using React and Firebase. Code 9781788296137, 1788296133

Code. Enhance the performance of your applications by using React and adding the Progressive web app capability to it Ab

1,040 169 5MB Read more

Progressive web apps with React create lightning fast web apps with native power using React and Firebase 9781788297554, 9781788296137, 1788296133

1,543 341 6MB Read more

Progressive web apps with React create lightning fast web apps with native power using React and Firebase 9781788297554, 1788297555, 9781788296137, 1788296133

602 125 20MB Read more

Lightning-Fast Mobile App Development with Galio: Build stylish cross-platform mobile apps with Galio and React Native 9781801073165, 1801073163

Leverage the power of Galio and React Native to create beautifully designed, practical, and exciting mobile apps Key Fea

2,516 119 4MB Read more

React Quickly: Painless Web Apps with React, JSX, Redux and GraphQL [1 ed.] 1617293342, 9781617293344

2,246 423 6MB Read more

React: Cross-Platform Application Development with React Native : Build 4 Real-World Apps with React Native [1 ed.] 9781789139600

Harness the power of React Native to build 4 real-world apps Key Features Build quirky and fun projects from scratch and

311 110 4MB Read more

Fullstack React Native: Create beautiful mobile apps with JavaScript and React Native. Code [5 ed.] 1728995558, 9781728995557

Code Master React Native with Fullstack React Native The up-to-date, in-depth, complete guide to React Native. Create

8,845 2,167 9MB Read more

Fullstack React Native: Create beautiful mobile apps with JavaScript and React Native [5 ed.] 1728995558, 9781728995557

Master React Native with Fullstack React Native The up-to-date, in-depth, complete guide to React Native. Create beauti

9,786 3,076 52MB Read more

Progressive Web Apps 9781617294587

Progressive Web Apps teaches you PWA design and the skills you need to build fast, reliable websites by taking you step-

164 103 4MB Read more