Progressive Web Apps
Dean Alan Hume
  • MEAP began December 2016
  • Publication in October 2017 (estimated)
  • ISBN 9781617294587
  • 275 pages (estimated)
  • printed in black & white

Progressive Web Apps are game changers. They let you create fast, resilient applications that benefit users regardless of their connection speed or device constraints. PWAs 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. This means you can build reliable web apps that load nearly instantly no matter what kind of network connection the user is on. PWAs run on HTTPS, use push notifications, and spawn app install banners. Under the hood, PWAs allow you full access to requests and responses made to and from the applications - giving you ultimate control. And the best part - you don't need to be a guru to unlock all of these powerful features.

Progressive Web Apps takes you, step-by-step, through real world examples and teaches you how to build fast, engaging, and reliable websites. You'll begin by getting the big picture of what Progressive Web Apps are, how they work, and their benefits. Then you'll explore the different approaches that you can use to build them. This hands-on guide gives you a closer look as you dissect a real-world PWA and break down each of its elements. As you progress, you'll dive into each of the key features that make up a Progressive Web App. This book is written with stand-alone chapters, letting you learn about particular features of interest without having read previous chapters. By the end, you'll be ready to build better web applications and improve the user experience.

Table of Contents detailed table of contents

Part 1: Defining Progressive Web Apps

1. Understanding Progressive Web Apps

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

1.1.1. The basics

1.1.2. Building a business case for Progressive Web Apps

1.2. Service Workers: The key to Progressive Web Apps

1.2.1. Understanding Service Workers

1.2.2. The Service Worker Lifecycle

1.2.3. A basic Service Worker example

1.2.4. Security Considerations

1.3. Performance Insight: Flipkart

1.4. Summary

1.5. References

2. The first steps toward building a Progressive Web App

2.1. Architectural approaches to building PWAs

2.1.1. Pick and choose your vitamins

2.1.2. Application Shell Architecture

2.2. Dissecting an existing PWA: step by step

2.2.1. Front end Architecture

2.3. Summary

2.4. References

Part 2: Faster Web Apps

3. Caching

3.1. The basics of HTTP caching

3.2. The basics of caching using Service Workers

3.2.1. Precaching during Service Worker installation

3.2.2. Intercept and cache

3.2.3. Putting it all together

3.3. A performance comparison: before and after caching

3.4. Diving deeper into Service Worker caching

3.4.1. Versioning your files

3.4.2. Dealing with extra query parameters

3.4.3. How much memory do you need?

3.4.4. Taking caching to the next level - The Service Worker toolbox

3.5. Summary

3.6. References

4. Intercepting Network Requests

4.1. The Fetch API

4.2. The Fetch Event

4.2.1. The Service Worker Lifecycle

4.3. Fetch in action

4.3.1. An example using WebP images

4.3.2. An example using the Save-Data header

4.4. Summary

4.5. References

Part 3: Engaging Web Applications

5. Look and feel

5.1. The Web App Manifest

5.2. Add to home screen

5.2.1. Customizing the icons

5.2.2. Add a splash screen

5.2.3. Set the launch style and URL

5.3. Advanced Add to Homescreen usage

5.3.1. Cancelling the prompt

5.3.2. Determining usage

5.3.3. Deferring the prompt

5.4. Debugging your manifest file

5.5. Summary

5.6. References

6. Push Notifications

6.1. Engaging with your users

6.2. Engagement Insight: The Weather Channel

6.3. Browser Support

6.4. Your first push notification

6.4.1. Subscribing to notifications

6.4.2. Sending notifications

6.4.3. Receiving notifications and interacting with them

6.4.4. Unsubscribing

6.5. Third party push notifications

6.6. Summary

6.7. References

Part 4: Resilient Web Applications

7. Offline Browsing

7.1. Unlocking the cache

7.1.1. Serving files while offline

7.2. A few gotchas to look out for

7.2.1. Cache isn’t forever

7.3. Offline User Experience

7.4. Tracking offline usage

7.5. Summary

7.6. Resources

8. Building more resilient applications

8.1. Network issues that modern websites face

8.1.1. Understanding lie-fi

8.1.2. Understanding single point of failure

8.2. Service Workers to the rescue

8.2.1. Using the Service Worker toolbox

8.3. Summary

8.4. Resources

9. Keeping your data synchronised

9.1. Understanding BackgroundSync

9.1.1. Getting started

9.1.2. The Service Worker

9.1.3. Provide a fallback

9.1.4. Testing

9.2. Notifying the user

9.3. Periodic synchronization

9.4. Summary

9.5. References

Part 5: The future of Progressive Web Apps

10. Streaming data

10.1. Understanding Web Streams

10.1.1. What’s the big deal with web streams?

10.1.2. Readable Streams

10.2. A basic example

10.3. Supercharging your page render times

10.4. The future of the web stream API

10.5. Summary

10.6. References

11. The future is looking good

11.1. Introduction

11.2. Web Bluetooth

11.3. The Web Share API

11.4. Payment Request API

11.5. Hardware Access

11.6. Hardware: The Shape Detection API

11.7. What’s next?

11.8. Summary

12. Progressive Web App Troubleshooting

12.1. Add to Homescreen

12.2. Caching

12.3. Debugging Service Worker specific issues

12.4. Summary

What's inside

  • Building super fast web applications
  • Adding improved caching using Service Workers
  • Using manifest files and HTML markup
  • Engaging users with push notifications
  • Building an offline web application from scratch
  • Keeping data synchronized even when users are offline

About the reader

Readers should have some experience with developing websites using HTML, CSS and JavaScript.

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.

Manning Early Access Program (MEAP) Read chapters as they are written, get the finished eBook as soon as it’s ready, and receive the pBook long before it's in bookstores.
Buy
MEAP combo $39.99 pBook + eBook + liveBook
MEAP eBook $31.99 pdf + ePub + kindle + liveBook

FREE domestic shipping on three or more pBooks