Progressive Web Apps

**Summary** __Progressive Web Apps__ teaches you PWA design and the skills you need to build fast, reliable websites by taking you step-by-step through real world examples in this practical tutorial. Foreword by Addy Osmani, Google. Purchase of the print book includes a free eBook in PDF, Kindle, and ePub formats from Manning Publications. **About the Technology** Offline websites that work. Near-instant load times. Smooth transitions between high/low/no bandwidth. Fantasy, right? Not with progressive web applications. PWAs use modern browser features like push notifications, smart caching, and Service Workers to manage data, minimize server usage, and allow for unstable connections, giving you better control and happier customers. Better still, all you need to build PWAs are JavaScript, HTML, and the easy-to-master techniques you'll find in this book. **About the Book** __Progressive Web Apps__ teaches you PWA design and the skills you need to build fast, reliable websites. There are lots of ways you can use PWA techniques, and this practical tutorial presents interesting, standalone examples so you can jump to the parts that interest you most. You'll discover how Web Service Workers vastly improve site loading, how to effectively use push notifications, and how to create sites with a no-compromise offline mode. **What's Inside** * Improved caching with Service Workers * Using manifest files and HTML markup * Push notifications * Offline-first web designs * Techniques for data synchronization **About the Reader** Written for readers with experience developing websites using HTML, CSS, and JavaScript. **About the Author** **Dean Alan Hume** is a coder, author, and Google Developer Expert. He's passionate about web performance and user experience. **Table of Contents** PART 1 - DEFINING PROGRESSIVE WEB APPS 2. Understanding Progressive Web Apps 3. First steps to building a Progressive Web App PART 2 - FASTER WEB APPS 5. Caching 6. Intercepting network requests PART 3 - ENGAGING WEB APPS 8. Look and feel 9. Push notifications PART 4 - RESILIENT WEB APPLICATIONS 11. Offline browsing 12. Building more resilient applications 13. Keeping your data synchronized PART 5 - THE FUTURE OF PROGRESSIVE WEB APPS15. Streaming data 16. Progressive Web App troubleshooting 17. The future is looking good Progressive Web Apps 1 brief contents 8 contents 10 foreword 16 preface 17 acknowledgments 18 about this book 20 How this book is organized 21 Code conventions and downloads 22 About the author 22 Book forum 22 About the cover 23 Part 1—Defining Progressive Web Apps 24 1 Understanding Progressive Web Apps 26 1.1 What’s the big deal with Progressive Web Apps? 26 1.2 PWA basics 28 1.2.1 Building a business case for Progressive Web Apps 29 1.3 Service Workers: The key to PWAs 31 1.3.1 Understanding Service Workers 31 1.3.2 The Service Worker lifecycle 32 1.3.3 A basic Service Worker example 33 1.3.4 Security considerations 35 1.4 Performance insight: Flipkart 36 1.5 Summary 37 2 First steps to building a Progressive Web App 38 2.1 Build on what you already have 38 2.2 Front-end architectural approaches to building PWAs 40 2.2.1 The Application Shell Architecture 40 2.2.2 Performance benefits 42 2.2.3 The Application Shell Architecture in action 43 2.3 Dissecting an existing PWA step by step 44 2.3.1 Front-end architecture 46 2.3.2 Caching 47 2.3.3 Offline browsing 48 2.3.4 Look and feel 49 2.3.5 The final product 49 2.4 Summary 50 Part 2—Faster web apps 52 3 Caching 54 3.1 The basics of HTTP caching 54 3.2 The basics of caching Service Worker caching 57 3.2.1 Precaching during Service Worker installation 57 3.2.2 Intercept and cache 61 3.2.3 Putting it all together 65 3.3 Performance comparison: before and after caching 67 3.4 Diving deeper into Service Worker caching 69 3.4.1 Versioning your files 69 3.4.2 Dealing with extra query parameters 70 3.4.3 How much memory do you need? 71 3.4.4 Taking caching to the next level: Workbox 71 3.5 Summary 73 4 Intercepting network requests 74 4.1 The Fetch API 74 4.2 The fetch event 76 4.2.1 The Service Worker lifecycle 78 4.3 Fetch in action 80 4.3.1 An example using WebP images 80 4.3.2 An example using the Save-Data header 82 4.4 Summary 86 Part 3—Engaging web apps 88 5 Look and feel 90 5.1 The web app manifest 90 5.2 Add to Home Screen 92 5.2.1 Customizing the icons 95 5.2.2 Add a splash screen 96 5.2.3 Set the launch style and URL 97 5.3 Advanced Add to Home Screen usage 98 5.3.1 Cancelling the prompt 98 5.3.2 Determining usage 99 5.3.3 Deferring the prompt 99 5.4 Debugging your manifest file 101 5.5 Summary 103 6 Push notifications 104 6.1 Engaging with your users 104 6.2 Engagement insight: The Weather Channel 106 6.3 Browser support 107 6.4 Your first push notification 107 6.4.1 Subscribing to notifications 108 6.4.2 Sending notifications 111 6.4.3 Receiving and interacting with notifications 113 6.4.4 Unsubscribing 116 6.5 Third-party push notifications 117 6.6 Summary 118 Part 4—Resilient web applications 120 7 Offline browsing 122 7.1 Unlocking the cache 122 7.2 Serving files while offline 123 7.3 A few gotchas to look out for 127 7.4 Cache isn’t forever 129 7.5 Offline user experience 129 7.6 Tracking offline usage 132 7.7 Summary 133 8 Building more resilient applications 134 8.1 Network issues that modern websites face 134 8.1.1 Understanding lie-fi and single point of failure 135 8.2 Service Workers to the rescue 137 8.3 Using Workbox 141 8.4 Summary 142 9 Keeping your data synchronized 143 9.1 Understanding BackgroundSync 143 9.1.1 Getting started 144 9.1.2 The Service Worker 147 9.1.3 Provide a fallback 148 9.1.4 Testing 150 9.2 Notifying the user 151 9.3 Periodic synchronization 152 9.4 Summary 154 Part 5—The future of Progressive Web Apps 156 10 Streaming data 158 10.1 Understanding web streams 158 10.1.1 What’s the big deal with web streams? 159 10.1.2 Readable streams 160 10.2 A basic example 161 10.3 Supercharging your page render times 163 10.4 The future of the Web Stream API 168 10.5 Summary 169 11 Progressive Web App Troubleshooting 170 11.1 Add to Homescreen 170 11.1.1 How do I tell how many users are using the Add to Homescreen (A2HS) functionality on my site? 170 11.1.2 The Add to Homescreen banner doesn’t make sense for my website—how do I disable or hide it? 171 11.1.3 Help, my Add to Homescreen (A2HS) functionality doesn’t seem to be working 172 11.1.4 If a user has installed my web app to their home screen, but they clear their cache in Chrome, do my site’s cached resources get cleared too? 172 11.1.5 I’m not sure if my manifest.json file is working correctly—how do I test it? 172 11.2 Caching 173 11.2.1 I’m adding resources into cache with code in my Service Worker, but the cache isn’t updating when I change the file, and why can I still see the older version of my files even after I refresh the page? 173 11.2.2 How do I unit test my Service Worker code? 174 11.2.3 How much memory can my PWA use on a user’s device? 175 11.2.4 My cached resources seem to expire every so often—how do I ensure that they stay cached permanently? 175 11.2.5 How do I deal with query string parameters and caching? 175 11.3 Debugging Service Worker–specific issues 176 11.3.1 How often does the Service Worker file update? 176 11.3.2 My Service Worker file is throwing an error, but I’m not sure what’s wrong—how do I debug it? 176 11.3.3 Help, I’ve tried everything, but for some crazy reason my Service Worker logic never seems to execute 177 11.3.4 I’ve added code to handle push notifications in my Service Worker file, but how can I test them quickly without writing server-side code? 178 11.3.5 I’ve built an offline web app but now I can’t see how users are using it—how do I track usage? 178 11.4 Summary 179 12 The future is looking good 180 12.1 Introduction 180 12.2 Web Bluetooth 181 12.3 The Web Share API 182 12.4 Payment Request API 184 12.5 Hardware access 188 12.6 Hardware: the Shape Detection API 188 12.7 What’s next? 189 12.8 Summary 189 index 191 Numerics 191 A 191 B 191 C 191 D 192 E 192 F 192 G 192 H 193 I 193 J 193 L 193 M 193 N 193 O 193 P 194 Q 194 R 194 S 194 T 195 U 195 V 196 W 196 X 196 Z 196 Progressive Web Apps–back 201 Progressive Web Apps are built with a collection of technologies, design concepts, and Web APIs that work in tandem to provide an app-like experience on the mobile web. Progressive Web Apps takes readers, step-by-step, through real world examples and teaches them how to build fast, engaging, and reliable websites. This book is written with stand-alone chapters, letting readers learn about particular features of interest without having read previous chapters. Purchase of the print book includes a free eBook in PDF, Kindle, and ePub formats from Manning Publications.

Progressive Web Apps teaches you PWA design and the skills you need to build fast, reliable websites by taking you step-by-step through real world examples in this practical tutorial.

Key features • Hands- on examples • Stand-alone chapters • Step-by-step guide Audience Readers should have some experience with developing websites using HTML, CSS and JavaScript.