Service Workers让网站动态加载Webp图片

Service Workers加载webp图片

每个图片加载请求可以通过accept获取是否支持webp格式，例如如下图

利用这一点，我们可以判断支持webp图片，就使用webp图片。我们需要注册一个Service Worker。Service Worker的一大特性就是，它们能够拦截网络请求，这样子，我们就能够完全控制响应内容。使用这个特性，我们能够监听HTTP头部，并决定如何做。

首先我们注册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>

在上面的代码中，我们做了一个简单的检查，判断浏览器