list-of-figures

List of Figures

 

Chapter 1. Understanding Progressive Web Apps

Figure 1.1. The offline screen can be frustrating if you need to access information in a hurry.

Figure 1.2. The Add to Homescreen functionality can be a great way to re-engage with your users.

Figure 1.3. Service Workers can intercept incoming and outgoing HTTP requests, giving you total control of your website.

Figure 1.4. The Service Worker lifecycle

Figure 1.5. GitHub Pages allows you to host a website over SSL directly from a GitHub repository.

Chapter 2. First steps to building a Progressive Web App

Figure 2.1. The Lighthouse tool is great for auditing and producing performance metrics of a Progressive Web App.

Figure 2.2. Google’s Inbox takes advantage of Service Workers to cache the UI shell.

Figure 2.3. Once the UI shell is loaded, the dynamic contents of a website are fetched and added to the page.

Figure 2.4. The App Shell architecture can provide the user with meaningful pixels on the screen even before the dynamic content has finished loading.

Figure 2.5. During the Service Worker installation step, you can fetch resources and prime the cache for the next visit.

Figure 2.6. For any HTTP requests that are made, you can check whether the resource already exists in cache, and if it doesn’t, retrieve it via the network.

Figure 2.7. Twitter’s mobile website is a PWA that takes advantage of the Application Shell Architecture.