Progressive Web Apps

Progressive Web Apps

by Dean Alan Hume

Paperback

$37.07 $39.99 Save 7% Current price is $37.07, Original price is $39.99. You Save 7%.
Choose Expedited Shipping at checkout for guaranteed delivery by Thursday, October 17

Overview

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
  1. Understanding Progressive Web Apps
  2. First steps to building a Progressive Web App
  3. PART 2 - FASTER WEB APPS
  4. Caching
  5. Intercepting network requests
  6. PART 3 - ENGAGING WEB APPS
  7. Look and feel
  8. Push notifications
  9. PART 4 - RESILIENT WEB APPLICATIONS
  10. Offline browsing
  11. Building more resilient applications
  12. Keeping your data synchronized
  13. PART 5 - THE FUTURE OF PROGRESSIVE WEB APPS
  14. Streaming data
  15. Progressive Web App troubleshooting
  16. The future is looking good

Product Details

ISBN-13: 9781617294587
Publisher: Manning Publications Company
Publication date: 12/31/2017
Pages: 200
Product dimensions: 7.30(w) x 9.10(h) x 0.70(d)

About the Author

Dean Alan Hume is an author, blogger and Google Developer Expert. He is passionate about web performance and regularly writes articles about this topic on his blog at http://deanhume.com.

Table of Contents

Foreword xv

Preface xvi

Acknowledgments xvii

About this book xix

Part 1 Defining Progressive Web Apps 1

1 Understanding Progressive Web Apps 3

1.1 What's the big deal with Progressive Web Apps? 3

1.2 PWA basics 5

Building a business case for Progressive Web Apps 6

1.3 Service Workers: The key to PWAs 8

Understanding Service Workers 8

The Service Worker lifecycle 9

A basic Service Worker example 10

Security considerations 12

1.4 Performance insight: Flipkart 13

1.5 Summary 14

2 First steps to building a Progressive Web App 15

2.1 Build on what you already have 15

2.2 Front-end architectural approaches to building PWAs 17

The Application Shell Architecture 17

Performance benefits 19

The Application Shell Architecture in action 20

2.3 Dissecting an existing PWA step by step 21

Front-end architecture 23

Caching 24

Offline browsing 25

Look and feel 26

The final product 26

2.4 Summary 27

Part 2 Faster Web Apps 29

3 Caching 31

3.1 The basics of HTTP caching 31

3.2 The basics of caching Service Worker caching 34

Precaching during Service Worker installation 34

Intercept and cache 38

Putting it all together 42

3.3 Performance comparison: before and after caching 44

3.4 Diving deeper into Service Worker caching 46

Versioning your files 46

Dealing with extra query parameters 47

How much memory do you need? 48

Taking caching to the next level: Workbox 48

3.5 Summary 50

4 Intercepting network requests 51

4.1 The Fetch API 51

4.2 The fetch event 53

The Service Worker lifecycle 55

4.3 Fetch in action 57

An example using WebP images 57

An example using the Save-Data header 59

4.4 Summary 63

Part 3 Engaging web apps 65

5 Look and feel 67

5.1 The web app manifest 67

5.2 Add to Home Screen 69

Customizing the icons 72

Add a splash screen 73

Set the launch style and URL 74

5.3 Advanced Add to Home Screen usage 75

Cancelling the prompt 75

Determining usage 76

Deferring the prompt 76

5.4 Debugging your manifest file 78

5.5 Summary 80

6 Push notifications 81

6.1 Engaging with your users 81

6.2 Engagement insight: The Weather Channel 83

6.3 Browser support 84

6.4 Your first push notification 84

Subscribing to notifications 85

Sending notifications 88

Receiving and interacting with notifications 90

Unsubscribing 93

6.5 Third-party push notifications 94

6.6 Summary 95

Part 4 Resilient web applications 97

7 Offline browsing 99

7.1 Unlocking the cache 99

7.2 Serving files while offline 100

7.3 A few gotchas to look out for 104

7.4 Cache isn't forever 106

7.5 Offline user experience 106

7.6 Tracking offline usage 109

7.7 Summary 110

8 Building more resilient applications 111

8.1 Network issues that modern websites face 111

Understanding lie-fi and single point of failure 112

8.2 Service Workers to the rescue 114

8.3 Using Workbox 118

8.4 Summary 119

9 Keeping your data synchronized 120

9.1 Understanding BackgroundSync 120

Getting started 121

The Service Worker 124

Provide a fallback 125

Testing 127

9.2 Notifying the user 128

9.3 Periodic synchronization 129

9.4 Summary 131

Part 5 The future of Progressive Web Apps 133

10 Streaming data 135

10.1 Understanding web streams 135

What's the big deal with web streams? 136

Readable streams 137

10.2 A basic example 138

10.3 Supercharging your page render times 140

10.4 The future of the Web Stream API 145

10.5 Summary 146

11 Progressive Web App Troubleshooting 147

11.1 Add to Homescreen 147

How do I tell how many users are using the Add to Homescreen (A2HS) functionality on my site? 147

The Add to Homescreen banner doesn't make sense for my website-how do I disable or hide it? 148

Help, my Add to Homescreen (A2HS) functionality doesn't seem to be working 149

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? 149

I'm not sure if my manifest json file is working correctly-how do I test it? 149

11.2 Caching 150

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? 150

How do I unit test my Service Worker code? 151

How much memory can my PWA use on a user's device? 152

My cached resources seem to expire every so often-how do I ensure that they stay cached permanently? 152

How do I deal with query string parameters and caching? 152

11.3 Debugging Service Worker-specific issues 153

How often does the Service Worker file update? 153

My Service Worker file is throwing an error, but I'm not sure what's wrong-how do I debug it? 153

Help, I've tried everything, but for some crazy reason my Service Worker logic never seems to execute 154

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? 155

I've built an offline web app but now I can't see how users are using it-how do I track usage? 155

11.4 Summary 156

12 The future is looking good 157

12.1 Introduction 157

12.2 Web Bluetooth 158

12.3 The Web Share API 159

12.4 Payment Request API 161

12.5 Hardware access 165

12.6 Hardware: the Shape Detection API 165

12.7 What's next? 166

12.8 Summary 166

Index 168

Customer Reviews

Most Helpful Customer Reviews

See All Customer Reviews