Dynamic Responsive images using Client Hints and Service Worker

service-worker-dynamic.js

// Listen to fetch events
self.addEventListener('fetch', function(event) {

	// Clone the request
	var req = event.request.clone();

  	// Check if the image is a jpeg
  	if (/\.jpg$/.test(event.request.url)) {

		// Check the headers
		for (entry of req.headers.entries()) { 
			// Check the accept header
			if (entry[0] == 'accept')
			{
				if (entry[1].includes('webp'))
				{
					// change the return path
					var returnUrl = req.url.substr(0, req.url.lastIndexOf(".")) + ".webp";

					event.respondWith(
						fetch(returnUrl, {
							mode: 'no-cors'
						})
					);
				}
			}
		}
	}
});