Beginning Progressive Web App Development. Apress

Creating a Native App Experience on the Web

Dennis Sheppard

Purchase Now !
Just with Paypal

Book Details

Price	3.00 USD
Pages	268 p
File Size	10,655 KB
File Type	PDF format
ISBN-13 (electronic)   ISBN-13 (pbk)	978-1-4842-3090-9  978-1-4842-3089-3
Copyright	2017 by Dennis Sheppard

About the Author

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

don’t 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.

About the Technical Reviewer

Phil Nash is a developer evangelist for Twilio and a Google

Developer Expert. He's been in the web industry for 10 years

building with JavaScript, Ruby, and Swift. He can be found

hanging out at meetups and conferences, playing with new

technologies and APIs, or writing open source code online.

Sometimes he makes his own beer, but he’s more likely to be

found discovering new ones around the world.

Phil tweets at @philnash and you can find him elsewhere

online at https://philna.sh.

Table of Contents

About the Author ..................................................... xi

About the Technical Reviewer .................................................... xiii

Acknowledgments .......................................................................xv

Part I: Intro to PWAs and Tooling.....................................................................1

Chapter 1: Introduction to Progressive Web Apps .................................................... 3

What a Progressive Web App Actually Is ............................................. 5

Current and Future PWA Support ....................................................... 8

Looking Ahead .................................................... 10

Chapter 2: Tools to Measure Progressive Web Apps .............................................. 11

A Light to Keep You Off the Rocks ......................................... 11

Chrome DevTools ............................................................................. 15

Webpagetest.org ............................................................. 18

Looking Ahead ................................................................... 20

Part II: PWA Features.....................................21

Chapter 3: Service Workers ........................................... 23

Promises .......................................................................... 25

Fetch ................................................................................. 29

Service Workers .................................................................. 30

Register the Service Worker ...................................... 31

Updating the Service Worker .................................. 38

Other DevTools Options ....................................... 42

Browser Compatibility ............................................. 43

Service Worker Recap .................................................... 43

Looking Ahead ....................................................... 43

Chapter 4: Caching and Offline Functionality with Service Workers ...................... 45

The fetch Event ...................................................... 45

The Cache API ..................................................... 47

Going Offline ........................................................ 53

Different Caching Strategies .................................... 56

Updating the Cache ............................................. 61

sw-precache ................................................. 63

sw-toolbox ............................................................. 65

Dynamic Page Caching ................................................... 69

Looking Ahead ........................................................... 71

Chapter 5: Background Sync for Offline Apps with Service Workers ..................... 73

The Background Sync API ............................................... 73

Registering for sync ....................................................... 73

Listening for sync ....................................................... 74

Implementation Details of Using sync ................................. 75

Testing for Offline Sync ................................................... 80

Making Improvements ............................................ 81

Data Storage .......................................................... 82

IndexedDB vs. localForage .......................................... 82

Using localForage For Better Offline Support ........................... 86

The message Service Worker Event .................................. 90

Looking Ahead ..................................... 93

Chapter 6: Adding your App to the Home Screen with Web App Manifest ............. 95

Installing the App to the Home Screen ...................................... 100

Handling Installation Events ................................................ 100

Manually Adding the App to the Home Screen .................. 101

The App Splash Screen ................................................. 104

The display Property .......................................................... 106

The start_url Property ........................................... 107

Looking Ahead ............................................................. 107

Chapter 7: Notifications ........................................................................................ 109

Web Notifications ............................................. 111

Requesting Permission to Notify ............................. 111

Sending a Notification ........................................... 113

Tagging Notifications ............................................ 116

Web Notifications with Service Workers ...................... 116

Push Notifications ...................................................... 118

Subscribing a User to Push Notifications ............................... 119

Saving the PushSubscription Object ........................ 124

Triggering the Push Notification .............................. 128

Catching Push Events in the Service Worker ....................... 130

Testing Push on Mobile ............................................. 133

Handling Notification Click Events ............................... 135

Looking Ahead ................................................... 137

Chapter 8: App Shell Architecture and Loading Performance .............................. 139

What an App Shell Is .................................................... 139

Caching the App Shell ........................................... 143

Measuring App Shell Performance ............................... 145

Going Beyond the App Shell .............................. 146

Render Blocking Scripts ........................................... 148

Async and Defer ............................................ 149

Deferring Stylesheet Parsing and Execution ......................... 151

Preloading JavaScript and CSS and Other Resources ....................... 151

Looking Ahead ...................................... 153

Chapter 9: Exploring HTTP/2 and Server Push ..................................................... 155

Head-of-Line Blocking ............................................... 155

Header Compression .............................................. 158

Introducing HTTP/2 ................................................. 159

Implementing HTTP/2 in Node.js ................................ 159

Server Push ................................................ 162

Deploying HTTP/2 and Server Push ........................ 168

Measuring the Impact of HTTP/2 and Server Push .......................... 169

Looking Ahead ............................................... 172

Part III: Putting the Features to Use............................................................173

Chapter 10: Turning a Real App into a PWA .......................................................... 175

The Movies Finder App ..................................... 175

The Plan to Make a PWA ...................................... 180

Getting the Code and Running It ............................ 181

Setting Up sw-precache ................................. 182

Caching All the Things ......................................................... 186

Deploying to Firebase ............................................... 189

Moving the Render-Blocking Stylesheet .......................... 193

Implementing Server Push ........................................... 193

Adding the App Manifest ............................................ 197

Thoughts on Movies Finder Performance ..................... 206

Looking Ahead ........................................................ 207

Chapter 11: PWAs From the Start ......................................................................... 209

React PWA ......................................................... 210

Creating a React App ................................... 211

Configuring the Service Worker .................................... 213

Running and Building the React App .......................... 214

Deploying and Measuring Your React PWA ....................... 215

Summary of React’s PWA Effort .............................. 217

Preact PWA .............................................................. 217

Preact CLI .......................................................... 218

Running the Built-in Preact HTTP/2 Server ............................ 219

Preact CLI Plugins ................................................ 220

Running Lighthouse on Firebase-Deployed Preact ................... 221

Summary of Preact’s PWA Effort ..................... 223

Vue.js PWA ...................................................................... 223

Vue CLI and PWA Creation ....................................... 224

What the Deployed Vue PWA Offers ...................................... 225

Running Lighthouse on Firebase-Deployed Vue ................. 227

Summary of Vue’s PWA Effort ................................ 229

Angular PWA ........................................... 229

Angular’s Rocky PWA Start ................................ 230

Building the Angular PWA ................. 231

Running Lighthouse on Firebase-Deployed Angular .................... 232

Summary of Angular’s PWA Offering ..................... 233

Ionic PWA ........................................ 233

Installing Ionic ......................................... 234

Enabling the Ionic Service Worker ...................... 236

Building Ionic .......................................... 236

Deploying and Testing the Ionic PWA ......................... 237

Summary of Ionic’s PWA Offering .............. 239

Starting a PWA from Scratch ........................................ 240

Looking Ahead .................................. 240

Part IV: Leveling Up Your PWA.....................................................................241

Chapter 12: Leveling Up Your PWA ....................................................................... 243

Google’s PRPL Pattern .................................. 243

Lazy Loading ......................................................... 244

Code Splitting ................................................ 244

Analyzing Bundles .............................................. 246

Server-Side Rendering ....................................... 249

Drawbacks to Server-Side Rendering .......................... 251

Resources to Implement Server-Side Rendering ................. 251

Pre-Rendering ................................................... 252

Web Workers ................................................................... 252

PWA News ............................................................ 256

Safari .................................................... 256

Workbox .................................................................. 256

A Last Word .................................. 259

Index ......................... 261

Bookscreen

Acknowledgments

I think everyone who has ever written a book has at least a little bit of crazy in them.

Because of that, there needs to a handful of people to help manage the crazy. I’m

particularly lucky to have a lot of people to help me with that. Without these people,

what you’re about to read would be a much bigger mess than it already is.

First, a huge thank you to Brooke McEntee for creating the diagrams and icons in the

book. She did a miraculous job transforming my awful sketches into what you see here. If

any part of the diagrams isn’t perfect, that’s 100% on me.

Thank you to my friend and coworker Carly Kaluzna for her encouragement and for

coming up with the name iPatch, so you can blame her for that. Thank you to my former

co-author AJ Liptak whom I constantly bounce ideas off and ask technical questions

that I could just as easily google. Thanks to Becky Lehmann for helping me to be a better

teacher and urging me to continue with unparalleled positivity. Thanks to Rick Williams

for being ready to celebrate with me as soon as this book is finished. Thank you to Justin

Shiffman who always champions whatever I’m working on, even if he did say he’d pay

me not to write another book. Thank you to Dave Hoag who first introduced me to PWAs

a couple of years ago, and thank you to the entire NextTier team, who will have a new

addition to the book-stack monitor stands.

Thank you to the team at Apress: Joan Murray, Jill Balzano, and Laura Berendson, as

well as the book’s technical reviewer, Phil Nash.

Thanks to Addy Osmani, Jake Archibald, John Papa, and many others in the PWA dev

community. We’ve never met, but you’ll never know how much you’ve taught me.

Thank you to my family for instilling in me a love of books growing up. Thank you to

Violet, Cameron, and Betsy Sheppard for always inspiring and motivating me.

And finally, thank you, Reader. With all of the videos and blogs and tutorials available

on the Internet today, a tech book isn’t always an easy purchase. Thank you for having

faith. I hope you learn a lot and have a little bit of fun.

A note on the use of certain images: the browser icons used in Chapter 1 were

designed by Pixel Buddha from Flaticon, the iPatch app’s pirate icon first introduced

in Chapter 6 was created by freedesignfile.com, and Peggy the Parrot’s image first

introduced in Chapter 7 was created by Freepik.