Hello!

Service workers are based on JavaScript workers API, they are non-blocking and run parallel to the normal executable context. They can communicate with a web page and manipulate DOM via the postMessage interface. These can allow you to control how network requests are handled which makes them so powerful.

Learn more ยป

Register Worker

Add this script in your html to register a service worker. Make sure you create a service worker file in your root directory since it has control only on the defined path and sub directories

Image

Install Worker

Once you register, add these lines in service worker file you created to install a worker which caches the necessary files provided with a cache name

Image

Return requests

After installation, create a method to return requests when user refreshes or navigates within the application

Image

Update worker

Automatically update service workers with this script when there is a change which deletes the old cache files

Image

To see how service workers work, please open developer tools in chrome (f12) and navigate to application tab

  • Click the service workers in left pane and look for sw.js with status active and running
  • Check the Offline checkbox - explicitly turning off network requests
  • Refresh the page and you will still be able to see the webpage

Webpage and images are served from cache. Navigate to cache storage tab in left pane to view the cached file.