{"id":20653026,"url":"https://github.com/3846masa/blurhash-sw","last_synced_at":"2025-04-18T21:50:42.697Z","repository":{"id":37003744,"uuid":"412970086","full_name":"3846masa/blurhash-sw","owner":"3846masa","description":"The BlurHash API provided by ServiceWorker.","archived":false,"fork":false,"pushed_at":"2025-04-18T15:32:27.000Z","size":1973,"stargazers_count":11,"open_issues_count":11,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-18T18:39:42.395Z","etag":null,"topics":["blurhash","serviceworker"],"latest_commit_sha":null,"homepage":"https://3846masa.github.io/blurhash-sw/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/3846masa.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-10-03T03:55:18.000Z","updated_at":"2025-04-12T04:53:42.000Z","dependencies_parsed_at":"2024-01-25T21:27:55.633Z","dependency_job_id":"d288c699-1463-43ac-898c-b9fbae78c723","html_url":"https://github.com/3846masa/blurhash-sw","commit_stats":{"total_commits":284,"total_committers":3,"mean_commits":94.66666666666667,"dds":0.08098591549295775,"last_synced_commit":"6ae58b81cd3052fd6345b2c5656bc29899525783"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/3846masa%2Fblurhash-sw","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/3846masa%2Fblurhash-sw/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/3846masa%2Fblurhash-sw/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/3846masa%2Fblurhash-sw/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/3846masa","download_url":"https://codeload.github.com/3846masa/blurhash-sw/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249553433,"owners_count":21290222,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blurhash","serviceworker"],"created_at":"2024-11-16T17:40:43.215Z","updated_at":"2025-04-18T21:50:42.663Z","avatar_url":"https://github.com/3846masa.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# BlurHash SW\n\n\u003cimg\n  src=\"./assets/banner.jpg\"\n  alt=\"BlurHash SW\"\n  data-hidden\n/\u003e\n\n\u003c!--\n\u003cdiv\n  class=\"image-wrapper\"\n  style=\"\n    width: -moz-fit-content;\n    width: fit-content;\n    background-color: #5A5E64;\n    border-radius: 8px;\n    overflow: hidden;\n    margin: 0 auto 16px;\n  \"\n  data-blurhash=\"LKBg9{^jWBWV.Twwj[of57IUs:of\"\n\u003e\n  \u003cimg\n    src=\"https://3846masa.github.io/blurhash-sw/assets/banner.jpg?__delay__=1000\"\n    alt=\"BlurHash SW\"\n    width=\"1200\"\n    height=\"630\"\n    style=\"\n      width: 600px;\n      height: auto;\n      margin: auto;\n      opacity: 0;\n      transition: ease-out 0.3s opacity;\n    \"\n    onload=\"this.style.opacity=1\"\n    loading=\"lazy\"\n  /\u003e\n\u003c/div\u003e\n--\u003e\n\n[![npm](https://flat.badgen.net/npm/v/blurhash-sw)](https://www.npmjs.com/package/blurhash-sw)\n[![filesize](https://flat.badgen.net/badgesize/gzip/file-url/unpkg.com/blurhash-sw@1.0.15/dist/index.js)](https://unpkg.com/blurhash-sw@1.0.15/dist/index.js)\n[![license](https://flat.badgen.net/badge/license/MIT/blue)](https://3846masa.mit-license.org)\n[![standard-readme compliant](https://flat.badgen.net/badge/readme%20style/standard/green)](https://github.com/RichardLitt/standard-readme)\n\nThe BlurHash API provided by ServiceWorker.\n\n[https://github.com/3846masa/blurhash-sw](https://github.com/3846masa/blurhash-sw)\n\n## Table of Contents\n\n- [Install](#install)\n- [Usage](#usage)\n- [Contributing](#contributing)\n- [License](#license)\n\n## Install\n\nAdd the following code to your ServiceWorker script.\n\n```js\n// sw.js\nimportScripts('https://unpkg.com/blurhash-sw@1.0.15/dist/index.js');\n\nblurhashSW({\n  routeUrl: '/.blurhash/:blurhash',\n  width: 32,\n  height: 32,\n});\n```\n\n```html\n\u003cscript\u003e\n  if ('serviceWorker' in navigator) {\n    navigator.serviceWorker.register('/sw.js');\n  }\n\u003c/script\u003e\n```\n\n## Usage\n\nSee also [demo page](https://3846masa.github.io/blurhash-sw/).\n\n### The easiest way\n\nSet the BlurHash URL as `background-image`.\n\nYou should encode the BlurHash hash contained in the URL.\n\n```html\n\u003cimg\n  src=\"https://source.unsplash.com/alY6_OpdwRQ/793x529\"\n  alt=\"Shibuya 109\"\n  width=\"793\"\n  height=\"529\"\n  style=\"\n    background-size: 100% 100%;\n    background-image: url(/.blurhash/LGBEE%2CIr.At8t8IU-%3DR%2BR6R4OrIo);\n  \"\n  loading=\"lazy\"\n/\u003e\n```\n\n\u003c!--\n\u003cimg\n  src=\"https://source.unsplash.com/alY6_OpdwRQ/793x529?__delay__=3000\"\n  alt=\"Shibuya 109\"\n  width=\"793\"\n  height=\"529\"\n  style=\"\n    width: 400px;\n    height: auto;\n    background-color: #0c5973;\n    background-size: 100% 100%;\n    background-image: url(/.blurhash/LGBEE%2CIr.At8t8IU-%3DR%2BR6R4OrIo);\n    color: transparent;\n    margin: auto;\n  \"\n  loading=\"lazy\"\n/\u003e\n--\u003e\n\n### With fade-in transition\n\nWrap the img element in the div element.\n\nThe BlurHash URL should be assigned as `background-image` of the div element.\n\n```html\n\u003cdiv\n  style=\"\n    width: fit-content;\n    background-size: 100% 100%;\n    background-image: url(/.blurhash/LKF%23tH-psS%2C%3F3%3FoJWVNbIVs.%24*n%24);\n  \"\n\u003e\n  \u003cimg\n    src=\"https://source.unsplash.com/7H77FWkK_x4/472x512\"\n    alt=\"Tokyo tower\"\n    width=\"472\"\n    height=\"512\"\n    style=\"\n      opacity: 0;\n      transition: ease-out 0.3s opacity;\n    \"\n    onload=\"this.style.opacity=1\"\n    loading=\"lazy\"\n  /\u003e\n\u003c/div\u003e\n```\n\n\u003c!--\n\u003cdiv\n  class=\"image-wrapper\"\n  style=\"\n    width: -moz-fit-content;\n    width: fit-content;\n    background-color: #0c738c;\n    background-size: 100% 100%;\n    background-image: url(/.blurhash/LKF%23tH-psS%2C%3F3%3FoJWVNbIVs.%24*n%24);\n    margin: auto;\n  \"\n\u003e\n  \u003cimg\n    src=\"https://source.unsplash.com/7H77FWkK_x4/472x512?__delay__=3000\"\n    alt=\"Tokyo tower\"\n    width=\"472\"\n    height=\"512\"\n    style=\"\n      width: 300px;\n      height: auto;\n      opacity: 0;\n      transition: ease-out 0.3s opacity;\n    \"\n    onload=\"this.style.opacity=1\"\n    loading=\"lazy\"\n  /\u003e\n\u003c/div\u003e\n--\u003e\n\n### Using `data-blurhash` attribute\n\nThe BlurHash URL is not available until the ServiceWorker is ready.\n\nTherefore, when visiting the site for the first time, `background-image` cannot be loaded.\n\nAs a workaround, generate `background-image` based on `data-blurhash` when the ServiceWorker is ready.\n\n```js\nnavigator.serviceWorker\n  .register('/sw.js')\n  .then(() =\u003e navigator.serviceWorker.ready)\n  .then(() =\u003e {\n    const $elemList = document.querySelectorAll('[data-blurhash]');\n    for (const $elem of $elemList) {\n      const blurhash = $elem.dataset.blurhash;\n      $elem.style.backgroundSize = `100% 100%`;\n      $elem.style.backgroundImage = `url(/.blurhash/${encodeURIComponent(blurhash)})`;\n    }\n  });\n```\n\n```html\n\u003cimg\n  src=\"https://source.unsplash.com/HkGaG67usNE/597x398\"\n  alt=\"Kinkaku-ji\"\n  width=\"597\"\n  height=\"398\"\n  loading=\"lazy\"\n  data-blurhash=\"L%C%zEXANengKnkCj]n$NMjXsoW?\"\n/\u003e\n```\n\n\u003c!--\n\u003cimg\n  src=\"https://source.unsplash.com/HkGaG67usNE/597x398?__delay__=3000\"\n  alt=\"Kinkaku-ji\"\n  width=\"597\"\n  height=\"398\"\n  style=\"\n    width: 400px;\n    height: auto;\n    background-color: #0c8cd9;\n    color: transparent;\n    margin: auto;\n  \"\n  loading=\"lazy\"\n  data-blurhash=\"L%C%zEXANengKnkCj]n$NMjXsoW?\"\n/\u003e\n--\u003e\n\n```html\n\u003cdiv\n  style=\"\n    width: fit-content;\n  \"\n  data-blurhash=\"LmF~daR+NGWA_4RjRjWBkCadV@W;\"\n\u003e\n  \u003cimg\n    src=\"https://source.unsplash.com/wPMvPMD9KBI/262x394\"\n    alt=\"Himeji castle\"\n    width=\"262\"\n    height=\"394\"\n    style=\"\n      opacity: 0;\n      transition: ease-out 0.3s opacity;\n    \"\n    onload=\"this.style.opacity=1\"\n    loading=\"lazy\"\n  /\u003e\n\u003c/div\u003e\n```\n\n\u003c!--\n\u003cdiv\n  class=\"image-wrapper\"\n  style=\"\n    width: -moz-fit-content;\n    width: fit-content;\n    background-color: #262626;\n    margin: auto;\n  \"\n  data-blurhash=\"LmF~daR+NGWA_4RjRjWBkCadV@W;\"\n\u003e\n  \u003cimg\n    src=\"https://source.unsplash.com/wPMvPMD9KBI/262x394?__delay__=3000\"\n    alt=\"Himeji castle\"\n    width=\"262\"\n    height=\"394\"\n    style=\"\n      width: 300px;\n      height: auto;\n      opacity: 0;\n      transition: ease-out 0.3s opacity;\n    \"\n    onload=\"this.style.opacity=1\"\n    loading=\"lazy\"\n  /\u003e\n\u003c/div\u003e\n--\u003e\n\n## Contributing\n\nPRs accepted.\n\n## License\n\n[MIT (c) 3846masa](https://3846masa.mit-license.org)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F3846masa%2Fblurhash-sw","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F3846masa%2Fblurhash-sw","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F3846masa%2Fblurhash-sw/lists"}