Testing the Service Worker

In order to test if our service worker works, we will have to load our application, and then disconnect our browser from the internet.

Checking Where the Data Comes from

Using 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.

The following screenshot shows a normal page request, where each file is downloaded from the web server:

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

Enabling Offline Mode

It's the nature of a web browser to be online, but in reality, we've all found ourselves in situations where our device is offline due to a lack of network connectivity...