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>
在上面的代码中,我们做了一个简单的检查,判断浏览器是