万本电子书0元读

万本电子书0元读

顶部广告

Progressive Web Apps with React电子书

售       价:¥

52人正在读 | 0人评论 9.8

作       者:Scott Domes

出  版  社:Packt Publishing

出版时间:2017-10-24

字       数:32.3万

所属分类: 进口书 > 外文原版书 > 电脑/网络

温馨提示:此类商品不支持退换货,不支持下载打印

为你推荐

  • 读书简介
  • 目录
  • 累计评论(0条)
  • 读书简介
  • 目录
  • 累计评论(0条)
Enhance the performance of your applications by using React and adding the Progressive web app capability to it About This Book ? Bring the best of mobile sites and native apps to your users with progressive web applications ? Create fast, reliable, and engaging PWAs with React and Firebase ? Create high-performance applications even with low connection speeds by leveraging modern web technologies Who This Book Is For This book is for Java* Developers who want to develop high performance Web User Interfaces. This book requires basic knowledge of HTML, CSS and JavaScript. What You Will Learn ? Set up Webpack configuration, as well as get the development server running ? Learn basic Firebase configuration and deployment ? Create routes, manage multiple components, and learn how to use React Router v4 to manage the flow of data ? Use React life cycle methods to load data ? Add a service worker to the app and learn how it works ? Use a service worker to send Push Notifications ? Configure Webpack to split up the JavaScript bundle and lazy load component files ? Learn how to use the web Cache API to use your app offline ? Audit PWAs with Google's Lighthouse tool In Detail For years, the speed and power of web apps has lagged behind native applications. Progressive Web Apps (PWAs) aim to solve this by bridging the gap between the web apps and native apps, delivering a host of exciting features. Simultaneously, React is fast becoming the go-to solution for building modern web UIs, combining ease of development with performance and capability. Using React alongside PWA technology will make it easy for you to build a fast, beautiful, and functional web app. After an introduction and brief overview of the goals of PWAs, the book moves on to setting up the application structure. From there, it covers the Webpack build process and the process of creating React components. You'll learn how to set up the backend database and authentication solution to communicate with Firebase and how to work with React Router. Next, you will create and configure your web app manifest, making your PWA installable on mobile devices. Then you'll get introduced to service workers and see how they work as we configure the app to send push notifications using Firebase Cloud Messaging. We'll also explore the App Shell pattern, a key concept in PWAs and look at its advantages regarding efficient performance. Finally, you'll learn how to add offline capabilities to the app with caching and confirm your progress by auditing your PWA with Lighthouse. Also, you'll discover helper libraries and shortcuts that will help you save time and understand the future of PWA development. Style and approach This is a step-by-step book, wherein, you will use the React framework to create a complete progressive web app.
目录展开

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

累计评论(0条) 0个书友正在讨论这本书 发表评论

发表评论

发表评论,分享你的想法吧!

买过这本书的人还买过

读了这本书的人还在读

回顶部