Takes a practical, example-driven approach to learning how PWAs can help you build fast, engaging sites.
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.
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
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.3. Offline browsing
2.3.4. Look and feel
2.3.5. The final product
Part 2: Faster Web Apps
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
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
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
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.5. Third party push notifications
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
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
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.2. Notifying the user
9.3. Periodic synchronization
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
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.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?
12. The future is looking good
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?
About the Technology
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.
- Improved caching with Service Workers
- Using manifest files and HTML markup
- Push notifications
- Offline-first web designs
- Techniques for data synchronization
About the reader
A pioneering work that will take your web app offline and onto the fast lane.
The very best resource for understanding and implementing progressive web applications.
Thorough, methodical coverage for novice users, with handy insights and many 'aha' moments for advanced users.