-->
Navigation
Beginning Progressive Web App Development. Apress

Beginning Progressive Web App Development. Apress

Now pay Easier and Secure using Paypal
Price:

Read more

Creating a Native App Experience on the Web

Dennis Sheppard


e-books shop
e-books shop
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

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
e-books shop

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.

0