Create a Custom Offline Page

Exercise goal

This exercise aims to familiarize with the service worker’s lifecycle events.

To do so, we will implement a simple JavaScript application that, thanks to the SW, can provide a custom offline page when the client is offline.

We can also implement this practical case for a personal project or our company site, like displaying corporate colors and using the company logo on a custom offline page.

Code structure

The code widget below uses a Node Express server to serve some HTML and JavaScript files.

For convenience, I already created the application frame and left some blank parts to be filled for our offline page functionality. These parts are marked with a Todo comment, which describes the task, like in the following snippet: