Log In
Or create an account ->
Imperial Library
Home
About
News
Upload
Forum
Help
Login/SignUp
Index
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
← Prev
Back
Next →
← Prev
Back
Next →