目錄(271章)
倒序
- coverpage
- 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
- 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
- React Hacker News
- Notes
- 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 更新時間:2021-07-08 09:37:01
推薦閱讀
- Rust實戰(zhàn)
- PyTorch自動駕駛視覺感知算法實戰(zhàn)
- SQL Server 2012數(shù)據(jù)庫技術(shù)及應用(微課版·第5版)
- The Complete Coding Interview Guide in Java
- Lighttpd源碼分析
- Python Data Structures and Algorithms
- 速學Python:程序設(shè)計從入門到進階
- 智能手機APP UI設(shè)計與應用任務(wù)教程
- INSTANT Adobe Edge Inspect Starter
- Xcode 6 Essentials
- Qlik Sense? Cookbook
- 深入淺出 HTTPS:從原理到實戰(zhàn)
- Python面向?qū)ο缶幊蹋ǖ?版)
- SQL Server 2014數(shù)據(jù)庫設(shè)計與開發(fā)教程(微課版)
- Python深度學習:基于PyTorch
- Jenkins 2.x Continuous Integration Cookbook(Third Edition)
- Mastering PyCharm
- Cocos2D權(quán)威指南
- Visual Basic 程序設(shè)計實用教程
- Scratch 3.0 趣圖探秘
- 青少年學三維圖形化編程
- Building Large-Scale Web Applications with Angular
- Java程序設(shè)計實戰(zhàn)案例教程
- 編程競賽寶典:C++語言和算法入門
- Blender Cycles:Materials and Textures Cookbook(Third Edition)
- INSTANT Spring Tool Suite
- Java 9 Regular Expressions
- Web技術(shù)應用基礎(chǔ)
- Modern Web Development with ASP.NET Core 3
- Three.js Cookbook