Preface |
|
xi | |
1 Introducing Progressive Web Apps |
|
1 | (10) |
|
|
2 | (1) |
|
The Current Mobile Landscape |
|
|
3 | (2) |
|
The Progressive Web App Advantage |
|
|
5 | (2) |
|
The Tab, the Web, and the Service Worker |
|
|
7 | (4) |
2 Your First Service Worker |
|
11 | (18) |
|
Setting Up Our Sample Project |
|
|
11 | (2) |
|
Welcome to the Gotham Imperial Hotel |
|
|
13 | (1) |
|
|
14 | (1) |
|
The Current Offline Experience |
|
|
15 | (2) |
|
Creating Your First Service Worker |
|
|
17 | (4) |
|
What Is Progressive Enhancement? |
|
|
21 | (1) |
|
HTTPS and Service Workers |
|
|
21 | (1) |
|
Fetching Content from the Web |
|
|
22 | (2) |
|
Capturing Offline Requests |
|
|
24 | (1) |
|
|
25 | (2) |
|
Understanding Service Worker Scope |
|
|
27 | (1) |
|
|
28 | (1) |
3 The CacheStorage API |
|
29 | (12) |
|
What CacheStorage Is and, More Importantly, What It Is Not |
|
|
30 | (1) |
|
|
31 | (1) |
|
Storing Requests in CacheStorage |
|
|
32 | (1) |
|
Retrieving Requests from CacheStorage |
|
|
33 | (1) |
|
Caching in Our Sample App |
|
|
34 | (2) |
|
Matching the Right Response to Each Request |
|
|
36 | (2) |
|
HTTP Caching and HTTP Headers |
|
|
38 | (1) |
|
|
39 | (2) |
4 Service Worker Lifecycle and Cache Management |
|
41 | (22) |
|
The Service Worker Lifecycle |
|
|
44 | (3) |
|
The Service Worker Lifetime and the Importance of waitUntil |
|
|
47 | (1) |
|
Updating a Service Worker |
|
|
48 | (2) |
|
Why We Need to Manage the Cache |
|
|
50 | (3) |
|
Cache Management and Clearing Old Caches |
|
|
53 | (4) |
|
|
57 | (2) |
|
Configuring the Server to Serve the Right Caching Headers |
|
|
59 | (1) |
|
|
59 | (3) |
|
|
59 | (1) |
|
Have You Tried Turning It Off and On Again? |
|
|
60 | (1) |
|
Inspect CacheStorage and IndexedDB |
|
|
60 | (1) |
|
Network Throttling and Simulating Offline Conditions |
|
|
61 | (1) |
|
|
61 | (1) |
|
|
62 | (1) |
5 Embracing Offline-First |
|
63 | (30) |
|
|
64 | (2) |
|
|
66 | (3) |
|
Mix and Match: Creating New Patterns |
|
|
69 | (3) |
|
Planning Our Caching Strategy |
|
|
72 | (2) |
|
Implementing Our Caching Strategy |
|
|
74 | (10) |
|
Application Shell Architecture |
|
|
84 | (4) |
|
Including Content in the Initial Render |
|
|
86 | (2) |
|
|
88 | (2) |
|
|
90 | (1) |
|
|
91 | (2) |
6 Storing Data locally with IndexedDB |
|
93 | (42) |
|
|
94 | (3) |
|
|
97 | (16) |
|
Opening a Database Connection |
|
|
97 | (1) |
|
Database Versioning/Modifying an Object Store |
|
|
98 | (1) |
|
Adding Data to an Object Store |
|
|
99 | (2) |
|
Reading Data from an Object Store |
|
|
101 | (1) |
|
IndexedDB Version Management |
|
|
102 | (2) |
|
Reading Objects With a Cursor |
|
|
104 | (2) |
|
|
106 | (2) |
|
Reading Data Using an Index |
|
|
108 | (1) |
|
Limiting a Cursor's Range |
|
|
108 | (1) |
|
Setting a Cursor's Direction |
|
|
109 | (1) |
|
Updating Objects in an Object Store |
|
|
110 | (2) |
|
Deleting Objects from an Object Store |
|
|
112 | (1) |
|
Deleting All Objects from an Object Store |
|
|
112 | (1) |
|
Handling Bubbling IndexedDB Errors |
|
|
113 | (1) |
|
|
113 | (2) |
|
|
115 | (8) |
|
The Database That Was Promised |
|
|
123 | (6) |
|
|
129 | (1) |
|
Using IndexedDB in the Service Worker |
|
|
130 | (1) |
|
|
131 | (2) |
|
|
132 | (1) |
|
|
132 | (1) |
|
|
133 | (1) |
|
|
133 | (1) |
|
|
133 | (2) |
7 Ensuring Offline Functionality with Background Sync |
|
135 | (22) |
|
How Background Sync Works |
|
|
137 | (2) |
|
|
139 | (4) |
|
|
139 | (1) |
|
|
140 | (1) |
|
|
140 | (1) |
|
|
141 | (1) |
|
Getting a List of Registered Sync Events |
|
|
141 | (1) |
|
|
142 | (1) |
|
Passing Data to the Sync Event |
|
|
143 | (5) |
|
Maintaining an Action Queue in IndexedDB |
|
|
143 | (2) |
|
Maintaining a Queue of Requests in IndexedDB |
|
|
145 | (2) |
|
Passing Data in the Sync Event Tag |
|
|
147 | (1) |
|
Adding Background Sync to Our App |
|
|
148 | (7) |
|
|
155 | (2) |
8 Service Worker to Page Communication with Post Messages |
|
157 | (16) |
|
Window to Service Worker Messaging |
|
|
158 | (2) |
|
Service Worker to All Open Windows Messaging |
|
|
160 | (1) |
|
Service Worker to Specific Window Messaging |
|
|
161 | (2) |
|
Keeping the Line of Communication Open with a MessageChannel |
|
|
163 | (3) |
|
Communicating Between Windows |
|
|
166 | (3) |
|
Posting Messages from a Sync Event to the Page |
|
|
169 | (2) |
|
|
171 | (2) |
9 Grabbing Homescreen Real Estate with Installable Web Apps |
|
173 | (10) |
|
|
174 | (1) |
|
How Browsers Decide When to Show an App Install Banner |
|
|
175 | (1) |
|
Anatomy of a Web App Manifest |
|
|
176 | (5) |
|
Backwards, Sideways, and Future Compatibility |
|
|
181 | (1) |
|
|
182 | (1) |
10 Reach Out with Push Notifications |
|
183 | (36) |
|
Life of a Pushed Notification |
|
|
183 | (4) |
|
|
184 | (1) |
|
|
184 | (2) |
|
|
186 | (1) |
|
|
187 | (10) |
|
Requesting Permission for Notifications |
|
|
187 | (3) |
|
|
190 | (5) |
|
Adding Notification Support to Gotham Imperial Hotel |
|
|
195 | (2) |
|
Subscribing a User to Push Events |
|
|
197 | (9) |
|
Generating Public and Private VAPID Keys |
|
|
199 | (1) |
|
|
200 | (2) |
|
Creating a New Subscription |
|
|
202 | (2) |
|
Subscribing Gotham Imperial Hotel Users to Push Messages |
|
|
204 | (2) |
|
Sending Push Events from the Server |
|
|
206 | (3) |
|
Listening for Push Events and Showing Notifications |
|
|
209 | (8) |
|
Interrogating Notifications |
|
|
215 | (2) |
|
|
217 | (2) |
11 Progressive Web App UX |
|
219 | (20) |
|
|
219 | (1) |
|
Communicating State from the Service Worker |
|
|
220 | (2) |
|
Communicating with Progressive UI KITT |
|
|
222 | (3) |
|
Common Messages in Progressive Web Apps |
|
|
225 | (2) |
|
|
225 | (1) |
|
|
226 | (1) |
|
Action Failed But Will Complete When User Regains Connectivity |
|
|
226 | (1) |
|
|
227 | (1) |
|
|
227 | (1) |
|
|
227 | (4) |
|
Progressive Web App Design |
|
|
231 | (2) |
|
Your Design Should Reflect Changing Conditions |
|
|
231 | (1) |
|
Your Design Should Fit Its Environment |
|
|
232 | (1) |
|
Your Design Should Adapt to the Particularities of Each Medium |
|
|
232 | (1) |
|
Your Design Should Instill Confidence and Inform the User |
|
|
233 | (1) |
|
Your Design Should Help the User and Your Business Achieve Their Goals |
|
|
233 | (1) |
|
Taking Charge of the Install Prompt |
|
|
233 | (2) |
|
Measuring and Aiming for Performance with RAIL |
|
|
235 | (2) |
|
|
237 | (2) |
12 What's Next for PWAs |
|
239 | (12) |
|
Accepting Payments with the Payment Request API |
|
|
239 | (2) |
|
User Management with the Credential Management API |
|
|
241 | (1) |
|
Real-Time Graphics with WebGL |
|
|
242 | (2) |
|
Futuristic APIs with Speech Recognition |
|
|
244 | (1) |
|
Virtual Reality in the Browser with WebVR |
|
|
245 | (1) |
|
Easy Sharing to and from Your App |
|
|
245 | (1) |
|
|
246 | (2) |
|
|
248 | (3) |
A Service Workers: A Great Opportunity to Adopt ES2015 |
|
251 | (4) |
B Full-Page Interstitials or: How I Learned to Hate the Door Slam |
|
255 | (2) |
C CORS Versus NO-CORS |
|
257 | (2) |
Index |
|
259 | |