Testing the Service Worker

In this section, we will see how we can test our service worker.

Checking Where the Data Comes From

Using the Chrome Developer Tools, it's easy to see where a particular resource is being retrieved from.

Using the Network tab in Chrome Developer Tools, you can see what files are being retrieved, where the data comes from, and how long it took the browser to fetch those resources. This following screenshot shows a normal page request, where each of the files are downloaded from the web server:

Figure 3.1: A normal page request

In the following screenshot, you can see in the Size column that the data is retrieved from the service worker. This means that it did not make a request to the network to fetch those items; instead, it got it from the browser cache:

Figure 3.2: A page request with service worker enabled

Enabling Offline Mode

It's in the nature of a web browser to be online...