Beginning Progressive Web App Development (eBook)

Dennis Sheppard is the VP of Technology at NextTier Education, a startup dedicated to helping students navigate the college selection process. Long before that, though, Dennis graduated from Louisiana Tech University with a computer science degree, and went on to develop and architect software for almost a dozen different industries. With over 10 years of professional software development experience, he has built his share of web applications, for both mobile and desktop. Because of that, Dennis strongly believes in the power of Progressive Web Apps to further help the tech world reach those who do not have access to the fastest networks and latest and greatest phones. He was born and raised in the deep south, but migrated to the suburbs of Chicago where he lives with his wife, a set of twins who are growing up way too fast, and an arthritic but playful golden retriever.

Table of Contents 5
About the Author 11
About the Technical Reviewer 12
Acknowledgments 13
Part I: Intro to PWAs and Tooling 14
Chapter 1: Introduction to Progressive Web Apps 15
What a Progressive Web App Actually Is 17
Current and Future PWA Support 20
Looking Ahead 22
Chapter 2: Tools to Measure Progressive Web Apps 23
A Light to Keep You Off the Rocks 23
Chrome DevTools 27
Webpagetest.org 30
Looking Ahead 32
Part II: PWA Features 33
Chapter 3: Service Workers 34
Promises 36
Fetch 40
Service Workers 41
Register the Service Worker 42
Updating the Service Worker 49
Other DevTools Options 53
Browser Compatibility 54
Service Worker Recap 54
Looking Ahead 54
Chapter 4: Caching and Offline Functionality with  Service Workers 55
The fetch Event 55
The Cache API 57
Going Offline 63
Different Caching Strategies 66
Updating the Cache 71
sw-precache 73
sw-toolbox 75
Dynamic Page Caching 79
Looking Ahead 81
Chapter 5: Background Sync for Offline Apps with Service Workers 82
The Background Sync API 82
Registering for sync 82
Listening for sync 83
Implementation Details of Using sync 84
Testing for Offline Sync 89
Making Improvements 90
Data Storage 91
IndexedDB vs. localForage 91
Using localForage For Better Offline Support 95
The message Service Worker Event 99
Looking Ahead 102
Chapter 6: Adding your App to the Home Screen with Web App Manifest 103
Installing the App to the Home Screen 108
Handling Installation Events 108
Manually Adding the App to the Home Screen 109
The App Splash Screen 112
The display Property 114
The start_url Property 115
Looking Ahead 115
Chapter 7: Notifications 116
Web Notifications 118
Requesting Permission to Notify 118
Sending a Notification 120
Tagging Notifications 123
Web Notifications with Service Workers 123
Push Notifications 125
Subscribing a User to Push Notifications 126
Saving the PushSubscription Object 131
Triggering the Push Notification 135
Catching Push Events in the Service Worker 137
Testing Push on Mobile 140
Handling Notification Click Events 142
Looking Ahead 144
Chapter 8: App Shell Architecture and Loading Performance 145
What an App Shell Is 145
Caching the App Shell 149
Measuring App Shell Performance 151
Going Beyond the App Shell 152
Render Blocking Scripts 154
Async and Defer 155
Deferring Stylesheet Parsing and Execution 157
Preloading JavaScript and CSS and Other Resources 157
Looking Ahead 159
Chapter 9: Exploring HTTP/2 and Server Push 160
Head-of-Line Blocking 160
Header Compression 163
Introducing HTTP/2 164
Implementing HTTP/2 in Node.js 164
Server Push 167
Deploying HTTP/2 and Server Push 173
Measuring the Impact of HTTP/2 and Server Push 174
Looking Ahead 177
Part III: Putting the Features to Use 178
Chapter 10: Turning a Real App into a PWA 179
The Movies Finder App 179
The Plan to Make a PWA 184
Getting the Code and Running It 185
Setting Up sw-precache 186
Caching All the Things 190
Deploying to Firebase 193
Moving the Render-Blocking Stylesheet 197
Implementing Server Push 197
Adding the App Manifest 201
Thoughts on Movies Finder Performance 210
Looking Ahead 211
Chapter 11: PWAs From the Start 213
React PWA 214
Creating a React App 215
Configuring the Service Worker 217
Running and Building the React App 218
Deploying and Measuring Your React PWA 219
Summary of React’s PWA Effort 221
Preact PWA 221
Preact CLI 222
Running the Built-in Preact HTTP/2 Server 223
Preact CLI Plugins 224
Running Lighthouse on Firebase-Deployed Preact 225
Summary of Preact’s PWA Effort 227
Vue.js PWA 227
Vue CLI and PWA Creation 228
What the Deployed Vue PWA Offers 229
Running Lighthouse on Firebase-Deployed Vue 231
Summary of Vue’s PWA Effort 233
Angular PWA 233
Angular’s Rocky PWA Start 234
Building the Angular PWA 235
Running Lighthouse on Firebase-Deployed Angular 236
Summary of Angular’s PWA Offering 237
Ionic PWA 237
Installing Ionic 238
Enabling the Ionic Service Worker 240
Building Ionic 240
Deploying and Testing the Ionic PWA 241
Summary of Ionic’s PWA Offering 243
Starting a PWA from Scratch 244
Looking Ahead 244
Part IV: Leveling Up Your PWA 245
Chapter 12: Leveling Up Your PWA 246
Google’s PRPL Pattern 246
Lazy Loading 247
Code Splitting 247
Analyzing Bundles 249
Server-Side Rendering 252
Drawbacks to Server-Side Rendering 254
Resources to Implement Server-Side Rendering 254
Pre-Rendering 255
Web Workers 255
PWA News 259
Safari 259
Workbox 259
A Last Word 262
Index 263