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

Online resource; title from title page (Safari, viewed November 15, 2017).

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.

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

eBooks on EBSCOhost EBSCO eBook Subscription Academic Collection - Worldwide