Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Service Worker & HTTP Client Hints
"use strict";
self.addEventListener('fetch', function(event) {
var request = event.request,
url = request.url,
url_object = new URL( url ),
re_jpg_or_png = /\.(?:jpg|png)$/,
supports_webp = false, // pessimism
webp_url;
// Check if the image is a local jpg or png
if ( re_jpg_or_png.test( request.url ) &&
url_object.origin == location.origin ) {
// console.log('WORKER: caught a request for a local PNG or JPG');
// Inspect the accept header for WebP support
if ( request.headers.has('accept') )
{
supports_webp = request.headers.get('accept').includes('webp');
}
// Browser supports WebP
if ( supports_webp )
{
// Make the new URL
webp_url = url.substr(0, url.lastIndexOf('.')) + '.webp';
event.respondWith(
fetch(
webp_url,
{ mode: 'no-cors' }
)
);
}
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.