Progressive web apps with React : create lightning fast web apps with native power using React and Firebase /

Mostrar otras versiones (1)

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

Detalles Bibliográficos
Clasificación:Libro Electrónico
Autor principal: Domes, Scott (Autor)
Formato: Electrónico eBook
Idioma:Inglés
Publicado: Birmingham, UK : Packt Publishing, 2017.
Temas:
React (Computer program)
Web applications > Development.
JavaScript (Computer program language)
Applications Web > Développement.
JavaScript (Langage de programmation)
COMPUTERS > Web > Web Services & APIs.
COMPUTERS > Web > General.
COMPUTERS > Web > Design.
Acceso en línea:Texto completo
Texto completo
Tabla de Contenidos:
  • 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.

Ejemplares similares