第1页 / 共429页
第2页 / 共429页
第3页 / 共429页
第4页 / 共429页
第5页 / 共429页
第6页 / 共429页
第7页 / 共429页
第8页 / 共429页
Building Progressive Web Apps_ Bringing the Power of Native to t....pdf
Preface
Who This Book Is For
What This Book Covers
Conventions Used in This Book
Using Code Examples
O’Reilly Safari
How to Contact Us
Acknowledgments
1. Introducing Progressive Web Apps
The Web Strikes Back
The Current Mobile Landscape
The Progressive Web App Advantage
The Tab, the Web, and the Service Worker
2. Your First Service Worker
Setting Up Our Sample Project
Welcome to the Gotham Imperial Hotel
Getting to Know the Code
The Current Offline Experience
Creating Your First Service Worker
What Is Progressive Enhancement?
HTTPS and Service Workers
Fetching Content from the Web
Capturing Offline Requests
Creating HTML Responses
Understanding Service Worker Scope
Summary
3. The CacheStorage API
What CacheStorage Is and, More Importantly, What It Is Not
Deciding When to Cache
Storing Requests in CacheStorage
Retrieving Requests from CacheStorage
Caching in Our Sample App
Matching the Right Response to Each Request
HTTP Caching and HTTP Headers
Summary
4. Service Worker Lifecycle and Cache Management
The Service Worker Lifecycle
The Service Worker Lifetime and the Importance of waitUntil
Updating a Service Worker
Why We Need to Manage the Cache
Cache Management and Clearing Old Caches
Reusing Cached Responses
Configuring the Server to Serve the Right Caching Headers
Developer Tools
The Console
Have You Tried Turning It Off and On Again?
Inspect CacheStorage and IndexedDB
Network Throttling and Simulating Offline Conditions
Lighthouse
Summary
5. Embracing Offline-First
What Is Offline-First?
Common Caching Patterns
Mix and Match: Creating New Patterns
Planning Our Caching Strategy
Implementing Our Caching Strategy
Application Shell Architecture
Including Content in the Initial Render
Implementing App Shell
Achievement Unlocked
Summary
6. Storing Data Locally with IndexedDB
What Is IndexedDB
Using IndexedDB
Opening a Database Connection
Database Versioning/Modifying an Object Store
Adding Data to an Object Store
Reading Data from an Object Store
IndexedDB Version Management
Reading Objects With a Cursor
Creating Indices
Reading Data Using an Index
Limiting a Cursor’s Range
Setting a Cursor’s Direction
Updating Objects in an Object Store
Deleting Objects from an Object Store
Deleting All Objects from an Object Store
Handling Bubbling IndexedDB Errors
IndexedDB for SQL Ninjas
IndexedDB in Practice
The Database That Was Promised
IndexedDB Housekeeping
Using IndexedDB in the Service Worker
The IndexedDB Ecosystem
PouchDB
localForage
Dexie.js
IndexedDB Promised
Summary
7. Ensuring Offline Functionality with Background Sync
How Background Sync Works
The SyncManager
Accessing SyncManager
Registering Events
Sync Events
Event Tags
Getting a List of Registered Sync Events
Last Chances
Passing Data to the Sync Event
Maintaining an Action Queue in IndexedDB
Maintaining a Queue of Requests in IndexedDB
Passing Data in the Sync Event Tag
Adding Background Sync to Our App
Summary
8. Service Worker to Page Communication with Post Messages
Window to Service Worker Messaging
Service Worker to All Open Windows Messaging
Service Worker to Specific Window Messaging
Keeping the Line of Communication Open with a MessageChannel
Communicating Between Windows
Posting Messages from a Sync Event to the Page
Summary
9. Grabbing Homescreen Real Estate with Installable Web Apps
Installable Web Apps
How Browsers Decide When to Show an App Install Banner
Anatomy of a Web App Manifest
Backwards, Sideways, and Future Compatibility
Summary
10. Reach Out with Push Notifications
Life of a Pushed Notification
The Notification API
The Push API
Push + Notification
Creating Notifications
Requesting Permission for Notifications
Showing Notifications
Adding Notification Support to Gotham Imperial Hotel
Subscribing a User to Push Events
Generating Public and Private VAPID Keys
Generating a GCM key
Creating a New Subscription
Subscribing Gotham Imperial Hotel Users to Push Messages
Sending Push Events from the Server
Listening for Push Events and Showing Notifications
Interrogating Notifications
Summary
11. Progressive Web App UX
Grace and Trust
Communicating State from the Service Worker
Communicating with Progressive UI KITT
Common Messages in Progressive Web Apps
Caching Complete
Page Cached
Action Failed But Will Complete When User Regains Connectivity
Notifications Enabled
Choosing the Right Words
Always Be Closing
Progressive Web App Design
Your Design Should Reflect Changing Conditions
Your Design Should Fit Its Environment
Your Design Should Adapt to the Particularities of Each Medium
Your Design Should Instill Confidence and Inform the User
Your Design Should Help the User and Your Business Achieve Their Goals
Taking Charge of the Install Prompt
Measuring and Aiming for Performance with RAIL
Summary
12. What’s Next for PWAs
Accepting Payments with the Payment Request API
User Management with the Credential Management API
Real-Time Graphics with WebGL
Futuristic APIs with Speech Recognition
Virtual Reality in the Browser with WebVR
Easy Sharing to and from Your App
Slick Media Playing UIs
The Next Great Era
A. Service Workers: A Great Opportunity to Adopt ES2015
Template Literals
Arrow Functions
Object Destructuring
More ES2015
B. Full-Page Interstitials or: How I Learned to Hate the Door Slam
C. CORS Versus NO-CORS
Index
Building Progressive Web Apps
Bringing the Power of Native to the Browser
Tal Ater
Building Progressive Web Apps
by Tal Ater
Copyright © 2017 Tal Ater. All rights reserved.
Printed in the United States of America.
Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol,
CA 95472.
O’Reilly books may be purchased for educational, business, or sales promotional
use. Online editions are also available for most titles (http://oreilly.com/safari). For
more information, contact our corporate/institutional sales department: 800-998-
9938 or corporate@oreilly.com.
Editors: Allyson MacDonald and Jeff Bleiel
Production Editor: Colleen Cole
Copyeditor: Sonia Saruba
Proofreader: Amanda Kersey
Indexer: Ellen Troutman
Interior Designer: David Futato
Cover Designer: Karen Montgomery
Illustrator: Rebecca Demarest
September 2017: First Edition
Revision History for the First Edition
2017-08-31: First Release
See http://oreilly.com/catalog/errata.csp?isbn=9781491961650 for release details.
The O’Reilly logo is a registered trademark of O’Reilly Media, Inc. Building
Progressive Web Apps, the cover image, and related trade dress are trademarks of
O’Reilly Media, Inc.
While the publisher and the author have used good faith efforts to ensure that the
information and instructions contained in this work are accurate, the publisher and
the author disclaim all responsibility for errors or omissions, including without
limitation responsibility for damages resulting from the use of or reliance on this
work. Use of the information and instructions contained in this work is at your own
risk. If any code samples or other technology this work contains or describes is
subject to open source licenses or the intellectual property rights of others, it is your
responsibility to ensure that your use thereof complies with such licenses and/or
rights.
978-1-491-96165-0
[LSI]
Dedication
To my two favorite ladies and their vacation hats.
Preface
Progressive web apps are an exciting new form of modern web apps. These apps
leverage the latest web capabilities to deliver an experience that combines the unique
features of native mobile apps with the advantages of the web.
This book will help you gain a thorough, practical understanding of modern
progressive web app development through hands-on experience.
You will learn how to build web apps that take advantage of features that have so far
been the exclusive domain of native apps. You will be able to reach out to your users
with push notifications, grab prime real estate on the user’s homescreen, speed up
your site significantly, and provide your users with a fully functional app, regardless
of their connection.
The book incorporates a real-world, hands-on approach to learning by taking an
existing website and chapter by chapter transforming it into a modern progressive
web app.
Who This Book Is For
This book is first and foremost intended for developers. If you are looking to
leverage your existing web development skills and learn how to build modern
progressive web apps, this is the book for you.
The book assumes you have at least a basic understanding of web development using
HTML and JavaScript. It does not assume any familiarity with relatively newer
additions to JavaScript such as ECMAScript 2015, promises, or ECMAScript 2017’s
async functions. If you are already familiar with these modern language constructs,
you should be able to skip (or quickly skim) the notes that explain them.
For people in non-technical roles, this book can help provide a familiarity and a
general understanding of the capabilities of modern progressive web apps. Many
chapters include case studies collected through interviews conducted with teams
behind some of the world’s most influential sites, including Twitter, The Washington
Post, Housing.com, and Lyft. Whether you are in a managerial position, a designer, a
product manager, or any other position that involves making decisions about native
or web apps, an understanding of what is possible today will help you be more
effective at your job.
What This Book Covers
As you read through this book, you will take a simple website for the fictional
Gotham Imperial Hotel and enhance it with service workers so that it loads almost
instantaneously (even on the slowest connections), making sure all of its features are
available even when your users are completely offline (including seeing their
reservations and even making new ones). You will learn how to let users add an icon
to launch your progressive web app from their phone’s homescreen. Finally, to
complete the native app-like experience, you will add push notifications allowing
you to reach out and reengage your users even after they have left your site.
This book also explores some of the important considerations when developing
progressive web apps. We will focus on gaining a practical understanding of these
concepts in a way that will help you be a more effective developer. Among other
things, we will look at helpful developer tools, security considerations, and
understanding the service worker lifecycle.
While most of the book focuses on hands-on learning, two chapters in particular
(Chapters 5 and 11) will get you thinking about the new capabilities offered by
progressive web apps as more than just a new set of tricks to apply to your apps.
Chapter 5 explores the philosophy of offline-first web apps, an approach to building
modern web apps that treat a loss of connectivity not as an error, but as an
eventuality we can plan for and handle with grace.
Chapter 11 explores some of the new UI challenges and opportunities presented by
progressive web apps. As such a game changer, progressive web apps defy the
expectations users have from the web. Some of these challenges include reinforcing
the user’s trust that her data won’t be lost when she is offline, informing her that the
content she is seeing may be a few hours old if she is offline, and letting her know
she can trust the app to send her a notification whenever anything important changes.
When handled properly, these can offer great opportunities to increase users’ trust in
your app, improve conversions, and gain a permanent place on their phones.
We end the book with a look at some of the upcoming technologies and browser
APIs that will allow us to take our progressive web apps even further.
相关推荐
2023年江西萍乡中考道德与法治真题及答案.doc
2012年重庆南川中考生物真题及答案.doc
2013年江西师范大学地理学综合及文艺理论基础考研真题.doc
2020年四川甘孜小升初语文真题及答案I卷.doc
2020年注册岩土工程师专业基础考试真题及答案.doc
2023-2024学年福建省厦门市九年级上学期数学月考试题及答案.doc
2021-2022学年辽宁省沈阳市大东区九年级上学期语文期末试题及答案.doc
2022-2023学年北京东城区初三第一学期物理期末试卷及答案.doc
2018上半年江西教师资格初中地理学科知识与教学能力真题及答案.doc
2012年河北国家公务员申论考试真题及答案-省级.doc
2020-2021学年江苏省扬州市江都区邵樊片九年级上学期数学第一次质量检测试题及答案.doc
2022下半年黑龙江教师资格证中学综合素质真题及答案.doc
