[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"verticals":3,"article-crypto-randomuuid-native-uuid":32,"code:js:true:sd2x3a":219,"code:js:true:1ylpvb1":220,"code:js:true:g3fnpo":221,"code:js:true:ng5s9y":222},[4,20],{"id":5,"slug":6,"name":7,"tagline":8,"description":9,"accentFrom":10,"accentTo":11,"icon":12,"defaultLocale":13,"locales":14,"features":16,"position":19},"019fe637-3d33-714b-b57f-23e163ffca0c","dev","Web Development","Build. Learn. Ship.","Practical courses, engineering-grade articles and open-source tools for people who ship.","violet-500","cyan-400","◇","en",[13,15],"fa",{"courses":17,"paths":17,"articles":17,"exams":18,"flashcards":18,"packages":17,"community":17,"certificates":17,"teams":17,"commerce":17},true,false,0,{"id":21,"slug":22,"name":23,"tagline":24,"description":25,"accentFrom":26,"accentTo":10,"icon":27,"defaultLocale":13,"locales":28,"features":30,"position":31},"019fe637-3dc2-754c-8657-0f175bfee7c6","lang","Languages","Learn a language the way you learn a codebase.","Structured paths, listening drills and spaced repetition that actually sticks.","amber-400","⌘",[13,15,29],"es",{"courses":17,"paths":17,"articles":18,"exams":18,"flashcards":18,"packages":18,"community":17,"certificates":18,"teams":18,"commerce":17},2,{"id":33,"slug":34,"title":35,"subtitle":36,"excerpt":37,"coverUrl":38,"locale":13,"readingMinutes":39,"publishedAt":40,"viewCount":41,"likeCount":19,"commentCount":19,"author":42,"vertical":47,"topic":48,"tags":51,"_count":63,"playground":65,"body":67,"bodyMd":201,"seo":202,"translationGroupId":206,"thread":207,"assessments":209,"translations":215,"quiz":217},"019fe660-f552-73c8-9f52-d036e672c053","crypto-randomuuid-native-uuid","Stop importing `uuid`. `crypto.randomUUID()` has been native since 2021.",null,"The `uuid` package is downloaded hundreds of millions of times a week. Most installs exist to call uuid\u002Fv4 — exactly what `crypto.randomUUID()` does natively, with no import, no bundle cost, and guaranteed cryptographic randomness.","\u002Fmedia\u002Fcovers\u002Fcrypto-randomuuid-native-uuid.png",3,"2026-08-08T07:00:09.988Z",51,{"id":43,"name":44,"username":45,"avatarUrl":36,"headline":46},"019fe637-3c25-7088-9034-39c9f15dc3c8","Parsa Jiravand","parsa","Frontend engineer · building bestpractic",{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":49,"name":50},"javascript","JavaScript",[52,54,57,60],{"slug":49,"name":53,"color":36},"Javascript",{"slug":55,"name":56,"color":36},"webdev","Webdev",{"slug":58,"name":59,"color":36},"frontend","Frontend",{"slug":61,"name":62,"color":36},"performance","Performance",{"assessments":64},1,{"slug":34,"title":66},"crypto.randomUUID() — interactive playground",{"blocks":68,"version":64},[69,73,77,83,86,89,93,96,100,103,106,109,113,116,119,122,126,129,132,135,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,190,193],{"id":70,"html":71,"type":72},"b1","\u003Cp>The \u003Ccode>uuid\u003C\u002Fcode> npm package is one of the most downloaded libraries in the JavaScript ecosystem. The vast majority of those installs exist for one thing: \u003Ccode>uuid\u002Fv4\u003C\u002Fcode>, which generates a random unique identifier in the standard \u003Ccode>xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx\u003C\u002Fcode> format. The browser — and Node.js — have been doing this natively since 2021. No package needed.\u003C\u002Fp>","paragraph",{"id":74,"html":75,"text":75,"type":76,"level":31},"b2","The native API","heading",{"id":78,"code":79,"type":80,"language":81,"highlight":82},"b3","const id = crypto.randomUUID();\n\u002F\u002F \"110e8400-e29b-41d4-a716-446655440000\"","code","js",[],{"id":84,"html":85,"type":72},"b4","\u003Cp>That's the entire API surface. One call, no constructor, no configuration. It returns a v4 UUID string — the same format every UUID library produces, the same format your database expects.\u003C\u002Fp>",{"id":87,"html":88,"type":72},"b5","\u003Cp>\u003Ccode>crypto.randomUUID()\u003C\u002Fcode> lives on the Web Crypto API's \u003Ccode>crypto\u003C\u002Fcode> object, which is globally available in browsers, Node.js, Deno, Bun, and Cloudflare Workers. No import required.\u003C\u002Fp>",{"id":90,"html":91,"text":92,"type":76,"level":31},"b6","Why it's safe to trust","Why it's safe to trust",{"id":94,"html":95,"type":72},"b7","\u003Cp>The \u003Ccode>uuid\u002Fv4\u003C\u002Fcode> package generates UUIDs using \u003Ccode>crypto.getRandomValues()\u003C\u002Fcode> internally — the same source \u003Ccode>crypto.randomUUID()\u003C\u002Fcode> uses. Both draw from the operating system's CSPRNG (cryptographically secure pseudorandom number generator). The native method adds nothing risky; it's the same primitive, one level closer to the metal.\u003C\u002Fp>",{"id":97,"code":98,"type":80,"language":81,"highlight":99},"b8","\u002F\u002F What uuid\u002Fv4 does internally (simplified):\nfunction v4() {\n  const bytes = crypto.getRandomValues(new Uint8Array(16));\n  \u002F\u002F ... set version and variant bits, format as string\n  return formatted;\n}\n\n\u002F\u002F What crypto.randomUUID() does:\nconst id = crypto.randomUUID(); \u002F\u002F same operation, no library",[],{"id":101,"html":102,"type":72},"b9","\u003Cp>The security profile is identical. The library adds no cryptographic benefit over the native call.\u003C\u002Fp>",{"id":104,"html":105,"text":105,"type":76,"level":31},"b10","Where it works",{"id":107,"html":108,"type":72},"b11","\u003Cp>\u003Ccode>crypto.randomUUID()\u003C\u002Fcode> is available in any \u003Cstrong>secure context\u003C\u002Fstrong> — HTTPS pages, \u003Ccode>localhost\u003C\u002Fcode>, Service Workers, Web Workers, and Node.js 14.17+.\u003C\u002Fp>",{"id":110,"code":111,"type":80,"language":81,"highlight":112},"b12","\u002F\u002F In a Service Worker\nself.addEventListener('fetch', event => {\n  const requestId = crypto.randomUUID();\n  console.log(`[${requestId}] ${event.request.url}`);\n});\n\n\u002F\u002F In a Web Worker\n\u002F\u002F Inside worker.js:\nconst taskId = crypto.randomUUID();\npostMessage({ taskId, status: 'started' });",[],{"id":114,"html":115,"type":72},"b13","\u003Cp>The "secure context" requirement is the only constraint. If your page is served over HTTPS (or you're on \u003Ccode>localhost\u003C\u002Fcode>), \u003Ccode>crypto\u003C\u002Fcode> is available everywhere the JavaScript runtime runs in that page — main thread, workers, service worker included.\u003C\u002Fp>",{"id":117,"html":118,"text":118,"type":76,"level":31},"b14","Replacing the import",{"id":120,"html":121,"type":72},"b15","\u003Cp>A direct swap, wherever you currently use \u003Ccode>uuid\u003C\u002Fcode>:\u003C\u002Fp>",{"id":123,"code":124,"type":80,"language":81,"highlight":125},"b16","\u002F\u002F Before\nimport { v4 as uuidv4 } from 'uuid';\nconst id = uuidv4();\n\n\u002F\u002F After\nconst id = crypto.randomUUID();",[],{"id":127,"html":128,"type":72},"b17","\u003Cp>The output format is identical. Whether you're generating IDs in a React component, a route handler, a database model, or a logging utility — it's a one-line change per call site. Once every call is replaced, you can remove the dependency from \u003Ccode>package.json\u003C\u002Fcode>.\u003C\u002Fp>",{"id":130,"html":131,"text":131,"type":76,"level":31},"b18","The one case where you still need a library",{"id":133,"html":134,"type":72},"b19","\u003Cp>\u003Ccode>crypto.randomUUID()\u003C\u002Fcode> generates \u003Cstrong>v4 UUIDs only\u003C\u002Fstrong> — random, no namespace. If you need:\u003C\u002Fp>",{"id":136,"type":137,"items":138,"ordered":18},"b20","list",[139,140,141],"\u003Cstrong>v5 UUIDs\u003C\u002Fstrong> (namespace + name, SHA-1 hash based): still use \u003Ccode>uuid\u002Fv5\u003C\u002Fcode>","\u003Cstrong>v3 UUIDs\u003C\u002Fstrong> (namespace + name, MD5 hash based): still use \u003Ccode>uuid\u002Fv3\u003C\u002Fcode>","\u003Cstrong>Parsing or inspecting\u003C\u002Fstrong> UUID bytes, version bits, or variant: still use the library",{"id":143,"html":144,"type":72},"b21","\u003Cp>If you're generating a unique ID for a database row, a request trace ID, a session token, or a UI list item key — v4 is the right choice. That's exactly what \u003Ccode>crypto.randomUUID()\u003C\u002Fcode> gives you.\u003C\u002Fp>",{"id":146,"html":147,"text":147,"type":76,"level":31},"b22","Browser support",{"id":149,"html":150,"type":72},"b23","\u003Cp>\u003Ccode>crypto.randomUUID()\u003C\u002Fcode> is \u003Cstrong>Baseline 2022\u003C\u002Fstrong>: Chrome 92 (July 2021), Firefox 95 (November 2021), Safari 15.4 (March 2022), Node.js 14.17 (May 2021). It has been in every supported browser and server runtime for years. There's nothing to polyfill for any currently-maintained target.\u003C\u002Fp>",{"id":152,"html":153,"type":72},"b24","\u003C!-- playground:start -->",{"id":155,"html":156,"text":156,"type":76,"level":31},"b25","🎮 Try it yourself",{"id":158,"html":159,"type":72},"b26","\u003Cp>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fdaily-post-dev.netlify.app\u002Fposts\u002F2026-08-08-crypto-randomuuid-native-uuid\u002Fplayground\u002F\">▶️ Open the interactive playground →\u003C\u002Fa>\u003C\u002Fstrong>\u003C\u002Fp>",{"id":161,"html":162,"type":72},"b27","\u003Cp>\u003Cem>Runs right in your browser — poke at it and watch the concept react live.\u003C\u002Fem>\u003C\u002Fp>",{"id":164,"html":165,"type":72},"b28","\u003C!-- playground:end -->",{"id":167,"html":168,"type":72},"b29","\u003C!-- quiz:start -->",{"id":170,"html":171,"text":171,"type":76,"level":31},"b30","🧠 Test yourself",{"id":173,"html":174,"type":72},"b31","\u003Cp>Think it clicked? \u003Cstrong>\u003Ca href=\"https:\u002F\u002Fdaily-post-dev.netlify.app\u002Fquiz\u002Ftake.html?post=2026-08-08-crypto-randomuuid-native-uuid\">Take the 9-question quiz →\u003C\u002Fa>\u003C\u002Fstrong>\u003C\u002Fp>",{"id":176,"html":177,"type":72},"b32","\u003Cp>\u003Cem>Instant feedback, a hint on every question, and an explanation for each answer — right or wrong.\u003C\u002Fem>\u003C\u002Fp>",{"id":179,"html":180,"type":72},"b33","\u003C!-- quiz:end -->",{"id":182,"html":183,"text":183,"type":76,"level":31},"b34","The takeaway",{"id":185,"html":186,"type":72},"b35","\u003Cp>Open your \u003Ccode>package.json\u003C\u002Fcode>. If \u003Ccode>uuid\u003C\u002Fcode> is listed and your codebase only uses \u003Ccode>v4\u003C\u002Fcode>, remove it. Search for \u003Ccode>uuid\u002Fv4\u003C\u002Fcode>, \u003Ccode>uuidv4()\u003C\u002Fcode>, or \u003Ccode>import { v4 }\u003C\u002Fcode> and replace each call with \u003Ccode>crypto.randomUUID()\u003C\u002Fcode>. You get the same string format, the same randomness quality, and zero added bundle weight. For v4 UUIDs — the most common case by a wide margin — the native method is strictly better than the library it replaces.\u003C\u002Fp>",{"id":188,"type":189},"b36","divider",{"id":191,"html":192,"type":72},"b37","\u003Cp>\u003Cem>Thanks for reading! Let's stay connected:\u003C\u002Fem>\u003C\u002Fp>",{"id":194,"type":137,"items":195,"ordered":18},"b38",[196,197,198,199,200],"⭐ \u003Cstrong>GitHub\u003C\u002Fstrong> — follow me and star the projects: \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fparsajiravand\">github.com\u002Fparsajiravand\u003C\u002Fa>","💬 \u003Cstrong>Discord\u003C\u002Fstrong> — join the frontend best-practices community: \u003Ca href=\"https:\u002F\u002Fdiscord.gg\u002Fd9KRhuAwQ\">discord.gg\u002Fd9KRhuAwQ\u003C\u002Fa>","📸 \u003Cstrong>Instagram\u003C\u002Fstrong> — frontend best practices, daily: \u003Ca href=\"https:\u002F\u002Fwww.instagram.com\u002Fbestpractice___\u002F\">@bestpractice___\u003C\u002Fa>","💼 \u003Cstrong>LinkedIn\u003C\u002Fstrong> — \u003Ca href=\"https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fparsa-jiravand\u002F\">linkedin.com\u002Fin\u002Fparsa-jiravand\u003C\u002Fa>","✉️ \u003Cstrong>Email\u003C\u002Fstrong> (work & contract inquiries): \u003Ca href=\"mailto:bestpractice2026@gmail.com\">bestpractice2026@gmail.com\u003C\u002Fa>","The `uuid` npm package is one of the most downloaded libraries in the JavaScript ecosystem. The vast majority of those installs exist for one thing: `uuid\u002Fv4`, which generates a random unique identifier in the standard `xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx` format. The browser — and Node.js — have been doing this natively since 2021. No package needed.\n\n## The native API\n\n```js\nconst id = crypto.randomUUID();\n\u002F\u002F \"110e8400-e29b-41d4-a716-446655440000\"\n```\n\nThat's the entire API surface. One call, no constructor, no configuration. It returns a v4 UUID string — the same format every UUID library produces, the same format your database expects.\n\n`crypto.randomUUID()` lives on the Web Crypto API's `crypto` object, which is globally available in browsers, Node.js, Deno, Bun, and Cloudflare Workers. No import required.\n\n## Why it's safe to trust\n\nThe `uuid\u002Fv4` package generates UUIDs using `crypto.getRandomValues()` internally — the same source `crypto.randomUUID()` uses. Both draw from the operating system's CSPRNG (cryptographically secure pseudorandom number generator). The native method adds nothing risky; it's the same primitive, one level closer to the metal.\n\n```js\n\u002F\u002F What uuid\u002Fv4 does internally (simplified):\nfunction v4() {\n  const bytes = crypto.getRandomValues(new Uint8Array(16));\n  \u002F\u002F ... set version and variant bits, format as string\n  return formatted;\n}\n\n\u002F\u002F What crypto.randomUUID() does:\nconst id = crypto.randomUUID(); \u002F\u002F same operation, no library\n```\n\nThe security profile is identical. The library adds no cryptographic benefit over the native call.\n\n## Where it works\n\n`crypto.randomUUID()` is available in any **secure context** — HTTPS pages, `localhost`, Service Workers, Web Workers, and Node.js 14.17+.\n\n```js\n\u002F\u002F In a Service Worker\nself.addEventListener('fetch', event => {\n  const requestId = crypto.randomUUID();\n  console.log(`[${requestId}] ${event.request.url}`);\n});\n\n\u002F\u002F In a Web Worker\n\u002F\u002F Inside worker.js:\nconst taskId = crypto.randomUUID();\npostMessage({ taskId, status: 'started' });\n```\n\nThe \"secure context\" requirement is the only constraint. If your page is served over HTTPS (or you're on `localhost`), `crypto` is available everywhere the JavaScript runtime runs in that page — main thread, workers, service worker included.\n\n## Replacing the import\n\nA direct swap, wherever you currently use `uuid`:\n\n```js\n\u002F\u002F Before\nimport { v4 as uuidv4 } from 'uuid';\nconst id = uuidv4();\n\n\u002F\u002F After\nconst id = crypto.randomUUID();\n```\n\nThe output format is identical. Whether you're generating IDs in a React component, a route handler, a database model, or a logging utility — it's a one-line change per call site. Once every call is replaced, you can remove the dependency from `package.json`.\n\n## The one case where you still need a library\n\n`crypto.randomUUID()` generates **v4 UUIDs only** — random, no namespace. If you need:\n\n- **v5 UUIDs** (namespace + name, SHA-1 hash based): still use `uuid\u002Fv5`\n- **v3 UUIDs** (namespace + name, MD5 hash based): still use `uuid\u002Fv3`\n- **Parsing or inspecting** UUID bytes, version bits, or variant: still use the library\n\nIf you're generating a unique ID for a database row, a request trace ID, a session token, or a UI list item key — v4 is the right choice. That's exactly what `crypto.randomUUID()` gives you.\n\n## Browser support\n\n`crypto.randomUUID()` is **Baseline 2022**: Chrome 92 (July 2021), Firefox 95 (November 2021), Safari 15.4 (March 2022), Node.js 14.17 (May 2021). It has been in every supported browser and server runtime for years. There's nothing to polyfill for any currently-maintained target.\n\n\n\u003C!-- playground:start -->\n\n## 🎮 Try it yourself\n\n**[▶️ Open the interactive playground →](https:\u002F\u002Fdaily-post-dev.netlify.app\u002Fposts\u002F2026-08-08-crypto-randomuuid-native-uuid\u002Fplayground\u002F)**\n\n_Runs right in your browser — poke at it and watch the concept react live._\n\n\u003C!-- playground:end -->\n\n\u003C!-- quiz:start -->\n\n## 🧠 Test yourself\n\nThink it clicked? **[Take the 9-question quiz →](https:\u002F\u002Fdaily-post-dev.netlify.app\u002Fquiz\u002Ftake.html?post=2026-08-08-crypto-randomuuid-native-uuid)**\n\n_Instant feedback, a hint on every question, and an explanation for each answer — right or wrong._\n\n\u003C!-- quiz:end -->\n## The takeaway\n\nOpen your `package.json`. If `uuid` is listed and your codebase only uses `v4`, remove it. Search for `uuid\u002Fv4`, `uuidv4()`, or `import { v4 }` and replace each call with `crypto.randomUUID()`. You get the same string format, the same randomness quality, and zero added bundle weight. For v4 UUIDs — the most common case by a wide margin — the native method is strictly better than the library it replaces.\n\n---\n\n*Thanks for reading! Let's stay connected:*\n\n- ⭐ **GitHub** — follow me and star the projects: [github.com\u002Fparsajiravand](https:\u002F\u002Fgithub.com\u002Fparsajiravand)\n- 💬 **Discord** — join the frontend best-practices community: [discord.gg\u002Fd9KRhuAwQ](https:\u002F\u002Fdiscord.gg\u002Fd9KRhuAwQ)\n- 📸 **Instagram** — frontend best practices, daily: [@bestpractice___](https:\u002F\u002Fwww.instagram.com\u002Fbestpractice___\u002F)\n- 💼 **LinkedIn** — [linkedin.com\u002Fin\u002Fparsa-jiravand](https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fparsa-jiravand\u002F)\n- ✉️ **Email** (work & contract inquiries): [bestpractice2026@gmail.com](mailto:bestpractice2026@gmail.com)",{"title":203,"canonical":204,"description":205},"Stop importing `uuid`. `crypto.randomUUID()` has been native since 202","https:\u002F\u002Fbestpractic.org\u002Fblog\u002Fcrypto-randomuuid-native-uuid","The `uuid` package is downloaded hundreds of millions of times a week. Most installs exist to call uuid\u002Fv4 — exactly what `crypto.randomUUID()` does natively, with no import, no bu","019fe660-f552-73c8-9f52-d73291194afe",{"id":208,"locked":18},"019fe660-fc39-72fb-8495-0596f4de5501",[210],{"id":211,"slug":34,"title":212,"_count":213},"019fe776-cc24-76b9-9a30-141a8ffdcea1","crypto.randomUUID() — native UUID generation",{"questions":214},9,[216],{"locale":13,"slug":34},{"id":211,"slug":34,"title":212,"_count":218,"questionCount":214},{"questions":214},"\u003Cdiv class=\"shj shj-lang-js shj-multiline\" data-lang=\"js\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-kwd\">const\u003C\u002Fspan> id \u003Cspan class=\"shj-oper\">=\u003C\u002Fspan> crypto\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">randomUUID\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n\u003Cspan class=\"shj-cmnt\">\u002F\u002F \"110e8400-e29b-41d4-a716-446655440000\"\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-js shj-multiline\" data-lang=\"js\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003Cdiv>5\u003C\u002Fdiv>\u003Cdiv>6\u003C\u002Fdiv>\u003Cdiv>7\u003C\u002Fdiv>\u003Cdiv>8\u003C\u002Fdiv>\u003Cdiv>9\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-cmnt\">\u002F\u002F What uuid\u002Fv4 does internally (simplified):\n\u003C\u002Fspan>\u003Cspan class=\"shj-kwd\">function\u003C\u002Fspan> \u003Cspan class=\"shj-func\">v4\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-kwd\">const\u003C\u002Fspan> bytes \u003Cspan class=\"shj-oper\">=\u003C\u002Fspan> crypto\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">getRandomValues\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-kwd\">new\u003C\u002Fspan> \u003Cspan class=\"shj-class\">Uint8Array\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-num\">16\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n  \u003Cspan class=\"shj-cmnt\">\u002F\u002F ... set version and variant bits, format as string\n\u003C\u002Fspan>  \u003Cspan class=\"shj-kwd\">return\u003C\u002Fspan> formatted;\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n\n\u003Cspan class=\"shj-cmnt\">\u002F\u002F What crypto.randomUUID() does:\n\u003C\u002Fspan>\u003Cspan class=\"shj-kwd\">const\u003C\u002Fspan> id \u003Cspan class=\"shj-oper\">=\u003C\u002Fspan> crypto\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">randomUUID\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>; \u003Cspan class=\"shj-cmnt\">\u002F\u002F same operation, no library\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-js shj-multiline\" data-lang=\"js\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003Cdiv>5\u003C\u002Fdiv>\u003Cdiv>6\u003C\u002Fdiv>\u003Cdiv>7\u003C\u002Fdiv>\u003Cdiv>8\u003C\u002Fdiv>\u003Cdiv>9\u003C\u002Fdiv>\u003Cdiv>10\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-cmnt\">\u002F\u002F In a Service Worker\n\u003C\u002Fspan>self\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">addEventListener\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-str\">'fetch'\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan> event \u003Cspan class=\"shj-kwd\">=>\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-kwd\">const\u003C\u002Fspan> requestId \u003Cspan class=\"shj-oper\">=\u003C\u002Fspan> crypto\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">randomUUID\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n  console\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">log\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-str\">`[\u003C\u002Fspan>\u003Cspan class=\"shj-kwd\">${\u003C\u002Fspan>requestId\u003Cspan class=\"shj-kwd\">}\u003C\u002Fspan>\u003Cspan class=\"shj-str\">] \u003C\u002Fspan>\u003Cspan class=\"shj-kwd\">${\u003C\u002Fspan>event\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>request\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>url\u003Cspan class=\"shj-kwd\">}\u003C\u002Fspan>\u003Cspan class=\"shj-str\">`\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n\n\u003Cspan class=\"shj-cmnt\">\u002F\u002F In a Web Worker\n\u003C\u002Fspan>\u003Cspan class=\"shj-cmnt\">\u002F\u002F Inside worker.js:\n\u003C\u002Fspan>\u003Cspan class=\"shj-kwd\">const\u003C\u002Fspan> taskId \u003Cspan class=\"shj-oper\">=\u003C\u002Fspan> crypto\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">randomUUID\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n\u003Cspan class=\"shj-func\">postMessage\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan> taskId\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan> status\u003Cspan class=\"shj-oper\">:\u003C\u002Fspan> \u003Cspan class=\"shj-str\">'started'\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-js shj-multiline\" data-lang=\"js\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003Cdiv>5\u003C\u002Fdiv>\u003Cdiv>6\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-cmnt\">\u002F\u002F Before\n\u003C\u002Fspan>\u003Cspan class=\"shj-kwd\">import\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan> v4 \u003Cspan class=\"shj-kwd\">as\u003C\u002Fspan> uuidv4 \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan> \u003Cspan class=\"shj-kwd\">from\u003C\u002Fspan> \u003Cspan class=\"shj-str\">'uuid'\u003C\u002Fspan>;\n\u003Cspan class=\"shj-kwd\">const\u003C\u002Fspan> id \u003Cspan class=\"shj-oper\">=\u003C\u002Fspan> \u003Cspan class=\"shj-func\">uuidv4\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n\n\u003Cspan class=\"shj-cmnt\">\u002F\u002F After\n\u003C\u002Fspan>\u003Cspan class=\"shj-kwd\">const\u003C\u002Fspan> id \u003Cspan class=\"shj-oper\">=\u003C\u002Fspan> crypto\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">randomUUID\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>"]