Progressive Web Apps
Dean Alan Hume
Foreword by Addy Osmani
  • December 2017
  • ISBN 9781617294587
  • 200 pages
  • printed in black & white

Takes a practical, example-driven approach to learning how PWAs can help you build fast, engaging sites.

From the Foreword by Addy Osmani, Google

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.

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.2. PWA basics

1.2.1. Building a business case for Progressive Web Apps

1.3. Service Workers: The key to Progressive Web Apps

1.3.1. Understanding Service Workers

1.3.2. The Service Worker Lifecycle

1.3.3. A basic Service Worker example

1.3.4. Security Considerations

1.4. Performance Insight: Flipkart

1.5. Summary

2. The first steps toward building a Progressive Web App

2.1. Build on what you already have

2.2. Front-end architectural approaches to building PWAs

2.2.1. The Application Shell Architecture

2.2.2. Performance benefits

2.2.3. The Application Shell Architecture in action

2.3. Dissecting an existing PWA: step by step

2.3.1. Front end Architecture

2.3.2. Caching

2.3.3. Offline browsing

2.3.4. Look and feel

2.3.5. The final product

2.4. Summary

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

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

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

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

Part 4: Resilient Web Applications

7. Offline Browsing

7.1. Unlocking the cache

7.2. Serving files while offline

7.3. A few gotchas to look out for

7.4. Cache isn’t forever

7.5. Offline User Experience

7.6. Tracking offline usage

7.7. Summary

8. Building more resilient applications

8.1. Network issues that modern websites face

8.1.1. Understanding lie-fi and single point of failure

8.2. Service Workers to the rescue

8.3. Using Workbox

8.4. Summary

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

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

11. Progressive Web App Troubleshooting

11.1. Add to Homescreen

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

11.1.2. The Add to Homescreen banner doesn’t make sense for my website—how do I disable or hide it?

11.1.3. Help, my Add to Homescreen (A2HS) functionality doesn’t seem to be working

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?

11.1.5. I’m not sure if my manifest.json file is working correctly—how do I test it?

11.2. Caching

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?

11.2.2. How do I unit test my Service Worker code?

11.2.3. How much memory can my PWA use on a user’s device?

11.2.4. My cached resources seem to expire every so often—how do I ensure that they stay cached permanently?

11.2.5. How do I deal with query string parameters and caching?

11.3. Debugging Service Worker specific issues

11.3.1. How often does the Service Worker file update?

11.3.2. My Service Worker file is throwing an error, but I’m not sure what’s wrong—how do I debug it?

11.3.3. Help, I’ve tried everything, but for some crazy reason my Service Worker logic never seems to execute

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?

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?

11.4. Summary

12. The future is looking good

12.1. Introduction

12.2. Web Bluetooth

12.3. The Web Share API

12.4. Payment Request API

12.5. Hardware Access

12.6. Hardware: The Shape Detection API

12.7. What’s next?

12.8. Summary

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.


Buy
combo $39.99 pBook + eBook + liveBook
eBook $31.99 pdf + ePub + kindle + liveBook

FREE domestic shipping on three or more pBooks

A pioneering work that will take your web app offline and onto the fast lane.

Michal Paszkiewicz, Transport for London

The very best resource for understanding and implementing progressive web applications.

Evan Wallace, Berkley Insurance Australia

Thorough, methodical coverage for novice users, with handy insights and many 'aha' moments for advanced users.

Dev Paliwal, Synapse