The BlurHash API provided by ServiceWorker
npm install blurhash-sw
alt="BlurHash SW"
data-hidden
/>
[
The BlurHash API provided by ServiceWorker.
https://github.com/3846masa/blurhash-sw
- Install
- Usage
- Contributing
- License
Add the following code to your ServiceWorker script.
``js
// sw.js
importScripts('https://unpkg.com/blurhash-sw@1.0.15/dist/index.js');
blurhashSW({
routeUrl: '/.blurhash/:blurhash',
width: 32,
height: 32,
});
`
`html`
See also demo page.
Set the BlurHash URL as background-image.
You should encode the BlurHash hash contained in the URL.
`html`
alt="Shibuya 109"
width="793"
height="529"
style="
background-size: 100% 100%;
background-image: url(/.blurhash/LGBEE%2CIr.At8t8IU-%3DR%2BR6R4OrIo);
"
loading="lazy"
/>
Wrap the img element in the div element.
The BlurHash URL should be assigned as background-image of the div element.
`html
width: fit-content;
background-size: 100% 100%;
background-image: url(/.blurhash/LKF%23tH-psS%2C%3F3%3FoJWVNbIVs.%24*n%24);
"
>
alt="Tokyo tower"
width="472"
height="512"
style="
opacity: 0;
transition: ease-out 0.3s opacity;
"
onload="this.style.opacity=1"
loading="lazy"
/>
$3
The BlurHash URL is not available until the ServiceWorker is ready.
Therefore, when visiting the site for the first time,
cannot be loaded.As a workaround, generate
background-image based on data-blurhash when the ServiceWorker is ready.`js
navigator.serviceWorker
.register('/sw.js')
.then(() => navigator.serviceWorker.ready)
.then(() => {
const $elemList = document.querySelectorAll('[data-blurhash]');
for (const $elem of $elemList) {
const blurhash = $elem.dataset.blurhash;
$elem.style.backgroundSize = 100% 100%;
$elem.style.backgroundImage = url(/.blurhash/${encodeURIComponent(blurhash)});
}
});
`html
alt="Kinkaku-ji"
width="597"
height="398"
loading="lazy"
data-blurhash="L%C%zEXANengKnkCj]n$NMjXsoW?"
/>
`html
width: fit-content;
"
data-blurhash="LmF~daR+NGWA_4RjRjWBkCadV@W;"
>
alt="Himeji castle"
width="262"
height="394"
style="
opacity: 0;
transition: ease-out 0.3s opacity;
"
onload="this.style.opacity=1"
loading="lazy"
/>
PRs accepted.