Service Workers and Progressive Web Apps (PWA)
An introduction to service workers, a relatively new technology that makes it easier for web apps to bridge the gap between native and web capabilities, removing many limitations from web apps.
Save 35% off the list price* of the related book or multi-format eBook (EPUB + MOBI + PDF) with discount code ARTICLE.
* See informit.com/terms
If building Progressive Web Apps (PWAs) is like building a house, the web app manifest file is like a real estate agent working to get people interested in buying your house and prepping it so that it’s move-in ready for buyers. Service workers, on the other hand, are live-in general contractors working behind the scenes to make sure the house has a solid foundation and all the walls stay up after the buyer moves in.
This chapter introduces service workers and shows how to use them to enable cool background processing in your web app. Here we build a foundation of what service workers do and how they do it, starting with simple web app resource caching and the service worker lifecycle. In the chapters that follow, I show how to add additional functionality to an app’s service worker to give the app some pizazz.
For this and the next few chapters of the book, you’ll work with the PWA News web app shown in Figure 3.1. The app is publicly available at https://pwa-news.com, but you’ll run a version of the app on a local server as you work through the chapter. I’d like to give a special shout out to my friend Scott Good who created the app UI and, through the application of some masterful styling, made it into the beautiful app you see in the figure.
Figure 3.1 PWA News Web Site
The app is a simple news site, aggregating news articles on PWAs from sites around the world. The app’s server process uses the Microsoft Bing News Search API1 to locate articles with the keyword PWA and displays the top 20 results. The app hosts a simple About page describing the site (and promoting the book) plus a Feedback page that renders data about how people feel about the site. You’ll play with that one in a later chapter. In Chapter 5, “Going the Rest of the Way Offline with Background Sync,” we’ll add the ability for visitors to submit their feedback when we talk about going offline.