Chapter 7. Offline browsing

 

During my daily commute to work, I travel via train into central London. Even though most of London has great cellular coverage, there are times during my journey where the signal drops off or is so weak that I can’t connect to the web. As a user, this experience can be extremely frustrating. In this chapter, you’ll learn how to use the power of Service Workers to overcome this issue and build resilient web apps that work with no connection. This chapter also covers some of the gotchas you should look out for when building an offline web app. By the end of the chapter, you’ll have a fully working example of an offline PWA using the sample application, Progressive Times. We’ll also dive into how you can start tracking the ways your users are using your web app while offline using a clever offline tracking library.

7.1. Unlocking the cache

In chapter 3 you learned about using Service Worker caching to improve the performance and load times of your web pages. Using the sample application in this book, Progressive Times, you cached many of the resources required to achieve a lightning fast load times.

In this chapter, we’re going to build on the example in chapter 3 and see how to serve offline web pages from the cache. In fact, you’ve already done most of the hard work—you need to update your Service Worker to determine whether a user is offline. To see how this might work, look at figure 7.1.

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

sitemap