Service workers let the website dynamically load webp pictures

Service Workers load webp picture

Each image loading request can be made through accept Get support for webp Format , For example, see the figure below

Take advantage of this , We can judge and support webp picture , Just use webp picture . We need to register a Service Worker.Service Worker A major feature of is , They can intercept network requests , It looks like , We can completely control the response content . Using this feature , We can monitor HTTP Head , And decide how to do .

First we register service worker

<script>
// Register the service worker
if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
    // Registration was successful
    console.log('ServiceWorker registration successful with scope: ', registration.scope);
}).catch(function(err) {
    // registration failed :(
        console.log('ServiceWorker registration failed: ', err);
    });
}
</script>

In the code above , We did a simple check , Judge browser