{"componentChunkName":"component---gatsby-theme-spaceout-src-templates-article-template-tsx","path":"/indexeddb-the-definitive-deep-dive-guide-for-modern-web-applications","result":{"pageContext":{"article":{"id":"c4badbd0-8f9d-55a3-abb5-55ecae4caee6","slug":"/indexeddb-the-definitive-deep-dive-guide-for-modern-web-applications","secret":false,"title":"IndexedDB The Definitive Deep-Dive Guide for Modern Web Applications","author":"Luke Celitan","date":"October 9th, 2025","dateForSEO":"2025-10-09T00:00:00.000Z","timeToRead":3,"excerpt":"A comprehensive, hands-on guide to IndexedDB for offline-first web apps, large-scale client-side storage, and advanced browser data management.","subscription":true,"body":"var _excluded = [\"components\"];\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n \"title\": \"IndexedDB The Definitive Deep-Dive Guide for Modern Web Applications\",\n \"excerpt\": \"A comprehensive, hands-on guide to IndexedDB for offline-first web apps, large-scale client-side storage, and advanced browser data management.\",\n \"date\": \"2025-10-09T00:00:00.000Z\",\n \"hero\": \"indexeddb-cover.png\",\n \"author\": \"Luke Celitan\",\n \"category\": \"Post\",\n \"tech\": [\"JS\", \"TS\"]\n};\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"h2\", {\n \"id\": \"introduction\"\n }, \"Introduction\"), mdx(\"p\", null, \"Welcome to the definitive deep-dive on IndexedDB! If you\\u2019re building modern web\\napplications that need robust offline capabilities, large-scale client-side\\nstorage, or advanced querying, IndexedDB is your go-to browser API. In this\\nguide, I\\u2019ll walk you through everything you need to know\\x14from the architectural\\nfoundations to advanced performance tricks, real-world use cases, and\\nintegration with popular libraries like Dexie.js and RxDB.\"), mdx(\"h3\", {\n \"id\": \"what-is-indexeddb\"\n }, \"What is IndexedDB?\"), mdx(\"p\", null, \"IndexedDB is a low-level, transactional, NoSQL database built into all major\\nbrowsers. Unlike localStorage or cookies, IndexedDB lets you store vast amounts\\nof structured data, perform rich queries, and build offline-first apps that\\nrival native experiences. It\\u2019s asynchronous, event-driven, and designed for\\nscale.\"), mdx(\"h3\", {\n \"id\": \"why-use-indexeddb\"\n }, \"Why Use IndexedDB?\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Offline-first apps:\"), \" Store everything locally, sync when online.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Large data sets:\"), \" Store gigabytes of data, not just kilobytes.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Rich queries:\"), \" Use indexes, cursors, and key ranges for fast lookups.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Resilience:\"), \" Survive network outages, browser restarts, and quota changes.\")), mdx(\"h3\", {\n \"id\": \"comparison-with-alternatives\"\n }, \"Comparison with Alternatives\"), mdx(\"table\", null, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Feature\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"localStorage\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Cookies\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"WebSQL (deprecated)\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"IndexedDB\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Max Size\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"~5MB\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"~4KB\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Varies\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"GBs+\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Structured Data\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"No\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"No\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Yes\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Yes\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Transactions\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"No\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"No\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Yes\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Yes\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Querying\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"No\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"No\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"SQL\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Indexes\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Asynchronous\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"No\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"No\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Yes\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Yes\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Browser Support\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"All\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"All\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Deprecated\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"All\")))), mdx(\"h2\", {\n \"id\": \"indexeddb-architecture--concepts\"\n }, \"IndexedDB Architecture & Concepts\"), mdx(\"p\", null, \"Let\\u2019s start with the core building blocks of IndexedDB.\"), mdx(\"h3\", {\n \"id\": \"object-stores-vs-tables\"\n }, \"Object Stores vs Tables\"), mdx(\"p\", null, \"IndexedDB uses \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"object stores\"), \" instead of tables. Each object store holds\\nrecords, which can be JavaScript objects, strings, or numbers. You can have\\nmultiple object stores per database, each with its own schema.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"// Creating an object store\\nconst request = indexedDB.open('MyDB', 1);\\nrequest.onupgradeneeded = (event) => {\\n const db = event.target.result;\\n db.createObjectStore('customers', { keyPath: 'id' });\\n};\\n\")), mdx(\"h3\", {\n \"id\": \"keys-key-paths-and-key-generators\"\n }, \"Keys, Key Paths, and Key Generators\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Key Path:\"), \" Property of the object used as the primary key.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Key Generator (autoIncrement):\"), \" Automatically generates unique keys.\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"// Auto-incrementing keys\\nconst store = db.createObjectStore('orders', { autoIncrement: true });\\n\")), mdx(\"h3\", {\n \"id\": \"transactions\"\n }, \"Transactions\"), mdx(\"p\", null, \"All operations happen inside transactions. Modes:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"readonly\"), \": For reading data.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"readwrite\"), \": For writing data.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"versionchange\"), \": For schema upgrades.\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"const tx = db.transaction('customers', 'readwrite');\\nconst store = tx.objectStore('customers');\\n\")), mdx(\"h3\", {\n \"id\": \"indexes\"\n }, \"Indexes\"), mdx(\"p\", null, \"Indexes let you search by properties other than the primary key.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"store.createIndex('email', 'email', { unique: true });\\n\")), mdx(\"h3\", {\n \"id\": \"events\"\n }, \"Events\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"onsuccess\"), \": Operation completed.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"onerror\"), \": Operation failed.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"onupgradeneeded\"), \": Schema change required.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"onblocked\"), \": Another tab is blocking upgrade.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"onversionchange\"), \": Another tab requests a version change.\")), mdx(\"h2\", {\n \"id\": \"storage-limits-and-quota-management\"\n }, \"Storage Limits and Quota Management\"), mdx(\"p\", null, \"IndexedDB is powerful, but browsers enforce storage quotas to protect users.\"), mdx(\"h3\", {\n \"id\": \"browser-specific-quotas\"\n }, \"Browser-Specific Quotas\"), mdx(\"table\", null, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Browser\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Approx. Limit\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Notes\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Chrome\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"~80% of free disk\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Per origin cap\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Firefox\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"~2GB (desktop)\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Prompt at 50MB\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Safari (iOS)\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"~1GB\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Stricter on mobile\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Edge\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Similar to Chrome\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Enterprise policies\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Android\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Similar to Chrome\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Device-dependent\")))), mdx(\"h3\", {\n \"id\": \"checking-usage\"\n }, \"Checking Usage\"), mdx(\"p\", null, \"Use the Storage Estimation API:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"const quota = await navigator.storage.estimate();\\nconsole.log('Total:', quota.quota, 'Used:', quota.usage);\\n\")), mdx(\"h3\", {\n \"id\": \"requesting-persistent-storage\"\n }, \"Requesting Persistent Storage\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"const granted = await navigator.storage.persist();\\nif (granted) {\\n console.log('Persistent storage granted!');\\n}\\n\")), mdx(\"h3\", {\n \"id\": \"handling-quotaexceedederror\"\n }, \"Handling QuotaExceededError\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"try {\\n await store.add(largeData);\\n} catch (error) {\\n if (error.name === 'QuotaExceededError') {\\n // Prompt user or clean up old data\\n }\\n}\\n\")), mdx(\"h3\", {\n \"id\": \"strategies-for-large-datasets\"\n }, \"Strategies for Large Datasets\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Compression:\"), \" Use Compression Streams API or RxDB key-compression.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Sharding:\"), \" Split data across subdomains or iframes.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Expiration:\"), \" Remove old or unused records.\")), mdx(\"h2\", {\n \"id\": \"creating-and-structuring-the-database\"\n }, \"Creating and Structuring the Database\"), mdx(\"h3\", {\n \"id\": \"opening-a-database\"\n }, \"Opening a Database\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"const request = indexedDB.open('MyDB', 1);\\nrequest.onsuccess = (event) => {\\n const db = event.target.result;\\n};\\nrequest.onerror = (event) => {\\n console.error('Failed to open DB:', event.target.error);\\n};\\n\")), mdx(\"h3\", {\n \"id\": \"handling-version-upgrades\"\n }, \"Handling Version Upgrades\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"request.onupgradeneeded = (event) => {\\n const db = event.target.result;\\n db.createObjectStore('customers', { keyPath: 'id' });\\n db.createObjectStore('orders', { autoIncrement: true });\\n};\\n\")), mdx(\"h3\", {\n \"id\": \"creating-object-stores-and-indexes\"\n }, \"Creating Object Stores and Indexes\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"const store = db.createObjectStore('customers', { keyPath: 'id' });\\nstore.createIndex('email', 'email', { unique: true });\\nstore.createIndex('name', 'name');\\n\")), mdx(\"h3\", {\n \"id\": \"example-customer-database\"\n }, \"Example: Customer Database\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"const customerData = [\\n { id: 1, name: 'Alice', email: 'alice@example.com' },\\n { id: 2, name: 'Bob', email: 'bob@example.com' },\\n];\\n\\nconst tx = db.transaction('customers', 'readwrite');\\nconst store = tx.objectStore('customers');\\ncustomerData.forEach((customer) => store.add(customer));\\n\")), mdx(\"h2\", {\n \"id\": \"crud-operations\"\n }, \"CRUD Operations\"), mdx(\"h3\", {\n \"id\": \"adding-data\"\n }, \"Adding Data\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"const tx = db.transaction('customers', 'readwrite');\\nconst store = tx.objectStore('customers');\\nstore.add({ id: 3, name: 'Carol', email: 'carol@example.com' });\\n\")), mdx(\"h3\", {\n \"id\": \"retrieving-data\"\n }, \"Retrieving Data\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"const tx = db.transaction('customers');\\nconst store = tx.objectStore('customers');\\nconst request = store.get(3);\\nrequest.onsuccess = (event) => {\\n console.log('Customer:', event.target.result);\\n};\\n\")), mdx(\"h3\", {\n \"id\": \"updating-data\"\n }, \"Updating Data\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"const tx = db.transaction('customers', 'readwrite');\\nconst store = tx.objectStore('customers');\\nconst request = store.get(3);\\nrequest.onsuccess = (event) => {\\n const customer = event.target.result;\\n customer.name = 'Caroline';\\n store.put(customer);\\n};\\n\")), mdx(\"h3\", {\n \"id\": \"deleting-data\"\n }, \"Deleting Data\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"const tx = db.transaction('customers', 'readwrite');\\nconst store = tx.objectStore('customers');\\nstore.delete(3);\\n\")), mdx(\"h3\", {\n \"id\": \"using-cursors\"\n }, \"Using Cursors\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"const tx = db.transaction('customers');\\nconst store = tx.objectStore('customers');\\nstore.openCursor().onsuccess = (event) => {\\n const cursor = event.target.result;\\n if (cursor) {\\n console.log(cursor.key, cursor.value);\\n cursor.continue();\\n }\\n};\\n\")), mdx(\"h3\", {\n \"id\": \"key-ranges-and-cursor-direction\"\n }, \"Key Ranges and Cursor Direction\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"const range = IDBKeyRange.bound(1, 10);\\nstore.openCursor(range, 'prev').onsuccess = (event) => {\\n // Descending order\\n};\\n\")), mdx(\"h2\", {\n \"id\": \"advanced-querying\"\n }, \"Advanced Querying\"), mdx(\"h3\", {\n \"id\": \"using-indexes-for-fast-lookups\"\n }, \"Using Indexes for Fast Lookups\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"const tx = db.transaction('customers');\\nconst store = tx.objectStore('customers');\\nconst index = store.index('email');\\nindex.get('alice@example.com').onsuccess = (event) => {\\n console.log('Found:', event.target.result);\\n};\\n\")), mdx(\"h3\", {\n \"id\": \"compound-indexes-and-multi-property-searches\"\n }, \"Compound Indexes and Multi-Property Searches\"), mdx(\"p\", null, \"IndexedDB doesn\\u2019t support compound indexes natively, but you can store a\\ncomposite key:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"// Store composite key as 'name|email'\\nstore.createIndex('name_email', ['name', 'email']);\\n\")), mdx(\"h3\", {\n \"id\": \"filtering-and-sorting-with-cursors\"\n }, \"Filtering and Sorting with Cursors\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"index.openCursor(IDBKeyRange.lowerBound('A')).onsuccess = (event) => {\\n const cursor = event.target.result;\\n if (cursor) {\\n // Filter and sort as needed\\n cursor.continue();\\n }\\n};\\n\")), mdx(\"h2\", {\n \"id\": \"error-handling-and-transactions\"\n }, \"Error Handling and Transactions\"), mdx(\"h3\", {\n \"id\": \"error-bubbling-and-transaction-aborts\"\n }, \"Error Bubbling and Transaction Aborts\"), mdx(\"p\", null, \"Errors bubble from requests to transactions to the database. Unhandled errors\\nabort the transaction.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"tx.onerror = (event) => {\\n console.error('Transaction error:', event.target.error);\\n};\\n\")), mdx(\"h3\", {\n \"id\": \"handling-version-errors-and-blocked-upgrades\"\n }, \"Handling Version Errors and Blocked Upgrades\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"request.onblocked = (event) => {\\n alert('Please close other tabs to upgrade the database.');\\n};\\ndb.onversionchange = (event) => {\\n db.close();\\n alert('A new version is available. Please reload.');\\n};\\n\")), mdx(\"h3\", {\n \"id\": \"ensuring-durability-and-consistency\"\n }, \"Ensuring Durability and Consistency\"), mdx(\"p\", null, \"Combine related operations in a single transaction to avoid partial updates.\"), mdx(\"h3\", {\n \"id\": \"handling-browser-shutdowns\"\n }, \"Handling Browser Shutdowns\"), mdx(\"p\", null, \"Listen for \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"onclose\"), \" events and avoid relying on \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"unload\"), \" for saving data.\"), mdx(\"h2\", {\n \"id\": \"performance-optimization\"\n }, \"Performance Optimization\"), mdx(\"h3\", {\n \"id\": \"transaction-scope-and-concurrency\"\n }, \"Transaction Scope and Concurrency\"), mdx(\"p\", null, \"Limit transaction scope to needed object stores for concurrency.\"), mdx(\"h3\", {\n \"id\": \"readonly-vs-readwrite-transactions\"\n }, \"Readonly vs Readwrite Transactions\"), mdx(\"p\", null, \"Use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"readonly\"), \" for reads to allow concurrent access.\"), mdx(\"h3\", {\n \"id\": \"bulk-operations-and-batching\"\n }, \"Bulk Operations and Batching\"), mdx(\"p\", null, \"Use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"put\"), \" in loops or batch with wrapper libraries for speed.\"), mdx(\"h3\", {\n \"id\": \"compression\"\n }, \"Compression\"), mdx(\"p\", null, \"Use Compression Streams API or RxDB key-compression for large objects.\"), mdx(\"h3\", {\n \"id\": \"monitoring-usage-and-quota\"\n }, \"Monitoring Usage and Quota\"), mdx(\"p\", null, \"Log results from \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"navigator.storage.estimate()\"), \" in production dashboards.\"), mdx(\"h2\", {\n \"id\": \"advanced-techniques\"\n }, \"Advanced Techniques\"), mdx(\"h3\", {\n \"id\": \"sharding-data-across-subdomainsiframes\"\n }, \"Sharding Data Across Subdomains/Iframes\"), mdx(\"p\", null, \"Store data under multiple origins for massive datasets. Use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"postMessage\"), \" for\\ncommunication.\"), mdx(\"h3\", {\n \"id\": \"cross-tab-communication-and-synchronization\"\n }, \"Cross-Tab Communication and Synchronization\"), mdx(\"p\", null, \"Use BroadcastChannel or localStorage events for sync.\"), mdx(\"h3\", {\n \"id\": \"data-expiration-and-eviction\"\n }, \"Data Expiration and Eviction\"), mdx(\"p\", null, \"Implement TTL logic and clean up old records.\"), mdx(\"h3\", {\n \"id\": \"storing-binary-data\"\n }, \"Storing Binary Data\"), mdx(\"p\", null, \"Store blobs (images, videos) directly in object stores.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"store.add({ id: 4, image: myBlob });\\n\")), mdx(\"h3\", {\n \"id\": \"integration-with-libraries\"\n }, \"Integration with Libraries\"), mdx(\"h4\", {\n \"id\": \"dexiejs-example\"\n }, \"Dexie.js Example\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"import Dexie from 'dexie';\\nconst db = new Dexie('MyDB');\\ndb.version(1).stores({ customers: 'id,name,email' });\\nawait db.customers.add({ id: 5, name: 'Dave', email: 'dave@example.com' });\\n\")), mdx(\"h4\", {\n \"id\": \"rxdb-example\"\n }, \"RxDB Example\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"import { createRxDatabase, addRxPlugin } from 'rxdb';\\naddRxPlugin(require('pouchdb-adapter-idb'));\\nconst db = await createRxDatabase({ name: 'mydb', adapter: 'idb' });\\n\")), mdx(\"h2\", {\n \"id\": \"security-considerations\"\n }, \"Security Considerations\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Same-origin policy:\"), \" Only accessible from the same domain.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Third-party restrictions:\"), \" No access in strict cookie settings.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Incognito mode:\"), \" Data is ephemeral and deleted on session end.\")), mdx(\"h2\", {\n \"id\": \"real-world-use-cases\"\n }, \"Real-World Use Cases\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Offline note-taking apps:\"), \" Store notes locally, sync when online.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"E-commerce carts:\"), \" Persist cart data across sessions.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Media storage:\"), \" Cache images/videos for offline viewing.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Analytics/logs:\"), \" Store event logs for later upload.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"PWAs:\"), \" Seamless offline experience with service workers.\")), mdx(\"h2\", {\n \"id\": \"troubleshooting-and-debugging\"\n }, \"Troubleshooting and Debugging\"), mdx(\"h3\", {\n \"id\": \"common-errors\"\n }, \"Common Errors\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"QuotaExceededError\"), \": Storage full.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"VersionError\"), \": Mismatched schema version.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"TransactionInactiveError\"), \": Transaction ended before request.\")), mdx(\"h3\", {\n \"id\": \"debugging-quota-issues\"\n }, \"Debugging Quota Issues\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Use dev tools to simulate low storage.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Monitor \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"navigator.storage.estimate()\"), \".\")), mdx(\"h3\", {\n \"id\": \"handling-version-changes-with-multiple-tabs\"\n }, \"Handling Version Changes with Multiple Tabs\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Listen for \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"onblocked\"), \" and \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"onversionchange\"), \" events.\")), mdx(\"h3\", {\n \"id\": \"monitoring-and-logging\"\n }, \"Monitoring and Logging\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Log all IndexedDB operations and errors for diagnostics.\")), mdx(\"h2\", {\n \"id\": \"full-example-application\"\n }, \"Full Example Application\"), mdx(\"p\", null, \"Let\\u2019s build a simple offline-first customer manager using IndexedDB and\\nDexie.js.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"import Dexie from 'dexie';\\nconst db = new Dexie('CustomerManager');\\ndb.version(1).stores({ customers: '++id,name,email' });\\n\\n// Add customer\\nawait db.customers.add({ name: 'Eve', email: 'eve@example.com' });\\n\\n// Get all customers\\nconst allCustomers = await db.customers.toArray();\\n\\n// Update customer\\nconst customer = await db.customers.get(1);\\ncustomer.name = 'Eva';\\nawait db.customers.put(customer);\\n\\n// Delete customer\\nawait db.customers.delete(1);\\n\")), mdx(\"h2\", {\n \"id\": \"best-practices-and-common-pitfalls\"\n }, \"Best Practices and Common Pitfalls\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Schema evolution:\"), \" Use version upgrades for changes.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Transaction management:\"), \" Keep transactions short and focused.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Avoid data loss:\"), \" Don\\u2019t rely on \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"unload\"), \" events for saving.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Browser quirks:\"), \" Test on all target browsers, especially mobile Safari.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Error handling:\"), \" Always handle \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"onerror\"), \" and transaction aborts.\")), mdx(\"h2\", {\n \"id\": \"conclusion-and-further-reading\"\n }, \"Conclusion and Further Reading\"), mdx(\"p\", null, \"IndexedDB is a powerhouse for modern web apps. With careful schema design,\\nrobust error handling, and performance optimizations, you can build\\noffline-first experiences that scale. For more, check out:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API\",\n \"target\": \"_blank\",\n \"rel\": \"noreferrer\"\n }, \"IndexedDB API Reference\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://dexie.org/docs/\",\n \"target\": \"_blank\",\n \"rel\": \"noreferrer\"\n }, \"Dexie.js Documentation\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://rxdb.info/\",\n \"target\": \"_blank\",\n \"rel\": \"noreferrer\"\n }, \"RxDB Documentation\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://pouchdb.com/\",\n \"target\": \"_blank\",\n \"rel\": \"noreferrer\"\n }, \"PouchDB\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://web.dev/storage-for-the-web/\",\n \"target\": \"_blank\",\n \"rel\": \"noreferrer\"\n }, \"Storage Quota Management\"))), mdx(\"p\", null, \"Happy coding\\x14and may your apps never run out of space!\"));\n}\n;\nMDXContent.isMDXComponent = true;","tech":["JS","TS"],"category":"Post","appDescription":null,"hero":{"full":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsSAAALEgHS3X78AAAFAUlEQVQ4y0WT51OUVxSHX3qRLiUGUYogHRakl8XdZaVKkb7AUqSroDGgIwIT1GTGJBKIJWAUEaTXGBwUscRknMlkkg+ZyZ/z5Oxrxnz4zb33ved9zjm/e6+iKAoWWf032tnakBQfRcABHxztrHF1dsDJwYbYyCOMXO6lsbacyrJCYqLCiRVFhAXjIHEW2dlYWxgfQDbW6oLIoyH8vPyQq/1ncLS3wd3VGS93F0IO+3NjZICtpQfsbMzS2dpAeFgIwYEBuDg7ss/JXuJt/wdaW1thY6Xg5eFKV2s9+YZs3F2c8fFyx9PNRSoJYXNpmhdPl3m5vcL05DgJ8bF84uuDh+y7SayLs9MHoJWVwARob2eDra21Olqy+u73xNfbC3c3VzLTklmdn2Z3e433b3d4OHmbpMRE/Hx98fHeL5244rLP+QPQWoAOUq5FHu6u7BOYt5enmt3X2xtPD3daGk1srszxbu8ZO09X2d5cxlxvIs9o4FBAgCR1w3u/F4qV1Yd2nZ0csBVTkxPjyTfqOHTQnwN+fmJ+hPxYS1d7KxfPn+VsTyf1dTWMXL1Cg6mWM92dGHMNZKanoc1MtwClXQFZgJZqO1sbmZ+ZIjYmWm2nUWDnz/VQerKYivIyDHodeSeMFBUWkKPVciLXKLExRISH01BXi2KpzsHeDlcx1XJl+s50MHVnnLSUZA76+1NeVkptdRUlAizIz8eg05GVmUlqSgplJSWSqARNvEaAEUQcDUexVGcBurm6YG9rS29PO9sbSxJcTGBgIDHRMURGRIoiCAsNIyoyivi4OMKlolBZ+/sfJCM9Q00QGx0tQKnQydFBBXqJ+RPffsW972+h1+UQLhnT09KkTT0ajYYETQIx0l5oaCjBwSEclf3Dh4MkSbS0nsvswymUT/281fuzX0419EgIc9OTDF7ul/byKMjLo7GhnuKiIlV6nR5ttlYqjCcqKprgoBCCRJ/19fLsp3Web2+hHAk69PHIU8W3QgFVVZxCd/y4Wl12VrZ4ls0Pdya4PvoF/RcvMDw0SJEkiIvToNXmsLGywPt3rwW6gZKWnMjRsFA8Pb3w8fVTTS+WE4wWP+KkknTxZ2R4iOkHU9yeGGPy3h2ebq4xPnaLyspqcg1Gbo+P8fefv/N6dwdl7MYQo4OX6GhpprigUDz8Rq7NNDUSXFNVzf17d7k7Mc7Y1zeZvj/F3KNHrC0tMvPgAc3mFrIysmhvPc3C4xn++esPlKq+CuoHTLSNnMY82IRpoIHTw20UdZ3EdKme7i97KO4ppfJCNS3DrdT0m9R5eW+FfC9D32TE2JrPqb5KOkY7UXTnCqgdaaLqagPVQw2Yr7fRcqMTQ18hEXUaIusSiDOnENOYRFR9IjENx9S5RXHmZDTNqcSLYmUdaUpA0Z/Np/KKiZP9FdQONVIl89JLVRRdLFe/lwxUUjpQhUESxws4oSntozTmVFWWeWJzOsdaMlCSmjLRdstb7NCpyuoykN1lWevJ6TaS3WlQldWpJ60tR1Xqaa06prcfV5XcnEVySxaJZnnLHW1mBq98zrVrI0xO3WNldZEtuVM7z7fZe73Ly1cv1PHV2z3eytV49eYlu3vPefPLK3797S1rG6vMLz5hYWmB7+TwlJujg0xO3GJp7jFba6uiNdaWl0UrLD6ZZ2lhkcePZpidmWV+7gmry6tsrm+yvrb+cW9laZkFif1xcop/AfcLAxA/WZp7AAAAAElFTkSuQmCC","aspectRatio":1,"src":"/static/b58f6519b6b626a78b209be559eeb840/a1946/indexeddb-cover.png","srcSet":"/static/b58f6519b6b626a78b209be559eeb840/5b37e/indexeddb-cover.png 236w,\n/static/b58f6519b6b626a78b209be559eeb840/49058/indexeddb-cover.png 472w,\n/static/b58f6519b6b626a78b209be559eeb840/a1946/indexeddb-cover.png 944w,\n/static/b58f6519b6b626a78b209be559eeb840/6050d/indexeddb-cover.png 1200w","srcWebp":"/static/b58f6519b6b626a78b209be559eeb840/99fbb/indexeddb-cover.webp","srcSetWebp":"/static/b58f6519b6b626a78b209be559eeb840/77392/indexeddb-cover.webp 236w,\n/static/b58f6519b6b626a78b209be559eeb840/1f177/indexeddb-cover.webp 472w,\n/static/b58f6519b6b626a78b209be559eeb840/99fbb/indexeddb-cover.webp 944w,\n/static/b58f6519b6b626a78b209be559eeb840/9000d/indexeddb-cover.webp 1200w","sizes":"(max-width: 944px) 100vw, 944px","tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='400'%20viewBox='0%200%20400%20400'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%20106a633%20633%200%20002%20108c-3%203-3%2042-1%2040%202-1%203-1%206%202l4%202-3%202c-2%202-4%202-2%200%201-2%201-3-2-2-2%200-3%201-2%202l-1%201c-1%201%200%206%202%206l2-1%202-1%204-1h3l3%202-3-3-2-4h1l2-1%202-2%201%202c1%202%202%202%202%201%200-2%204%203%204%205l3%203%203%202%206%201a4547%204547%200%200114%200l3%201c3%202%205%203%2010%203l7%201%201%201h6l5-1c1%200%201%201%202-7%200-9%201-12%202-10h1c-1-1%200-2%201-2%201-1%201%200%201%204v4l1-7c0-4%201-7%202-7l1%201c-1%201%200%203%201%204l1%204%201%203%201-6%201-6v16c0%2010%200%2011%201%204v-10h7c5%200%206%200%205%201h4c2-2%204%206%204%2014%200%204%202%206%204%203%201-1%201-1%201%202-1%202%200%203%201%203%201%201%201%200%201-4l1-5%201%201h1c1-1%201-1%201%202s0%203-1%202c-1-2-1-1-1%202v5H81c-46%200-47%200-48-2%200-2-1-3-2-1v2H8l-4%201H0v43l1%2042%203-1%203-1%205-1%204-2c1-1%201-1-1-1-3%200-6-2-4-2%204-3%2042-4%2042-2l-1%201-1%201%2010-1a7167%207167%200%2001336-1c3-1%204%201%202%203h-3l-3%201h-2c0%201%201%202%204%202l5%202c1%201%201-18%201-41v-42h-30v-9c0-8%200-9-3-11-3-4-4-4-8-1-4%202-4%202%202%202h4l-3%201-8%201c-3%200-4%200-3-2%200-2-1-3-2%200l-2%201c-2%200-2-7%200-11%201-1%200-6-3-20-5-19-5-22-1-23l4-1%204-2%202-3c0-2%201-2%204-2%204%200%205%200%208-4l5-6c2%200%204-3%205-4%202-4%207-8%209-8l8-5%207-5v19l1-87V0h-55a962%20962%200%2000-96%205c-3-1-10%202-9%203s0%201-1%201h-2c1%201%201%201-1%201h-1c1%201%201%201-1%201h-1v1h-2c-1-1-10%207-12%209l-2%204V0H0v106m105-90c-18%208-13%2035%207%2037%208%200%2016-3%2019-9%2011-16-7-37-26-28m163%200h-5l-8%201c-2%201-4%202-5%201l-1%201-2%201c-3%200-16%205-20%208l-4%202c-1-1-2%201-3%204a386%20386%200%2000-1%2047h-3c-1%200-2-1-2-17V47l-1%2021-3%2027c-1%203-2%207-1%208l-1%202v-2l-2%201c-3%202-5%203-5%201h-1l-6%203c-18%207-35%2022-34%2030l1%201c2-6%204-7%209-11%205-3%207-4%209-3%202%200%202%200%201-1l-1-1h3c-1%201%202%202%204%201s1-3-2-2h-2l2-1c3-3%2016-6%2027-9a5077%205077%200%200022-4h5l-4%201h2a441%20441%200%2001121%208l9%201h2v-1l-1-1c-2%200-3-2-2-4%200-2%202-3%202%200h1c0-2%200-2%2012-5%209-1%209-1%206%202s-2%203%202%200l2-2v8l-1%209v5l-1%201-2%202a365%20365%200%2000-1%203c-1-2-1-2-1%200%200%201%200%202-2%201v2l-6%201c0%202%204%201%2014-3l10-3v-4c0-5-1-6-4-6-1%200-2%201-1%202l-2%201c-2%200-2%200-1-1v-1l-1-8c0-8%201-10%205-9l2-1%201-2%201-1c-1-1-20%203-30%205-6%201-6%201-6-3l-1-3v3c0%204%200%204-5%205l-4%202h3l5%201c0%201-3%201-11-1-4-1-4-1-4-4v-3l-1%203-1%202-2-1-1-3-2-3-1-3c0-1%200-2-1-1v1l-1%201c-1%201-1%200-1-3l1-4v-3l-1-2-2%202-6%204c-4%202-5%204-5%208v4l-8-1c-9%200-8%200-8-4%200-8%200-10%202-10l-1-2-8-2c-4%200-5%200-3-1%202%200%203-1%203-3s-1-2-4-2c-1%200-1-1%201-2%202-3%203-7%201-8s-1-4%201-3l1-2-1-2-1-3c0-2%200-2-1%200-1%201-1%201-1-1l-1-6%202-4c2-1%202-3%202-7v-5l-4%201c-4%200-4%200-4-2l-1-2c-5-1-6-1-6%201h-4l1-3h3c6%200%207-1%206-4-1-7-4-10-11-12l-5-1-5-2-1%201M90%20113a1917%201917%200%2000-1%2061v12h1c1-1%201%201%201%204-1%206-2%208-2%202%200-5-1-5-4-3h-3c-1-2-2%203-2%2011l1%209c2%200%201%207%200%206h-1c2%202-1%205-5%205-5%201-12%205-12%206h2c3-2%2010-4%2018-5l4-1-1%203c-1%203-1%203-10%206-10%203-11%204-11%205h3c4-3%2014-5%2023-6h8l-1-5v-5h19a608%20608%200%200016-2l-4-1-2%201c-2%200-3%200-2-1%200-2%200-2-3-1h-5c-1%201-1%201-1-1s-9-11-11-11-2-4-1-6c2-2%204-1%205%201%200%202%201%202%204%202h7c0-1%201-1%209%201%202%200%202%200%201-1l-6-2-5-3h-5l-6-1-7-1v-1l1-1h10c11%200%2015-1%209-3-3-1-7-5-7-6l5-1c4%200%205%200%205-2h1l1%202c-1%201%200%201%202%201l2-1-1-1h-1c-1-1%202-2%204-1%202%202%204%200%202-1l-2-2c1-2-5-4-12-5-5%200-7-1-6-2h5c1%201%201-1%201-5l-1-6c-2%200-2-4-1-11v-8l-1-6-1%2020-1%2013-1-30%201-4c2%200%203-3%202-6%200-2-1-3-2-3-3%200-2-2%201-2h4l-3-1c-3-1-3-1%201-1%202%200%203%200%201-1l-2-2%201-2h1c1-1%200-1-1-1l-2%201-7%201-5%201-2%201c-3%200-3%200-3-7l-1-6v7l-1%208-1%202c-1%201-1-1-1-3%200-15-1-16-2-2l-1%209v-12c0-15-2-15-2%201m194-2l-1%208v6h-14l-24%202c-14%202-16%202-7%200l7-2h-5c-5%200-5%200-5-4-1-5-5-5-6%201l-1%204v1c3%200-3%202-7%202s-5%202-2%202c1%200%201%201-1%201-3%201-3%201-2-5l-1-6c-1-1-1%200-1%203l-2%206c-2%202-10%204-11%203l-2%202v1c2%200-1%203-4%203l-1-7c0-9-1-9-4-9-2%201-2%203-2%2013l-1%204h-3l-4%201-3%201-1%201c-2%204-4%202-4-4v-5l-1%207c-1%208-2%2011-4%2010l-1%201v1c-1%200-2%203-1%205s1%202%201%200%201-3%204-4v-1l7-4c30-16%2095-25%20141-19h14l2%202v-1l-1-6c0-5%200-6-1-5l-1%203c3%205-1%206-13%205a611%20611%200%2000-27-3c2%200%203%200%202-2%200-3%201-3%202%200%201%202%201%201%201-3l-1-6h-4l-1-1h-1l-1%202-1-3c0-4-1-4-3-1m-88%2081l-3%202c-3%200-3%200-5%202-1%201-3%203-5%203l-3%203-1%201c0-1-4%200-7%202l-5%204-1%202v-1c0-1-1-1-5%201s-6%205-2%203l1%201c-1%201-1%201%201%201h1c0%201%200%202%202%202h5l-2-1-4-3%208-4c14-9%2030-19%2029-20%200-2-2-1-4%202m19%2016l-2%201c0-3-2-1-2%201l2%202c2%200%201%202-1%202l-2%202-1%201c-2%200-4%203-7%2018l-3%2013h-9c-3-2-10%203-12%209-3%2010-4%2012-9%2012-4%200-5%200-9%203l-6%203c-1%200-4%201-9%206l-7%203c-1-1-2%200-2%201-1%201%202%201%2028%201%2027%200%2028%200%2028-2l-2-2c-2%200-2-1-2-7s0-7-2-7c-1-1%202-1%206-1l7-1c0-2%202-1%202%201%201%201%201%200%201-1%200-2%200-3%202-3l8-1c5%200%205%200%202%201s-3%201-3%204v3l-1-3c0-2%200-3-3-3s-3%200-3%203l2%203v1c-2%200-2%200-1%201%203%202%201%207-2%2010-4%203-1%204%2018%204%2018%200%2019%200%2019-2l1-4%202-3h-6c-7%200-6-1%201-1%206-1%206-1%206-3v-4l-1%202-1%202v-8c0-7%200-7-2-6l-2-1h-8l4-1c5-1%206-2%204-4h1l3-1v-2c2%200%202-1%201-2v-3c1-2%200-4-2-4a186%20186%200%20010-30c0-3%200-3-3-3-2%200-3%200-4%207l-2%207v-6c1-6%200-5-1%202-2%206-6%2013-9%2014l-3-1c0-2%201-4%203-4s1-3-1-3l-2-3c0-2%200-2-2-1s-2%201%200-11c0-4%200-4-2-1m47%208c0%203%200%204-1%202s-1-2-2%200c-1%204-3%204-3%200%200-2%200-3-1-1%200%203-2%203-2-1v-2l-3%2033c0%204-2%206-5%204l-2%201%204%201c3%200%204%200%203%201l-1%204c0%204%200%204-1%202s-1-1-1%203l1%206c3%200%202%208-1%2011l-3%202c-1-1-1-1%200%200l-1%201v1c0%202%202%202%2012%202%2013%200%2013%200%2013-7%200-1%200-2%201-1l1%203%201%202h1l6%201%206%201h1c0-1%208-2%208%200l7%201h6v-3c0-3%200-3-1-1v-10l-1-13c-1-1-2-3-2-16%200-7-2-8-2-1a382%20382%200%2001-1%2016c-2-3-2-3-2-1-1%201-1-2-1-7%200-15-2-24-3-13v4l-1%2010v-3c0-5-2-6-8-6-9%200-11%201-12%207l-1%204-1%203-1%203-1-12-1-28-1%205c-2%207-3%205-3-4s-1-12-1-4m-150%206c0%202-4%206-4%203l-1-1-4%201c-7%202-3%203%207%203a109%20109%200%200121%200c2%200%200-2-3-2-2%200-3%200-3-3%200-4-1-5-1-2s0%203-5%203c-6%200-6%200-6-3-1-2-1-2-1%201m156%2048c0%205%201%206%202%204h5l1-3c-1-2-1-2%207-2%209-1%2010-1%208%201v3l2-3%201-3-14-1h-13l1%204m59%2010v3l-2-2c-2-2-9-4-12-4-1%200-2%201-2%203v3l-2-3-1-3v3l2%204-1%201c-1%201%202%201%2010%201l11-1%201-2-1-2-1-3-1-2-1%204M41%20301l-1%202c0%201-1%202-3%202-4%201-6%204-5%208s4%205%208%204h3v-9c0-7-1-9-2-7m51%202c0%202%200%203-3%202-5-1-8%207-3%2011%201%201%202%202%203%201h3c2%200%202-1%202-9l-1-8-1%203m6%206v8h4c6%200%209-2%209-7%200-6-3-9-10-9h-3v8m16%200v8h5c6%200%208-2%206-6v-5c0-3-2-5-7-5h-4v8m-67-3c-4%206%201%2014%207%2011%204-1%203-3-1-2l-4-1c-1-2%200-2%204-2%203%200%204%200%204-2%200-4-7-7-10-4m1%2019v12c3%202%2010-3%2010-7s-7-8-10-5m81%205l1%207%203-1c9%200%209-12-1-12h-3v6m48%200l1%207%203-1c9%200%209-12-1-12h-3v6M49%20369l-15%202c-6%200-10%201-11%202h-2l-1%201-2%201-10%201H0v3c0%205%205%206%2024%205a100%20100%200%200024-4c6-1%207-2%205-6h-3l-2%201%201-1-1-1-3-2h3l7-3-6%201'%20fill='%23fafafa'%20fill-rule='evenodd'/%3e%3c/svg%3e"},"regular":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsSAAALEgHS3X78AAAFAUlEQVQ4y0WT51OUVxSHX3qRLiUGUYogHRakl8XdZaVKkb7AUqSroDGgIwIT1GTGJBKIJWAUEaTXGBwUscRknMlkkg+ZyZ/z5Oxrxnz4zb33ved9zjm/e6+iKAoWWf032tnakBQfRcABHxztrHF1dsDJwYbYyCOMXO6lsbacyrJCYqLCiRVFhAXjIHEW2dlYWxgfQDbW6oLIoyH8vPyQq/1ncLS3wd3VGS93F0IO+3NjZICtpQfsbMzS2dpAeFgIwYEBuDg7ss/JXuJt/wdaW1thY6Xg5eFKV2s9+YZs3F2c8fFyx9PNRSoJYXNpmhdPl3m5vcL05DgJ8bF84uuDh+y7SayLs9MHoJWVwARob2eDra21Olqy+u73xNfbC3c3VzLTklmdn2Z3e433b3d4OHmbpMRE/Hx98fHeL5244rLP+QPQWoAOUq5FHu6u7BOYt5enmt3X2xtPD3daGk1srszxbu8ZO09X2d5cxlxvIs9o4FBAgCR1w3u/F4qV1Yd2nZ0csBVTkxPjyTfqOHTQnwN+fmJ+hPxYS1d7KxfPn+VsTyf1dTWMXL1Cg6mWM92dGHMNZKanoc1MtwClXQFZgJZqO1sbmZ+ZIjYmWm2nUWDnz/VQerKYivIyDHodeSeMFBUWkKPVciLXKLExRISH01BXi2KpzsHeDlcx1XJl+s50MHVnnLSUZA76+1NeVkptdRUlAizIz8eg05GVmUlqSgplJSWSqARNvEaAEUQcDUexVGcBurm6YG9rS29PO9sbSxJcTGBgIDHRMURGRIoiCAsNIyoyivi4OMKlolBZ+/sfJCM9Q00QGx0tQKnQydFBBXqJ+RPffsW972+h1+UQLhnT09KkTT0ajYYETQIx0l5oaCjBwSEclf3Dh4MkSbS0nsvswymUT/281fuzX0419EgIc9OTDF7ul/byKMjLo7GhnuKiIlV6nR5ttlYqjCcqKprgoBCCRJ/19fLsp3Web2+hHAk69PHIU8W3QgFVVZxCd/y4Wl12VrZ4ls0Pdya4PvoF/RcvMDw0SJEkiIvToNXmsLGywPt3rwW6gZKWnMjRsFA8Pb3w8fVTTS+WE4wWP+KkknTxZ2R4iOkHU9yeGGPy3h2ebq4xPnaLyspqcg1Gbo+P8fefv/N6dwdl7MYQo4OX6GhpprigUDz8Rq7NNDUSXFNVzf17d7k7Mc7Y1zeZvj/F3KNHrC0tMvPgAc3mFrIysmhvPc3C4xn++esPlKq+CuoHTLSNnMY82IRpoIHTw20UdZ3EdKme7i97KO4ppfJCNS3DrdT0m9R5eW+FfC9D32TE2JrPqb5KOkY7UXTnCqgdaaLqagPVQw2Yr7fRcqMTQ18hEXUaIusSiDOnENOYRFR9IjENx9S5RXHmZDTNqcSLYmUdaUpA0Z/Np/KKiZP9FdQONVIl89JLVRRdLFe/lwxUUjpQhUESxws4oSntozTmVFWWeWJzOsdaMlCSmjLRdstb7NCpyuoykN1lWevJ6TaS3WlQldWpJ60tR1Xqaa06prcfV5XcnEVySxaJZnnLHW1mBq98zrVrI0xO3WNldZEtuVM7z7fZe73Ly1cv1PHV2z3eytV49eYlu3vPefPLK3797S1rG6vMLz5hYWmB7+TwlJujg0xO3GJp7jFba6uiNdaWl0UrLD6ZZ2lhkcePZpidmWV+7gmry6tsrm+yvrb+cW9laZkFif1xcop/AfcLAxA/WZp7AAAAAElFTkSuQmCC","aspectRatio":1,"src":"/static/b58f6519b6b626a78b209be559eeb840/3ddd4/indexeddb-cover.png","srcSet":"/static/b58f6519b6b626a78b209be559eeb840/078a8/indexeddb-cover.png 163w,\n/static/b58f6519b6b626a78b209be559eeb840/e56da/indexeddb-cover.png 327w,\n/static/b58f6519b6b626a78b209be559eeb840/3ddd4/indexeddb-cover.png 653w,\n/static/b58f6519b6b626a78b209be559eeb840/c5cc7/indexeddb-cover.png 980w,\n/static/b58f6519b6b626a78b209be559eeb840/6050d/indexeddb-cover.png 1200w","srcWebp":"/static/b58f6519b6b626a78b209be559eeb840/0acdf/indexeddb-cover.webp","srcSetWebp":"/static/b58f6519b6b626a78b209be559eeb840/ac59e/indexeddb-cover.webp 163w,\n/static/b58f6519b6b626a78b209be559eeb840/7660b/indexeddb-cover.webp 327w,\n/static/b58f6519b6b626a78b209be559eeb840/0acdf/indexeddb-cover.webp 653w,\n/static/b58f6519b6b626a78b209be559eeb840/75470/indexeddb-cover.webp 980w,\n/static/b58f6519b6b626a78b209be559eeb840/9000d/indexeddb-cover.webp 1200w","sizes":"(max-width: 653px) 100vw, 653px","tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='400'%20viewBox='0%200%20400%20400'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%20106a633%20633%200%20002%20108c-3%203-3%2042-1%2040%202-1%203-1%206%202l4%202-3%202c-2%202-4%202-2%200%201-2%201-3-2-2-2%200-3%201-2%202l-1%201c-1%201%200%206%202%206l2-1%202-1%204-1h3l3%202-3-3-2-4h1l2-1%202-2%201%202c1%202%202%202%202%201%200-2%204%203%204%205l3%203%203%202%206%201a4547%204547%200%200114%200l3%201c3%202%205%203%2010%203l7%201%201%201h6l5-1c1%200%201%201%202-7%200-9%201-12%202-10h1c-1-1%200-2%201-2%201-1%201%200%201%204v4l1-7c0-4%201-7%202-7l1%201c-1%201%200%203%201%204l1%204%201%203%201-6%201-6v16c0%2010%200%2011%201%204v-10h7c5%200%206%200%205%201h4c2-2%204%206%204%2014%200%204%202%206%204%203%201-1%201-1%201%202-1%202%200%203%201%203%201%201%201%200%201-4l1-5%201%201h1c1-1%201-1%201%202s0%203-1%202c-1-2-1-1-1%202v5H81c-46%200-47%200-48-2%200-2-1-3-2-1v2H8l-4%201H0v43l1%2042%203-1%203-1%205-1%204-2c1-1%201-1-1-1-3%200-6-2-4-2%204-3%2042-4%2042-2l-1%201-1%201%2010-1a7167%207167%200%2001336-1c3-1%204%201%202%203h-3l-3%201h-2c0%201%201%202%204%202l5%202c1%201%201-18%201-41v-42h-30v-9c0-8%200-9-3-11-3-4-4-4-8-1-4%202-4%202%202%202h4l-3%201-8%201c-3%200-4%200-3-2%200-2-1-3-2%200l-2%201c-2%200-2-7%200-11%201-1%200-6-3-20-5-19-5-22-1-23l4-1%204-2%202-3c0-2%201-2%204-2%204%200%205%200%208-4l5-6c2%200%204-3%205-4%202-4%207-8%209-8l8-5%207-5v19l1-87V0h-55a962%20962%200%2000-96%205c-3-1-10%202-9%203s0%201-1%201h-2c1%201%201%201-1%201h-1c1%201%201%201-1%201h-1v1h-2c-1-1-10%207-12%209l-2%204V0H0v106m105-90c-18%208-13%2035%207%2037%208%200%2016-3%2019-9%2011-16-7-37-26-28m163%200h-5l-8%201c-2%201-4%202-5%201l-1%201-2%201c-3%200-16%205-20%208l-4%202c-1-1-2%201-3%204a386%20386%200%2000-1%2047h-3c-1%200-2-1-2-17V47l-1%2021-3%2027c-1%203-2%207-1%208l-1%202v-2l-2%201c-3%202-5%203-5%201h-1l-6%203c-18%207-35%2022-34%2030l1%201c2-6%204-7%209-11%205-3%207-4%209-3%202%200%202%200%201-1l-1-1h3c-1%201%202%202%204%201s1-3-2-2h-2l2-1c3-3%2016-6%2027-9a5077%205077%200%200022-4h5l-4%201h2a441%20441%200%2001121%208l9%201h2v-1l-1-1c-2%200-3-2-2-4%200-2%202-3%202%200h1c0-2%200-2%2012-5%209-1%209-1%206%202s-2%203%202%200l2-2v8l-1%209v5l-1%201-2%202a365%20365%200%2000-1%203c-1-2-1-2-1%200%200%201%200%202-2%201v2l-6%201c0%202%204%201%2014-3l10-3v-4c0-5-1-6-4-6-1%200-2%201-1%202l-2%201c-2%200-2%200-1-1v-1l-1-8c0-8%201-10%205-9l2-1%201-2%201-1c-1-1-20%203-30%205-6%201-6%201-6-3l-1-3v3c0%204%200%204-5%205l-4%202h3l5%201c0%201-3%201-11-1-4-1-4-1-4-4v-3l-1%203-1%202-2-1-1-3-2-3-1-3c0-1%200-2-1-1v1l-1%201c-1%201-1%200-1-3l1-4v-3l-1-2-2%202-6%204c-4%202-5%204-5%208v4l-8-1c-9%200-8%200-8-4%200-8%200-10%202-10l-1-2-8-2c-4%200-5%200-3-1%202%200%203-1%203-3s-1-2-4-2c-1%200-1-1%201-2%202-3%203-7%201-8s-1-4%201-3l1-2-1-2-1-3c0-2%200-2-1%200-1%201-1%201-1-1l-1-6%202-4c2-1%202-3%202-7v-5l-4%201c-4%200-4%200-4-2l-1-2c-5-1-6-1-6%201h-4l1-3h3c6%200%207-1%206-4-1-7-4-10-11-12l-5-1-5-2-1%201M90%20113a1917%201917%200%2000-1%2061v12h1c1-1%201%201%201%204-1%206-2%208-2%202%200-5-1-5-4-3h-3c-1-2-2%203-2%2011l1%209c2%200%201%207%200%206h-1c2%202-1%205-5%205-5%201-12%205-12%206h2c3-2%2010-4%2018-5l4-1-1%203c-1%203-1%203-10%206-10%203-11%204-11%205h3c4-3%2014-5%2023-6h8l-1-5v-5h19a608%20608%200%200016-2l-4-1-2%201c-2%200-3%200-2-1%200-2%200-2-3-1h-5c-1%201-1%201-1-1s-9-11-11-11-2-4-1-6c2-2%204-1%205%201%200%202%201%202%204%202h7c0-1%201-1%209%201%202%200%202%200%201-1l-6-2-5-3h-5l-6-1-7-1v-1l1-1h10c11%200%2015-1%209-3-3-1-7-5-7-6l5-1c4%200%205%200%205-2h1l1%202c-1%201%200%201%202%201l2-1-1-1h-1c-1-1%202-2%204-1%202%202%204%200%202-1l-2-2c1-2-5-4-12-5-5%200-7-1-6-2h5c1%201%201-1%201-5l-1-6c-2%200-2-4-1-11v-8l-1-6-1%2020-1%2013-1-30%201-4c2%200%203-3%202-6%200-2-1-3-2-3-3%200-2-2%201-2h4l-3-1c-3-1-3-1%201-1%202%200%203%200%201-1l-2-2%201-2h1c1-1%200-1-1-1l-2%201-7%201-5%201-2%201c-3%200-3%200-3-7l-1-6v7l-1%208-1%202c-1%201-1-1-1-3%200-15-1-16-2-2l-1%209v-12c0-15-2-15-2%201m194-2l-1%208v6h-14l-24%202c-14%202-16%202-7%200l7-2h-5c-5%200-5%200-5-4-1-5-5-5-6%201l-1%204v1c3%200-3%202-7%202s-5%202-2%202c1%200%201%201-1%201-3%201-3%201-2-5l-1-6c-1-1-1%200-1%203l-2%206c-2%202-10%204-11%203l-2%202v1c2%200-1%203-4%203l-1-7c0-9-1-9-4-9-2%201-2%203-2%2013l-1%204h-3l-4%201-3%201-1%201c-2%204-4%202-4-4v-5l-1%207c-1%208-2%2011-4%2010l-1%201v1c-1%200-2%203-1%205s1%202%201%200%201-3%204-4v-1l7-4c30-16%2095-25%20141-19h14l2%202v-1l-1-6c0-5%200-6-1-5l-1%203c3%205-1%206-13%205a611%20611%200%2000-27-3c2%200%203%200%202-2%200-3%201-3%202%200%201%202%201%201%201-3l-1-6h-4l-1-1h-1l-1%202-1-3c0-4-1-4-3-1m-88%2081l-3%202c-3%200-3%200-5%202-1%201-3%203-5%203l-3%203-1%201c0-1-4%200-7%202l-5%204-1%202v-1c0-1-1-1-5%201s-6%205-2%203l1%201c-1%201-1%201%201%201h1c0%201%200%202%202%202h5l-2-1-4-3%208-4c14-9%2030-19%2029-20%200-2-2-1-4%202m19%2016l-2%201c0-3-2-1-2%201l2%202c2%200%201%202-1%202l-2%202-1%201c-2%200-4%203-7%2018l-3%2013h-9c-3-2-10%203-12%209-3%2010-4%2012-9%2012-4%200-5%200-9%203l-6%203c-1%200-4%201-9%206l-7%203c-1-1-2%200-2%201-1%201%202%201%2028%201%2027%200%2028%200%2028-2l-2-2c-2%200-2-1-2-7s0-7-2-7c-1-1%202-1%206-1l7-1c0-2%202-1%202%201%201%201%201%200%201-1%200-2%200-3%202-3l8-1c5%200%205%200%202%201s-3%201-3%204v3l-1-3c0-2%200-3-3-3s-3%200-3%203l2%203v1c-2%200-2%200-1%201%203%202%201%207-2%2010-4%203-1%204%2018%204%2018%200%2019%200%2019-2l1-4%202-3h-6c-7%200-6-1%201-1%206-1%206-1%206-3v-4l-1%202-1%202v-8c0-7%200-7-2-6l-2-1h-8l4-1c5-1%206-2%204-4h1l3-1v-2c2%200%202-1%201-2v-3c1-2%200-4-2-4a186%20186%200%20010-30c0-3%200-3-3-3-2%200-3%200-4%207l-2%207v-6c1-6%200-5-1%202-2%206-6%2013-9%2014l-3-1c0-2%201-4%203-4s1-3-1-3l-2-3c0-2%200-2-2-1s-2%201%200-11c0-4%200-4-2-1m47%208c0%203%200%204-1%202s-1-2-2%200c-1%204-3%204-3%200%200-2%200-3-1-1%200%203-2%203-2-1v-2l-3%2033c0%204-2%206-5%204l-2%201%204%201c3%200%204%200%203%201l-1%204c0%204%200%204-1%202s-1-1-1%203l1%206c3%200%202%208-1%2011l-3%202c-1-1-1-1%200%200l-1%201v1c0%202%202%202%2012%202%2013%200%2013%200%2013-7%200-1%200-2%201-1l1%203%201%202h1l6%201%206%201h1c0-1%208-2%208%200l7%201h6v-3c0-3%200-3-1-1v-10l-1-13c-1-1-2-3-2-16%200-7-2-8-2-1a382%20382%200%2001-1%2016c-2-3-2-3-2-1-1%201-1-2-1-7%200-15-2-24-3-13v4l-1%2010v-3c0-5-2-6-8-6-9%200-11%201-12%207l-1%204-1%203-1%203-1-12-1-28-1%205c-2%207-3%205-3-4s-1-12-1-4m-150%206c0%202-4%206-4%203l-1-1-4%201c-7%202-3%203%207%203a109%20109%200%200121%200c2%200%200-2-3-2-2%200-3%200-3-3%200-4-1-5-1-2s0%203-5%203c-6%200-6%200-6-3-1-2-1-2-1%201m156%2048c0%205%201%206%202%204h5l1-3c-1-2-1-2%207-2%209-1%2010-1%208%201v3l2-3%201-3-14-1h-13l1%204m59%2010v3l-2-2c-2-2-9-4-12-4-1%200-2%201-2%203v3l-2-3-1-3v3l2%204-1%201c-1%201%202%201%2010%201l11-1%201-2-1-2-1-3-1-2-1%204M41%20301l-1%202c0%201-1%202-3%202-4%201-6%204-5%208s4%205%208%204h3v-9c0-7-1-9-2-7m51%202c0%202%200%203-3%202-5-1-8%207-3%2011%201%201%202%202%203%201h3c2%200%202-1%202-9l-1-8-1%203m6%206v8h4c6%200%209-2%209-7%200-6-3-9-10-9h-3v8m16%200v8h5c6%200%208-2%206-6v-5c0-3-2-5-7-5h-4v8m-67-3c-4%206%201%2014%207%2011%204-1%203-3-1-2l-4-1c-1-2%200-2%204-2%203%200%204%200%204-2%200-4-7-7-10-4m1%2019v12c3%202%2010-3%2010-7s-7-8-10-5m81%205l1%207%203-1c9%200%209-12-1-12h-3v6m48%200l1%207%203-1c9%200%209-12-1-12h-3v6M49%20369l-15%202c-6%200-10%201-11%202h-2l-1%201-2%201-10%201H0v3c0%205%205%206%2024%205a100%20100%200%200024-4c6-1%207-2%205-6h-3l-2%201%201-1-1-1-3-2h3l7-3-6%201'%20fill='%23fafafa'%20fill-rule='evenodd'/%3e%3c/svg%3e"},"narrow":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsSAAALEgHS3X78AAAFAUlEQVQ4y0WT51OUVxSHX3qRLiUGUYogHRakl8XdZaVKkb7AUqSroDGgIwIT1GTGJBKIJWAUEaTXGBwUscRknMlkkg+ZyZ/z5Oxrxnz4zb33ved9zjm/e6+iKAoWWf032tnakBQfRcABHxztrHF1dsDJwYbYyCOMXO6lsbacyrJCYqLCiRVFhAXjIHEW2dlYWxgfQDbW6oLIoyH8vPyQq/1ncLS3wd3VGS93F0IO+3NjZICtpQfsbMzS2dpAeFgIwYEBuDg7ss/JXuJt/wdaW1thY6Xg5eFKV2s9+YZs3F2c8fFyx9PNRSoJYXNpmhdPl3m5vcL05DgJ8bF84uuDh+y7SayLs9MHoJWVwARob2eDra21Olqy+u73xNfbC3c3VzLTklmdn2Z3e433b3d4OHmbpMRE/Hx98fHeL5244rLP+QPQWoAOUq5FHu6u7BOYt5enmt3X2xtPD3daGk1srszxbu8ZO09X2d5cxlxvIs9o4FBAgCR1w3u/F4qV1Yd2nZ0csBVTkxPjyTfqOHTQnwN+fmJ+hPxYS1d7KxfPn+VsTyf1dTWMXL1Cg6mWM92dGHMNZKanoc1MtwClXQFZgJZqO1sbmZ+ZIjYmWm2nUWDnz/VQerKYivIyDHodeSeMFBUWkKPVciLXKLExRISH01BXi2KpzsHeDlcx1XJl+s50MHVnnLSUZA76+1NeVkptdRUlAizIz8eg05GVmUlqSgplJSWSqARNvEaAEUQcDUexVGcBurm6YG9rS29PO9sbSxJcTGBgIDHRMURGRIoiCAsNIyoyivi4OMKlolBZ+/sfJCM9Q00QGx0tQKnQydFBBXqJ+RPffsW972+h1+UQLhnT09KkTT0ajYYETQIx0l5oaCjBwSEclf3Dh4MkSbS0nsvswymUT/281fuzX0419EgIc9OTDF7ul/byKMjLo7GhnuKiIlV6nR5ttlYqjCcqKprgoBCCRJ/19fLsp3Web2+hHAk69PHIU8W3QgFVVZxCd/y4Wl12VrZ4ls0Pdya4PvoF/RcvMDw0SJEkiIvToNXmsLGywPt3rwW6gZKWnMjRsFA8Pb3w8fVTTS+WE4wWP+KkknTxZ2R4iOkHU9yeGGPy3h2ebq4xPnaLyspqcg1Gbo+P8fefv/N6dwdl7MYQo4OX6GhpprigUDz8Rq7NNDUSXFNVzf17d7k7Mc7Y1zeZvj/F3KNHrC0tMvPgAc3mFrIysmhvPc3C4xn++esPlKq+CuoHTLSNnMY82IRpoIHTw20UdZ3EdKme7i97KO4ppfJCNS3DrdT0m9R5eW+FfC9D32TE2JrPqb5KOkY7UXTnCqgdaaLqagPVQw2Yr7fRcqMTQ18hEXUaIusSiDOnENOYRFR9IjENx9S5RXHmZDTNqcSLYmUdaUpA0Z/Np/KKiZP9FdQONVIl89JLVRRdLFe/lwxUUjpQhUESxws4oSntozTmVFWWeWJzOsdaMlCSmjLRdstb7NCpyuoykN1lWevJ6TaS3WlQldWpJ60tR1Xqaa06prcfV5XcnEVySxaJZnnLHW1mBq98zrVrI0xO3WNldZEtuVM7z7fZe73Ly1cv1PHV2z3eytV49eYlu3vPefPLK3797S1rG6vMLz5hYWmB7+TwlJujg0xO3GJp7jFba6uiNdaWl0UrLD6ZZ2lhkcePZpidmWV+7gmry6tsrm+yvrb+cW9laZkFif1xcop/AfcLAxA/WZp7AAAAAElFTkSuQmCC","aspectRatio":1,"src":"/static/b58f6519b6b626a78b209be559eeb840/502b1/indexeddb-cover.png","srcSet":"/static/b58f6519b6b626a78b209be559eeb840/f2e6d/indexeddb-cover.png 114w,\n/static/b58f6519b6b626a78b209be559eeb840/4ddba/indexeddb-cover.png 229w,\n/static/b58f6519b6b626a78b209be559eeb840/502b1/indexeddb-cover.png 457w,\n/static/b58f6519b6b626a78b209be559eeb840/7ddc2/indexeddb-cover.png 686w,\n/static/b58f6519b6b626a78b209be559eeb840/435bf/indexeddb-cover.png 914w,\n/static/b58f6519b6b626a78b209be559eeb840/6050d/indexeddb-cover.png 1200w","srcWebp":"/static/b58f6519b6b626a78b209be559eeb840/15384/indexeddb-cover.webp","srcSetWebp":"/static/b58f6519b6b626a78b209be559eeb840/31fce/indexeddb-cover.webp 114w,\n/static/b58f6519b6b626a78b209be559eeb840/e3e25/indexeddb-cover.webp 229w,\n/static/b58f6519b6b626a78b209be559eeb840/15384/indexeddb-cover.webp 457w,\n/static/b58f6519b6b626a78b209be559eeb840/0258d/indexeddb-cover.webp 686w,\n/static/b58f6519b6b626a78b209be559eeb840/64ea2/indexeddb-cover.webp 914w,\n/static/b58f6519b6b626a78b209be559eeb840/9000d/indexeddb-cover.webp 1200w","sizes":"(max-width: 457px) 100vw, 457px","tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='400'%20viewBox='0%200%20400%20400'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%20106a633%20633%200%20002%20108c-3%203-3%2042-1%2040%202-1%203-1%206%202l4%202-3%202c-2%202-4%202-2%200%201-2%201-3-2-2-2%200-3%201-2%202l-1%201c-1%201%200%206%202%206l2-1%202-1%204-1h3l3%202-3-3-2-4h1l2-1%202-2%201%202c1%202%202%202%202%201%200-2%204%203%204%205l3%203%203%202%206%201a4547%204547%200%200114%200l3%201c3%202%205%203%2010%203l7%201%201%201h6l5-1c1%200%201%201%202-7%200-9%201-12%202-10h1c-1-1%200-2%201-2%201-1%201%200%201%204v4l1-7c0-4%201-7%202-7l1%201c-1%201%200%203%201%204l1%204%201%203%201-6%201-6v16c0%2010%200%2011%201%204v-10h7c5%200%206%200%205%201h4c2-2%204%206%204%2014%200%204%202%206%204%203%201-1%201-1%201%202-1%202%200%203%201%203%201%201%201%200%201-4l1-5%201%201h1c1-1%201-1%201%202s0%203-1%202c-1-2-1-1-1%202v5H81c-46%200-47%200-48-2%200-2-1-3-2-1v2H8l-4%201H0v43l1%2042%203-1%203-1%205-1%204-2c1-1%201-1-1-1-3%200-6-2-4-2%204-3%2042-4%2042-2l-1%201-1%201%2010-1a7167%207167%200%2001336-1c3-1%204%201%202%203h-3l-3%201h-2c0%201%201%202%204%202l5%202c1%201%201-18%201-41v-42h-30v-9c0-8%200-9-3-11-3-4-4-4-8-1-4%202-4%202%202%202h4l-3%201-8%201c-3%200-4%200-3-2%200-2-1-3-2%200l-2%201c-2%200-2-7%200-11%201-1%200-6-3-20-5-19-5-22-1-23l4-1%204-2%202-3c0-2%201-2%204-2%204%200%205%200%208-4l5-6c2%200%204-3%205-4%202-4%207-8%209-8l8-5%207-5v19l1-87V0h-55a962%20962%200%2000-96%205c-3-1-10%202-9%203s0%201-1%201h-2c1%201%201%201-1%201h-1c1%201%201%201-1%201h-1v1h-2c-1-1-10%207-12%209l-2%204V0H0v106m105-90c-18%208-13%2035%207%2037%208%200%2016-3%2019-9%2011-16-7-37-26-28m163%200h-5l-8%201c-2%201-4%202-5%201l-1%201-2%201c-3%200-16%205-20%208l-4%202c-1-1-2%201-3%204a386%20386%200%2000-1%2047h-3c-1%200-2-1-2-17V47l-1%2021-3%2027c-1%203-2%207-1%208l-1%202v-2l-2%201c-3%202-5%203-5%201h-1l-6%203c-18%207-35%2022-34%2030l1%201c2-6%204-7%209-11%205-3%207-4%209-3%202%200%202%200%201-1l-1-1h3c-1%201%202%202%204%201s1-3-2-2h-2l2-1c3-3%2016-6%2027-9a5077%205077%200%200022-4h5l-4%201h2a441%20441%200%2001121%208l9%201h2v-1l-1-1c-2%200-3-2-2-4%200-2%202-3%202%200h1c0-2%200-2%2012-5%209-1%209-1%206%202s-2%203%202%200l2-2v8l-1%209v5l-1%201-2%202a365%20365%200%2000-1%203c-1-2-1-2-1%200%200%201%200%202-2%201v2l-6%201c0%202%204%201%2014-3l10-3v-4c0-5-1-6-4-6-1%200-2%201-1%202l-2%201c-2%200-2%200-1-1v-1l-1-8c0-8%201-10%205-9l2-1%201-2%201-1c-1-1-20%203-30%205-6%201-6%201-6-3l-1-3v3c0%204%200%204-5%205l-4%202h3l5%201c0%201-3%201-11-1-4-1-4-1-4-4v-3l-1%203-1%202-2-1-1-3-2-3-1-3c0-1%200-2-1-1v1l-1%201c-1%201-1%200-1-3l1-4v-3l-1-2-2%202-6%204c-4%202-5%204-5%208v4l-8-1c-9%200-8%200-8-4%200-8%200-10%202-10l-1-2-8-2c-4%200-5%200-3-1%202%200%203-1%203-3s-1-2-4-2c-1%200-1-1%201-2%202-3%203-7%201-8s-1-4%201-3l1-2-1-2-1-3c0-2%200-2-1%200-1%201-1%201-1-1l-1-6%202-4c2-1%202-3%202-7v-5l-4%201c-4%200-4%200-4-2l-1-2c-5-1-6-1-6%201h-4l1-3h3c6%200%207-1%206-4-1-7-4-10-11-12l-5-1-5-2-1%201M90%20113a1917%201917%200%2000-1%2061v12h1c1-1%201%201%201%204-1%206-2%208-2%202%200-5-1-5-4-3h-3c-1-2-2%203-2%2011l1%209c2%200%201%207%200%206h-1c2%202-1%205-5%205-5%201-12%205-12%206h2c3-2%2010-4%2018-5l4-1-1%203c-1%203-1%203-10%206-10%203-11%204-11%205h3c4-3%2014-5%2023-6h8l-1-5v-5h19a608%20608%200%200016-2l-4-1-2%201c-2%200-3%200-2-1%200-2%200-2-3-1h-5c-1%201-1%201-1-1s-9-11-11-11-2-4-1-6c2-2%204-1%205%201%200%202%201%202%204%202h7c0-1%201-1%209%201%202%200%202%200%201-1l-6-2-5-3h-5l-6-1-7-1v-1l1-1h10c11%200%2015-1%209-3-3-1-7-5-7-6l5-1c4%200%205%200%205-2h1l1%202c-1%201%200%201%202%201l2-1-1-1h-1c-1-1%202-2%204-1%202%202%204%200%202-1l-2-2c1-2-5-4-12-5-5%200-7-1-6-2h5c1%201%201-1%201-5l-1-6c-2%200-2-4-1-11v-8l-1-6-1%2020-1%2013-1-30%201-4c2%200%203-3%202-6%200-2-1-3-2-3-3%200-2-2%201-2h4l-3-1c-3-1-3-1%201-1%202%200%203%200%201-1l-2-2%201-2h1c1-1%200-1-1-1l-2%201-7%201-5%201-2%201c-3%200-3%200-3-7l-1-6v7l-1%208-1%202c-1%201-1-1-1-3%200-15-1-16-2-2l-1%209v-12c0-15-2-15-2%201m194-2l-1%208v6h-14l-24%202c-14%202-16%202-7%200l7-2h-5c-5%200-5%200-5-4-1-5-5-5-6%201l-1%204v1c3%200-3%202-7%202s-5%202-2%202c1%200%201%201-1%201-3%201-3%201-2-5l-1-6c-1-1-1%200-1%203l-2%206c-2%202-10%204-11%203l-2%202v1c2%200-1%203-4%203l-1-7c0-9-1-9-4-9-2%201-2%203-2%2013l-1%204h-3l-4%201-3%201-1%201c-2%204-4%202-4-4v-5l-1%207c-1%208-2%2011-4%2010l-1%201v1c-1%200-2%203-1%205s1%202%201%200%201-3%204-4v-1l7-4c30-16%2095-25%20141-19h14l2%202v-1l-1-6c0-5%200-6-1-5l-1%203c3%205-1%206-13%205a611%20611%200%2000-27-3c2%200%203%200%202-2%200-3%201-3%202%200%201%202%201%201%201-3l-1-6h-4l-1-1h-1l-1%202-1-3c0-4-1-4-3-1m-88%2081l-3%202c-3%200-3%200-5%202-1%201-3%203-5%203l-3%203-1%201c0-1-4%200-7%202l-5%204-1%202v-1c0-1-1-1-5%201s-6%205-2%203l1%201c-1%201-1%201%201%201h1c0%201%200%202%202%202h5l-2-1-4-3%208-4c14-9%2030-19%2029-20%200-2-2-1-4%202m19%2016l-2%201c0-3-2-1-2%201l2%202c2%200%201%202-1%202l-2%202-1%201c-2%200-4%203-7%2018l-3%2013h-9c-3-2-10%203-12%209-3%2010-4%2012-9%2012-4%200-5%200-9%203l-6%203c-1%200-4%201-9%206l-7%203c-1-1-2%200-2%201-1%201%202%201%2028%201%2027%200%2028%200%2028-2l-2-2c-2%200-2-1-2-7s0-7-2-7c-1-1%202-1%206-1l7-1c0-2%202-1%202%201%201%201%201%200%201-1%200-2%200-3%202-3l8-1c5%200%205%200%202%201s-3%201-3%204v3l-1-3c0-2%200-3-3-3s-3%200-3%203l2%203v1c-2%200-2%200-1%201%203%202%201%207-2%2010-4%203-1%204%2018%204%2018%200%2019%200%2019-2l1-4%202-3h-6c-7%200-6-1%201-1%206-1%206-1%206-3v-4l-1%202-1%202v-8c0-7%200-7-2-6l-2-1h-8l4-1c5-1%206-2%204-4h1l3-1v-2c2%200%202-1%201-2v-3c1-2%200-4-2-4a186%20186%200%20010-30c0-3%200-3-3-3-2%200-3%200-4%207l-2%207v-6c1-6%200-5-1%202-2%206-6%2013-9%2014l-3-1c0-2%201-4%203-4s1-3-1-3l-2-3c0-2%200-2-2-1s-2%201%200-11c0-4%200-4-2-1m47%208c0%203%200%204-1%202s-1-2-2%200c-1%204-3%204-3%200%200-2%200-3-1-1%200%203-2%203-2-1v-2l-3%2033c0%204-2%206-5%204l-2%201%204%201c3%200%204%200%203%201l-1%204c0%204%200%204-1%202s-1-1-1%203l1%206c3%200%202%208-1%2011l-3%202c-1-1-1-1%200%200l-1%201v1c0%202%202%202%2012%202%2013%200%2013%200%2013-7%200-1%200-2%201-1l1%203%201%202h1l6%201%206%201h1c0-1%208-2%208%200l7%201h6v-3c0-3%200-3-1-1v-10l-1-13c-1-1-2-3-2-16%200-7-2-8-2-1a382%20382%200%2001-1%2016c-2-3-2-3-2-1-1%201-1-2-1-7%200-15-2-24-3-13v4l-1%2010v-3c0-5-2-6-8-6-9%200-11%201-12%207l-1%204-1%203-1%203-1-12-1-28-1%205c-2%207-3%205-3-4s-1-12-1-4m-150%206c0%202-4%206-4%203l-1-1-4%201c-7%202-3%203%207%203a109%20109%200%200121%200c2%200%200-2-3-2-2%200-3%200-3-3%200-4-1-5-1-2s0%203-5%203c-6%200-6%200-6-3-1-2-1-2-1%201m156%2048c0%205%201%206%202%204h5l1-3c-1-2-1-2%207-2%209-1%2010-1%208%201v3l2-3%201-3-14-1h-13l1%204m59%2010v3l-2-2c-2-2-9-4-12-4-1%200-2%201-2%203v3l-2-3-1-3v3l2%204-1%201c-1%201%202%201%2010%201l11-1%201-2-1-2-1-3-1-2-1%204M41%20301l-1%202c0%201-1%202-3%202-4%201-6%204-5%208s4%205%208%204h3v-9c0-7-1-9-2-7m51%202c0%202%200%203-3%202-5-1-8%207-3%2011%201%201%202%202%203%201h3c2%200%202-1%202-9l-1-8-1%203m6%206v8h4c6%200%209-2%209-7%200-6-3-9-10-9h-3v8m16%200v8h5c6%200%208-2%206-6v-5c0-3-2-5-7-5h-4v8m-67-3c-4%206%201%2014%207%2011%204-1%203-3-1-2l-4-1c-1-2%200-2%204-2%203%200%204%200%204-2%200-4-7-7-10-4m1%2019v12c3%202%2010-3%2010-7s-7-8-10-5m81%205l1%207%203-1c9%200%209-12-1-12h-3v6m48%200l1%207%203-1c9%200%209-12-1-12h-3v6M49%20369l-15%202c-6%200-10%201-11%202h-2l-1%201-2%201-10%201H0v3c0%205%205%206%2024%205a100%20100%200%200024-4c6-1%207-2%205-6h-3l-2%201%201-1-1-1-3-2h3l7-3-6%201'%20fill='%23fafafa'%20fill-rule='evenodd'/%3e%3c/svg%3e"},"seo":{"src":"/static/b58f6519b6b626a78b209be559eeb840/6050d/indexeddb-cover.png"}}},"authors":[{"authorsPage":true,"bio":"Hello everybody 👋 ! My name is Luke and I am the creator and owner of the spaceout.pl. Personally, I am a big geek with huge love for Star Wars, Marvel and DC comic books, Funk and 80s music. I take most of my design inspiration from offline experiences like going to art museums, galleries and working with other creative people on various projects. I also work with various Activist and NGO groups as a pro-bono designer and developer.\n","id":"f69d27c7-7f9a-5fbd-b05d-1a324fd10c0a","name":"Luke Celitan","featured":true,"social":[{"url":"https://www.facebook.com/spaceout/"},{"url":"https://twitter.com/spaceout.pl"},{"url":"https://www.instagram.com/spaceout.pl/"},{"url":"https://huggingface.co/MassivDash"},{"url":"https://bsky.app/profile/lukecelitan.bsky.social"}],"slug":"/authors/luke-celitan","avatar":{"small":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGQABAAIDAAAAAAAAAAAAAAAAAAIFAQME/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAABvOTVgtERIAH/xAAaEAEBAQEAAwAAAAAAAAAAAAACAQMEABAS/9oACAEBAAEFAmoDjs0/Oq1a9kUzN+j7/8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAwEBPwEf/8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAgEBPwEf/8QAHhAAAgEDBQAAAAAAAAAAAAAAAQIAAxESECAxMlH/2gAIAQEABj8CLHgTGqmBPXSlTANsrmKyXLK0B92f/8QAHhABAAECBwAAAAAAAAAAAAAAAREAIRAgMUFhcdH/2gAIAQEAAT8hUmKFDbjke4JaIOG01Fthsd0YugnJ/9oADAMBAAIAAwAAABDzzzz/xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAEDAQE/EB//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAECAQE/EB//xAAfEAEBAAEDBQEAAAAAAAAAAAABETEAQWEQICFxgZH/2gAIAQEAAT8QhmFXf0c6oSU1s8jwz0W5QpAeFf1+Gp7aimCmBvvoV0CRyUvZ/9k=","aspectRatio":1,"src":"/static/4f53b0980dc97328dd1294bbc374fd0e/fa1ea/spaceghost.jpg","srcSet":"/static/4f53b0980dc97328dd1294bbc374fd0e/afb2b/spaceghost.jpg 13w,\n/static/4f53b0980dc97328dd1294bbc374fd0e/7c20e/spaceghost.jpg 25w,\n/static/4f53b0980dc97328dd1294bbc374fd0e/fa1ea/spaceghost.jpg 50w,\n/static/4f53b0980dc97328dd1294bbc374fd0e/03612/spaceghost.jpg 75w,\n/static/4f53b0980dc97328dd1294bbc374fd0e/61cdf/spaceghost.jpg 100w,\n/static/4f53b0980dc97328dd1294bbc374fd0e/442ab/spaceghost.jpg 305w","srcWebp":"/static/4f53b0980dc97328dd1294bbc374fd0e/e7b2c/spaceghost.webp","srcSetWebp":"/static/4f53b0980dc97328dd1294bbc374fd0e/58718/spaceghost.webp 13w,\n/static/4f53b0980dc97328dd1294bbc374fd0e/74aad/spaceghost.webp 25w,\n/static/4f53b0980dc97328dd1294bbc374fd0e/e7b2c/spaceghost.webp 50w,\n/static/4f53b0980dc97328dd1294bbc374fd0e/ed320/spaceghost.webp 75w,\n/static/4f53b0980dc97328dd1294bbc374fd0e/66016/spaceghost.webp 100w,\n/static/4f53b0980dc97328dd1294bbc374fd0e/85828/spaceghost.webp 305w","sizes":"(max-width: 50px) 100vw, 50px","tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='400'%20viewBox='0%200%20400%20400'%20preserveAspectRatio='none'%3e%3cpath%20d='M189%2065A519%20519%200%200065%20299c-5%2020-5%2018%203%2015%208-4%2039-10%2057-12%2011-1%2010%200%2010-11%200-29%206-103%2010-121%204-21%2016-36%2033-43%206-2%208-2%2020-2%2018%200%2024%202%2036%2013%2020%2021%2025%2046%2029%20138l2%2026h10a267%20267%200%200168%2014l-6-26A607%20607%200%2000218%2071c-10-10-15-15-18-15-2%200-6%203-11%209m47%20129c-14%208-26%2015-26%2017%200%203%2018%205%2024%202%205-3%209-10%209-18%200-5%200-5-7-1m-82%201l1%205c1%2011%209%2018%2020%2017%207-1%2013-3%2013-5s-32-19-34-17'%20fill='%23fafafa'%20fill-rule='evenodd'/%3e%3c/svg%3e"},"medium":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGQABAAIDAAAAAAAAAAAAAAAAAAIFAQME/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAABvOTVgtERIAH/xAAaEAEBAQEAAwAAAAAAAAAAAAACAQMEABAS/9oACAEBAAEFAmoDjs0/Oq1a9kUzN+j7/8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAwEBPwEf/8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAgEBPwEf/8QAHhAAAgEDBQAAAAAAAAAAAAAAAQIAAxESECAxMlH/2gAIAQEABj8CLHgTGqmBPXSlTANsrmKyXLK0B92f/8QAHhABAAECBwAAAAAAAAAAAAAAAREAIRAgMUFhcdH/2gAIAQEAAT8hUmKFDbjke4JaIOG01Fthsd0YugnJ/9oADAMBAAIAAwAAABDzzzz/xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAEDAQE/EB//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAECAQE/EB//xAAfEAEBAAEDBQEAAAAAAAAAAAABETEAQWEQICFxgZH/2gAIAQEAAT8QhmFXf0c6oSU1s8jwz0W5QpAeFf1+Gp7aimCmBvvoV0CRyUvZ/9k=","aspectRatio":1,"src":"/static/4f53b0980dc97328dd1294bbc374fd0e/61cdf/spaceghost.jpg","srcSet":"/static/4f53b0980dc97328dd1294bbc374fd0e/7c20e/spaceghost.jpg 25w,\n/static/4f53b0980dc97328dd1294bbc374fd0e/fa1ea/spaceghost.jpg 50w,\n/static/4f53b0980dc97328dd1294bbc374fd0e/61cdf/spaceghost.jpg 100w,\n/static/4f53b0980dc97328dd1294bbc374fd0e/59538/spaceghost.jpg 150w,\n/static/4f53b0980dc97328dd1294bbc374fd0e/fd013/spaceghost.jpg 200w,\n/static/4f53b0980dc97328dd1294bbc374fd0e/442ab/spaceghost.jpg 305w","srcWebp":"/static/4f53b0980dc97328dd1294bbc374fd0e/66016/spaceghost.webp","srcSetWebp":"/static/4f53b0980dc97328dd1294bbc374fd0e/74aad/spaceghost.webp 25w,\n/static/4f53b0980dc97328dd1294bbc374fd0e/e7b2c/spaceghost.webp 50w,\n/static/4f53b0980dc97328dd1294bbc374fd0e/66016/spaceghost.webp 100w,\n/static/4f53b0980dc97328dd1294bbc374fd0e/d9b14/spaceghost.webp 150w,\n/static/4f53b0980dc97328dd1294bbc374fd0e/6b183/spaceghost.webp 200w,\n/static/4f53b0980dc97328dd1294bbc374fd0e/85828/spaceghost.webp 305w","sizes":"(max-width: 100px) 100vw, 100px","tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='400'%20viewBox='0%200%20400%20400'%20preserveAspectRatio='none'%3e%3cpath%20d='M189%2065A519%20519%200%200065%20299c-5%2020-5%2018%203%2015%208-4%2039-10%2057-12%2011-1%2010%200%2010-11%200-29%206-103%2010-121%204-21%2016-36%2033-43%206-2%208-2%2020-2%2018%200%2024%202%2036%2013%2020%2021%2025%2046%2029%20138l2%2026h10a267%20267%200%200168%2014l-6-26A607%20607%200%2000218%2071c-10-10-15-15-18-15-2%200-6%203-11%209m47%20129c-14%208-26%2015-26%2017%200%203%2018%205%2024%202%205-3%209-10%209-18%200-5%200-5-7-1m-82%201l1%205c1%2011%209%2018%2020%2017%207-1%2013-3%2013-5s-32-19-34-17'%20fill='%23fafafa'%20fill-rule='evenodd'/%3e%3c/svg%3e"},"large":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGQABAAIDAAAAAAAAAAAAAAAAAAIFAQME/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAABvOTVgtERIAH/xAAaEAEBAQEAAwAAAAAAAAAAAAACAQMEABAS/9oACAEBAAEFAmoDjs0/Oq1a9kUzN+j7/8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAwEBPwEf/8QAFBEBAAAAAAAAAAAAAAAAAAAAIP/aAAgBAgEBPwEf/8QAHhAAAgEDBQAAAAAAAAAAAAAAAQIAAxESECAxMlH/2gAIAQEABj8CLHgTGqmBPXSlTANsrmKyXLK0B92f/8QAHhABAAECBwAAAAAAAAAAAAAAAREAIRAgMUFhcdH/2gAIAQEAAT8hUmKFDbjke4JaIOG01Fthsd0YugnJ/9oADAMBAAIAAwAAABDzzzz/xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAEDAQE/EB//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAECAQE/EB//xAAfEAEBAAEDBQEAAAAAAAAAAAABETEAQWEQICFxgZH/2gAIAQEAAT8QhmFXf0c6oSU1s8jwz0W5QpAeFf1+Gp7aimCmBvvoV0CRyUvZ/9k=","aspectRatio":1,"src":"/static/4f53b0980dc97328dd1294bbc374fd0e/442ab/spaceghost.jpg","srcSet":"/static/4f53b0980dc97328dd1294bbc374fd0e/a2637/spaceghost.jpg 82w,\n/static/4f53b0980dc97328dd1294bbc374fd0e/15203/spaceghost.jpg 164w,\n/static/4f53b0980dc97328dd1294bbc374fd0e/442ab/spaceghost.jpg 305w","srcWebp":"/static/4f53b0980dc97328dd1294bbc374fd0e/85828/spaceghost.webp","srcSetWebp":"/static/4f53b0980dc97328dd1294bbc374fd0e/2d087/spaceghost.webp 82w,\n/static/4f53b0980dc97328dd1294bbc374fd0e/29d87/spaceghost.webp 164w,\n/static/4f53b0980dc97328dd1294bbc374fd0e/85828/spaceghost.webp 305w","sizes":"(max-width: 305px) 100vw, 305px","tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='400'%20viewBox='0%200%20400%20400'%20preserveAspectRatio='none'%3e%3cpath%20d='M189%2065A519%20519%200%200065%20299c-5%2020-5%2018%203%2015%208-4%2039-10%2057-12%2011-1%2010%200%2010-11%200-29%206-103%2010-121%204-21%2016-36%2033-43%206-2%208-2%2020-2%2018%200%2024%202%2036%2013%2020%2021%2025%2046%2029%20138l2%2026h10a267%20267%200%200168%2014l-6-26A607%20607%200%2000218%2071c-10-10-15-15-18-15-2%200-6%203-11%209m47%20129c-14%208-26%2015-26%2017%200%203%2018%205%2024%202%205-3%209-10%209-18%200-5%200-5-7-1m-82%201l1%205c1%2011%209%2018%2020%2017%207-1%2013-3%2013-5s-32-19-34-17'%20fill='%23fafafa'%20fill-rule='evenodd'/%3e%3c/svg%3e"}}}],"basePath":"/","tech":["JS","TS"],"category":"Post","slug":"/indexeddb-the-definitive-deep-dive-guide-for-modern-web-applications","id":"c4badbd0-8f9d-55a3-abb5-55ecae4caee6","title":"IndexedDB The Definitive Deep-Dive Guide for Modern Web Applications","appDescription":null,"mailchimp":false,"next":[{"id":"2097ca38-bece-5dc5-82f6-907694698a66","slug":"/domain-driven-design-with-typescript","secret":false,"title":"Domain-Driven Design with TypeScript","author":"Luke Celitan","date":"October 7th, 2025","dateForSEO":"2025-10-07T00:00:00.000Z","timeToRead":4,"excerpt":"A deep-dive into Domain-Driven Design (DDD) principles, patterns, and best practices, illustrated with TypeScript examples. Learn how to model complex domains, structure your code, and build maintainable, scalable systems.","subscription":true,"body":"var _excluded = [\"components\"];\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n \"title\": \"Domain-Driven Design with TypeScript\",\n \"excerpt\": \"A deep-dive into Domain-Driven Design (DDD) principles, patterns, and best practices, illustrated with TypeScript examples. Learn how to model complex domains, structure your code, and build maintainable, scalable systems.\",\n \"date\": \"2025-10-07T00:00:00.000Z\",\n \"hero\": \"ddd-typescript-cover.png\",\n \"author\": \"Luke Celitan\",\n \"category\": \"Post\",\n \"tech\": [\"TS\", \"Nodejs\"]\n};\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"h2\", {\n \"id\": \"introduction\"\n }, \"Introduction\"), mdx(\"p\", null, \"Domain-Driven Design (DDD) is more than a set of patterns\\u2014it\\u2019s a philosophy for\\ntackling complexity in the heart of software. Eric Evans\\u2019 seminal work,\\n\\u201CDomain-Driven Design: Tackling Complexity in the Heart of Software,\\u201D laid the\\nfoundation for a way of thinking that puts the domain and its logic at the\\ncenter of your system. In this guide, we\\u2019ll explore DDD from first principles,\\nusing TypeScript as our language of choice, and draw heavily on the technical\\ncontext and best practices that have emerged from decades of real-world\\nexperience.\"), mdx(\"p\", null, \"This is not a quick overview. Instead, it\\u2019s a comprehensive, technical\\ndeep-dive\\u2014aimed at developers and architects who want to build robust,\\nmaintainable, and scalable systems. We\\u2019ll go beyond the usual bullet points,\\nweaving together narrative, code, and practical advice, all in a style that\\nreflects the clarity and enthusiasm of the best technical writing.\"), mdx(\"h2\", {\n \"id\": \"1-why-domain-driven-design\"\n }, \"1. Why Domain-Driven Design?\"), mdx(\"p\", null, \"Software is at its most valuable when it solves real, complex problems for its\\nusers. But as systems grow, complexity can spiral out of control. DDD is a\\nresponse to this challenge: it provides a set of priorities, practices, and\\npatterns that help teams model the domain deeply, communicate effectively, and\\nbuild systems that can evolve.\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Key Principles:\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"The primary focus should be on the domain and domain logic.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Complex domain designs should be based on a model.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"The model should drive both the language of the team and the structure of the\\ncode.\")), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"TypeScript and DDD:\"), \" TypeScript\\u2019s type system, interfaces, and support for\\nobject-oriented and functional paradigms make it an excellent fit for DDD. We\\u2019ll\\nuse TypeScript throughout this guide to illustrate concepts and patterns.\"), mdx(\"h2\", {\n \"id\": \"2-ubiquitous-language-the-foundation-of-ddd\"\n }, \"2. Ubiquitous Language: The Foundation of DDD\"), mdx(\"p\", null, \"A Ubiquitous Language is a shared vocabulary that is used by both developers and\\ndomain experts. It is derived from the domain model and is used in code,\\ndocumentation, and conversation.\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Why it matters:\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Reduces translation errors between business and tech.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Makes code more readable and maintainable.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Surfaces ambiguities and contradictions early.\")), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Example:\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"// Instead of generic names:\\nclass DataManager {\\n /* ... */\\n}\\n\\n// Use domain terms:\\nclass CargoBookingService {\\n /* ... */\\n}\\n\")), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Best Practices:\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Use domain terms in class, method, and variable names.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Refactor code and documentation as the language evolves.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Encourage domain experts to participate in model discussions.\")), mdx(\"h2\", {\n \"id\": \"3-layered-architecture-isolating-the-domain\"\n }, \"3. Layered Architecture: Isolating the Domain\"), mdx(\"p\", null, \"A well-structured system separates concerns into layers. The classic DDD\\narchitecture includes:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"User Interface (Presentation) Layer\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Application Layer\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Domain Layer\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Infrastructure Layer\"))), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"TypeScript Example:\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"// domain/cargo.ts\\nexport class Cargo {\\n /* ... */\\n}\\n\\n// application/bookingService.ts\\nimport { Cargo } from '../domain/cargo';\\nexport class BookingService {\\n /* ... */\\n}\\n\\n// infrastructure/cargoRepository.ts\\nimport { Cargo } from '../domain/cargo';\\nexport class CargoRepository {\\n /* ... */\\n}\\n\")), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Why Layering?\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Keeps domain logic free from technical concerns.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Makes testing and maintenance easier.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Supports scalability and flexibility.\")), mdx(\"h2\", {\n \"id\": \"4-building-blocks-entities-value-objects-services-modules\"\n }, \"4. Building Blocks: Entities, Value Objects, Services, Modules\"), mdx(\"h3\", {\n \"id\": \"entities\"\n }, \"Entities\"), mdx(\"p\", null, \"Objects defined by their identity, not just their attributes.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"class Customer {\\n constructor(public readonly id: string, public name: string) {}\\n // ... business logic\\n}\\n\")), mdx(\"h3\", {\n \"id\": \"value-objects\"\n }, \"Value Objects\"), mdx(\"p\", null, \"Objects defined only by their attributes, immutable, no identity.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"class Address {\\n constructor(\\n public readonly street: string,\\n public readonly city: string,\\n public readonly zip: string,\\n ) {}\\n\\n equals(other: Address): boolean {\\n return (\\n this.street === other.street &&\\n this.city === other.city &&\\n this.zip === other.zip\\n );\\n }\\n}\\n\")), mdx(\"h3\", {\n \"id\": \"services\"\n }, \"Services\"), mdx(\"p\", null, \"Domain operations that don\\u2019t naturally fit on an Entity or Value Object.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"class OverbookingPolicy {\\n isAllowed(cargo: Cargo, voyage: Voyage): boolean {\\n return cargo.size + voyage.bookedCargoSize <= voyage.capacity * 1.1;\\n }\\n}\\n\")), mdx(\"h3\", {\n \"id\": \"modules\"\n }, \"Modules\"), mdx(\"p\", null, \"Organize related concepts for clarity and maintainability.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"// domain/shipping/index.ts\\nexport * from './cargo';\\nexport * from './voyage';\\nexport * from './overbookingPolicy';\\n\")), mdx(\"hr\", null), mdx(\"h2\", {\n \"id\": \"5-aggregates-factories-and-repositories\"\n }, \"5. Aggregates, Factories, and Repositories\"), mdx(\"h3\", {\n \"id\": \"aggregates\"\n }, \"Aggregates\"), mdx(\"p\", null, \"A cluster of associated objects treated as a unit for data changes. Each\\nAggregate has a root Entity.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"class Order {\\n private items: OrderItem[] = [];\\n // Order is the Aggregate Root\\n addItem(product: Product, quantity: number) {\\n /* ... */\\n }\\n}\\n\")), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Aggregate Rules:\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Only the root is referenced from outside.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Invariants are enforced within the Aggregate boundary.\")), mdx(\"h3\", {\n \"id\": \"factories\"\n }, \"Factories\"), mdx(\"p\", null, \"Encapsulate complex creation logic.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"class OrderFactory {\\n static createNew(customer: Customer, items: OrderItem[]): Order {\\n // ... enforce invariants, set up relationships\\n return new Order(/* ... */);\\n }\\n}\\n\")), mdx(\"h3\", {\n \"id\": \"repositories\"\n }, \"Repositories\"), mdx(\"p\", null, \"Provide access to Aggregates, abstracting persistence.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"interface OrderRepository {\\n findById(id: string): Promise;\\n save(order: Order): Promise;\\n}\\n\")), mdx(\"h2\", {\n \"id\": \"6-supple-design-making-models-work-for-you\"\n }, \"6. Supple Design: Making Models Work for You\"), mdx(\"p\", null, \"Supple design is about making your model easy to use, extend, and reason about.\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Techniques:\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Intention-revealing interfaces\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Side-effect-free functions\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Assertions and invariants\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Conceptual contours (aligning code structure with domain concepts)\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Standalone classes (low coupling)\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Closure of operations (operations return the same type as their input)\")), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Example:\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"class Money {\\n constructor(private amount: number, private currency: string) {}\\n\\n add(other: Money): Money {\\n if (this.currency !== other.currency) throw new Error('Currency mismatch');\\n return new Money(this.amount + other.amount, this.currency);\\n }\\n}\\n\")), mdx(\"h2\", {\n \"id\": \"7-strategic-design-bounded-contexts-and-context-maps\"\n }, \"7. Strategic Design: Bounded Contexts and Context Maps\"), mdx(\"p\", null, \"As systems grow, a single unified model becomes impractical. DDD introduces the\\nconcept of Bounded Contexts\\u2014explicit boundaries within which a particular model\\napplies.\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Context Map:\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Visualizes the relationships between Bounded Contexts.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Defines integration patterns (Shared Kernel, Customer/Supplier, Conformist,\\nAnticorruption Layer, etc.)\")), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Example:\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Booking Context vs. Shipping Context, each with its own model and language.\")), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Integration Patterns:\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Anticorruption Layer:\"), \" Protects your model from external influences.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Shared Kernel:\"), \" Shared subset of the model between teams.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Published Language:\"), \" Agreed-upon data interchange format.\")), mdx(\"h2\", {\n \"id\": \"8-distillation-focusing-on-the-core-domain\"\n }, \"8. Distillation: Focusing on the Core Domain\"), mdx(\"p\", null, \"Not all code is equally important. Distillation is about identifying and\\nfocusing on the Core Domain\\u2014the part of the model that gives your system its\\nunique value.\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Patterns:\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Core Domain\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Generic Subdomains\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Cohesive Mechanisms\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Segregated Core\")), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Best Practices:\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Assign your best developers to the Core Domain.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Keep supporting code generic or off-the-shelf.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Use documentation and code structure to highlight the Core.\")), mdx(\"h2\", {\n \"id\": \"9-advanced-patterns-specifications-policies-and-more\"\n }, \"9. Advanced Patterns: Specifications, Policies, and More\"), mdx(\"h3\", {\n \"id\": \"specification-pattern\"\n }, \"Specification Pattern\"), mdx(\"p\", null, \"Encapsulates business rules as composable objects.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"interface Specification {\\n isSatisfiedBy(candidate: T): boolean;\\n}\\n\\nclass OverbookingSpecification implements Specification {\\n isSatisfiedBy(booking: Booking): boolean {\\n // ... business rule\\n }\\n}\\n\")), mdx(\"h3\", {\n \"id\": \"policystrategy\"\n }, \"Policy/Strategy\"), mdx(\"p\", null, \"Encapsulate algorithms or business policies.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-typescript\"\n }, \"interface RoutingPolicy {\\n selectRoute(routes: Route[]): Route;\\n}\\n\\nclass CheapestRoutePolicy implements RoutingPolicy {\\n selectRoute(routes: Route[]): Route {\\n // ... select cheapest\\n }\\n}\\n\")), mdx(\"h2\", {\n \"id\": \"10-best-practices-pitfalls-and-real-world-advice\"\n }, \"10. Best Practices, Pitfalls, and Real-World Advice\"), mdx(\"h3\", {\n \"id\": \"best-practices\"\n }, \"Best Practices\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Start with the domain, not the technology.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Collaborate closely with domain experts.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Let the model drive the code and the language.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Refactor relentlessly as understanding deepens.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Isolate the domain from infrastructure and UI.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Use TypeScript\\u2019s type system to enforce invariants and clarify intent.\")), mdx(\"h3\", {\n \"id\": \"common-pitfalls\"\n }, \"Common Pitfalls\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Anemic domain models (all data, no behavior).\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Overengineering (too many patterns, not enough value).\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Ignoring the Ubiquitous Language.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Letting technical concerns pollute the domain layer.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Failing to define clear Bounded Contexts.\")), mdx(\"h3\", {\n \"id\": \"real-world-advice\"\n }, \"Real-World Advice\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"DDD is a journey, not a destination. Expect to iterate.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Not every part of your system needs deep modeling\\u2014focus on the Core.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Use tests to document and enforce business rules.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Be pragmatic: sometimes a \\u201CSmart UI\\u201D is enough for simple cases, but know when\\nto invest in a rich domain model.\")), mdx(\"h2\", {\n \"id\": \"11-conclusion-and-further-reading\"\n }, \"11. Conclusion and Further Reading\"), mdx(\"p\", null, \"Domain-Driven Design is a powerful approach for building complex,\\nbusiness-critical systems. By focusing on the domain, cultivating a Ubiquitous\\nLanguage, and structuring your code around the model, you can build software\\nthat is robust, maintainable, and a true asset to your organization.\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Recommended Reading:\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u201CDomain-Driven Design: Tackling Complexity in the Heart of Software\\u201D by Eric\\nEvans\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u201CImplementing Domain-Driven Design\\u201D by Vaughn Vernon\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"\\u201CPatterns, Principles, and Practices of Domain-Driven Design\\u201D by Scott Millett\\n& Nick Tune\")), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"TypeScript Resources:\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://www.typescriptlang.org/docs/handbook/intro.html\",\n \"target\": \"_blank\",\n \"rel\": \"noreferrer\"\n }, \"TypeScript Handbook\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"/advanced-typescript-patterns-and-architectures\"\n }, \"Advanced TypeScript Patterns and Architecture\"), \" (see previous posts)\")), mdx(\"h2\", {\n \"id\": \"final-thoughts\"\n }, \"Final Thoughts\"), mdx(\"p\", null, \"Domain-Driven Design is not a silver bullet, but it is a set of tools and a\\nmindset that, when applied with discipline and creativity, can transform the way\\nyou build software. Use the patterns, but more importantly, use the principles.\\nLet the domain lead, and let your code tell the story.\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"If you found this guide helpful, share it with your team, and let me know what\\ndeep-dive you\\u2019d like to see next.\")), mdx(\"hr\", null));\n}\n;\nMDXContent.isMDXComponent = true;","tech":["TS","Nodejs"],"category":"Post","appDescription":null,"hero":{"full":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsSAAALEgHS3X78AAAEk0lEQVQ4y2VUWVCTVxT+7VhsZU0gZQtbkmFkcSRhERJs2QKJTolCiLECYbFTqCxmClSUWl861Wp5KdNpmRYVH1qgjrZO2+l0kAetQSoIwoBU+1jaQUAphM2Er+feIE2nd3Jy7n//c797zne++wvr6+tYB8A8G07yq6trcB8LCwuYm3uyGcPG2tozPHM4+JxjbOAI7mAOClhbc4FNTU2hra0NJpMJanUakpOToNPpYLVa0dfXh3Un7aEfO5xjbOAIz9EZkMPh5GCtra0IDQ2FIAjcPD09EREevvns4eEBg8GAiYkHPH5peflfQPfSnE4nLBYL3+Tl5QV/fzGZP4KDg6BQKODt7UWZJkMikfAYiSQAvb29fO/Kygr3wszMDB4+fIT5+b9RW1vLA3t6voH1mBUBAQEICwtDbm4u6uvqUEfvi4uLeYbe3t7kX4RI5Ifh4eFNXoWzH55BU0Mj33Bg/wGYD5rR/nk7MjIyeFYRERGIjY1Fwq4EXqZWm4tD5kPYk74HYrGYJ6DRaDZpEy5euAhrvRUVZeUwFRVxz8jXqDXYu3cfNUSNhnca0Hy8mcC0qKqqRseXHTjRfAJSqZRXwUC7u7tdJdsX7ej4ogO1NbUos5ShsKAARUYjMjMzeSY2Wz/RMY+nT56i81InjlS+iYryCuS/nk+ZxyEoKIgDFhYWugDZX3t7O+RyOarfqkLN0RqYzWakJKegsbEJfTf6cP2767jScwXH322GTCZDYmISNScFO+N38rJf2raNU2O3L1FTHs/g43Pn6WU8QkKCYSw08mwtpRacpLJOnzqNM4xnAmdcMQlFR0dDqVRCStLy8/ODWCTiihgZGYFgs9lQWlLKg318fBBPwKw5bK2poQktJ9/jB+h1evj6+vISs7OyoVKqkK5JR0xMDPHozwGZLgWmSNZhxgM7KTAwEFnEX8ZrGdDr9SSZPOTkaJFHXkvekG/APmoW63pWVhbxXQR1mhqRvGS7i8Nvr17DC1u2QETp+4tFkEVF0YZdiCO5xOzYAVlkFOfUZDShjrJlVnK4GPo8HbcCqqjkcAkG7gy4AGcXFiGjjQIJ1ZOE+rKvDyShIWhqacHlri7oqKMKAlftTkUBNeztunocrT+GYpJYSXklDpLYLZVHUE3rwnhFOSbLLLgcG4MP6Lqdp6t2ljL9hAAHi4zo1ebgAjWhjZ4/pVvTQfNLcXH4TC5DZ3wcvlap8JVKia7ERHQnJUG4RUQP0I0YpQweUJnjFDxBjRmn+QDxcjcyEvcp+/EEJcboHZsPUWPu0X0eIhskYbubYAsJwXBaGoaoy4N0KwZTU3GXTh2htXG6Gfdp/R6dPEKNGs3JwVh2NoZIszYC+4Xs9itkkg2judAvV6CfSumXMpO6fFg4vt++Hde2bsVPJKUbRMMt6v7PVM2P9FG4SkK+SbG/0t47JHRmAzI5mQzC6uwcVulrzGxldhb26cdYIvuhuwdvGPYjOlQKRVAwdjPh+/jiVVUiPjr1Pv6Y/A0rM7NY/Guae45D+//zPXw+HG7+z+lpDI+O4eZtGyYf/Y6FpeX/xbmPfwDiVsVz9wagGAAAAABJRU5ErkJggg==","aspectRatio":1,"src":"/static/dd02c9ee84329bacdf5004d5025b28c1/a1946/ddd-typescript-cover.png","srcSet":"/static/dd02c9ee84329bacdf5004d5025b28c1/5b37e/ddd-typescript-cover.png 236w,\n/static/dd02c9ee84329bacdf5004d5025b28c1/49058/ddd-typescript-cover.png 472w,\n/static/dd02c9ee84329bacdf5004d5025b28c1/a1946/ddd-typescript-cover.png 944w,\n/static/dd02c9ee84329bacdf5004d5025b28c1/6050d/ddd-typescript-cover.png 1200w","srcWebp":"/static/dd02c9ee84329bacdf5004d5025b28c1/99fbb/ddd-typescript-cover.webp","srcSetWebp":"/static/dd02c9ee84329bacdf5004d5025b28c1/77392/ddd-typescript-cover.webp 236w,\n/static/dd02c9ee84329bacdf5004d5025b28c1/1f177/ddd-typescript-cover.webp 472w,\n/static/dd02c9ee84329bacdf5004d5025b28c1/99fbb/ddd-typescript-cover.webp 944w,\n/static/dd02c9ee84329bacdf5004d5025b28c1/9000d/ddd-typescript-cover.webp 1200w","sizes":"(max-width: 944px) 100vw, 944px","tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='400'%20viewBox='0%200%20400%20400'%20preserveAspectRatio='none'%3e%3cpath%20d='M193%2023A170%20170%200%200078%2077l-1%201-7%209-8%2011c-2%202-2%202-13%201-12-2-16-3-10-3l3-1-7%201-14%201c-14%201-21%202-21%204l2%202h3l-2%203c-3%204-3%2012-1%2015s3%204%201%204l-2%201c-1%201%200%202%202%205%203%203%206%205%205%202l1-1%201%202h1l1%201v1l1%202-3-1c-3-3-3-2%200%202%207%206%2019%2015%2016%2011-1-2%202-1%203%201v1h-3l3%201%201%201%201%203%203%202-2%2011c-3%2012-4%2015-7%2015-2%200-8%206-7%208%200%202%204%203%205%202h2c-1-2%204-5%206-4l-1%202-4%204-2%201h-3c-2%201-5%200-6-2l-2%203c-2%2011%204%2024%2013%2027%203%200%203%201%205%2012a204%20204%200%200016%2048H0v37l1%2038h118l7%204c23%2012%2059%2020%2086%2019%2023-2%2047-8%2069-18l10-5h54c49%200%2055%200%2055-2a914%20914%200%20000-89v-7l-6-6-11-9c-4-3-5-4-5-6%2011-63-4-116-42-160l-8-10-1-1-5-1a169%20169%200%2000-129-46m-80%2057c-6%202-16%2012-14%2014l2-1h2l-3%204c-3%203-4%206-1%204s6-1%204%200c-4%202-5%205-2%205v2c-4%204-2%206%205%203%205-2%207-1%202%201l-4%203%205-2%204-3%204-2c7-1%2013-5%2013-7s0-2-3-1h-5l-2%201h-2l-3%201-5%201-2-1%202-1%203-3%202-2%201%201c-2%202%202%202%208%200%206-1%206-1%204-2-2-2-3-4%200-4h-3c-6%200-4-1%203-3l5-1-2-2c-3-2-8-2-14-1-3%201-5-1-1-2l5-2%203-1h-3l-8%201m123%201c-3%201-8%207-10%2011-2%203-1%2011%201%2014v-2c0-5%201-6%205-2%202%203%205%204%208%202%202%200%202-1%201-1-1-2%200-6%201-6v-9c-2-4-1-6%203-6%203%200%203%200%202-1h-11m-37%203c-3%202-4%207-3%2010%202%205%2013%202%2015-4l2-1c2%201%201-3-2-5s-9-3-12%200m74%2028c-4%202-10%206-8%206h-1c-2%200-3%200-2%201l1%202%203%201-1%201c-3%200-4%200-3%201l1%203h-4l-3-1-2-1-2-2c-1-4-7%204-8%2011%200%205%201%205%203%201%203-3%203-4%200-3l1-2c2-1%202-3%202-4h1l2%201h1l-2%202-2%201%202%202c2%201%203%201%204-1h2c1%201%202%202%203%201v-2c-2%200-2-1-1-1%202-1%205%200%205%201l1%203%201-1c-1-5%201-5%205-2l3%201h1l1%203c0%202%200%202%204%201%202%200%202-1%201-2l-1-2v-1l-1%201-1%201-1-2-1-1v-1l3-1c8%200%2013-2%208-5l-9-1c0%201-4%202-6%201-1%200-1-2%201-2l1-1-2-1c-2%200-2%201-2%203l-2%202c-3%200-2-3%202-7%204-3%204-3%206-2v1l-1%201%207%201%206%202c2%200%202%200%200-3-4-5-8-6-16-4m-84%2022a62%2062%200%2000-43%2047c0%202%200%202%201%200h7l1-1-3-1c-3%201-3%201-1-1%201-1%201-1-1-1h-2l6-2h23l3%202c3%201%204%202%201%201-2%200-2%200-1%201l4%201%204%201%203%201c2%200%202%200%201-1s-1-1%201-1%202%200%201-1c-2-1-2-1-1-2v-1h-2l-2-1-1-1c1%200%2010%202%2012%204%203%201%205%201%203-1-2%200-2-1-1-1l4%202c4%203%205%202%201-2-2-1-3-3-2-3l-1-1-2-1c-3-2-1-3%202%200h4l1%201h1c2%200%202%200%201%201s-1%201%201%201c1%201%201%201-1%201l-2-1-2-1c-3%200%202%203%206%203h3c-2%200-3-2-1-2v-1c-1-1-1-1%201-1%201%200%202%200%201-1-2-1-1-2%202-1h4c1%200-1-3-3-3l-2-1h3c2%200%202%200%201-1s2-2%205-1l1-1h1l1-2%201-5%201-2v-2l-1-2%202-2%201-1%201-1%201-1v-1c5%200-11-8-20-10-8-2-21-2-27%200m-31%20131c-9%203-19%2014-19%2019%200%202%2014%201%2020%200l10-3%208-1-1-1c-3%200-1-2%202-2l4-2%201-2%201-2%201-2-4-3c-6-3-17-4-23-1M25%20315l-1%208v7h4c7%200%209-2%209-7l-2-6c-2-2-9-4-10-2m90%207v8h4c12%200%2012-14%201-16h-5v8m77%200v8h4c12%200%2013-14%201-16h-5v8m-150-2c-2%201-2%206-1%208%202%203%207%202%209-1%203-6-4-12-8-7m197-1v10l4%201c3-1%204%200%202%202l-4%201h-2%208l1-8v-7h-4l-5%201'%20fill='%23fafafa'%20fill-rule='evenodd'/%3e%3c/svg%3e"},"regular":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsSAAALEgHS3X78AAAEk0lEQVQ4y2VUWVCTVxT+7VhsZU0gZQtbkmFkcSRhERJs2QKJTolCiLECYbFTqCxmClSUWl861Wp5KdNpmRYVH1qgjrZO2+l0kAetQSoIwoBU+1jaQUAphM2Er+feIE2nd3Jy7n//c797zne++wvr6+tYB8A8G07yq6trcB8LCwuYm3uyGcPG2tozPHM4+JxjbOAI7mAOClhbc4FNTU2hra0NJpMJanUakpOToNPpYLVa0dfXh3Un7aEfO5xjbOAIz9EZkMPh5GCtra0IDQ2FIAjcPD09EREevvns4eEBg8GAiYkHPH5peflfQPfSnE4nLBYL3+Tl5QV/fzGZP4KDg6BQKODt7UWZJkMikfAYiSQAvb29fO/Kygr3wszMDB4+fIT5+b9RW1vLA3t6voH1mBUBAQEICwtDbm4u6uvqUEfvi4uLeYbe3t7kX4RI5Ifh4eFNXoWzH55BU0Mj33Bg/wGYD5rR/nk7MjIyeFYRERGIjY1Fwq4EXqZWm4tD5kPYk74HYrGYJ6DRaDZpEy5euAhrvRUVZeUwFRVxz8jXqDXYu3cfNUSNhnca0Hy8mcC0qKqqRseXHTjRfAJSqZRXwUC7u7tdJdsX7ej4ogO1NbUos5ShsKAARUYjMjMzeSY2Wz/RMY+nT56i81InjlS+iYryCuS/nk+ZxyEoKIgDFhYWugDZX3t7O+RyOarfqkLN0RqYzWakJKegsbEJfTf6cP2767jScwXH322GTCZDYmISNScFO+N38rJf2raNU2O3L1FTHs/g43Pn6WU8QkKCYSw08mwtpRacpLJOnzqNM4xnAmdcMQlFR0dDqVRCStLy8/ODWCTiihgZGYFgs9lQWlLKg318fBBPwKw5bK2poQktJ9/jB+h1evj6+vISs7OyoVKqkK5JR0xMDPHozwGZLgWmSNZhxgM7KTAwEFnEX8ZrGdDr9SSZPOTkaJFHXkvekG/APmoW63pWVhbxXQR1mhqRvGS7i8Nvr17DC1u2QETp+4tFkEVF0YZdiCO5xOzYAVlkFOfUZDShjrJlVnK4GPo8HbcCqqjkcAkG7gy4AGcXFiGjjQIJ1ZOE+rKvDyShIWhqacHlri7oqKMKAlftTkUBNeztunocrT+GYpJYSXklDpLYLZVHUE3rwnhFOSbLLLgcG4MP6Lqdp6t2ljL9hAAHi4zo1ebgAjWhjZ4/pVvTQfNLcXH4TC5DZ3wcvlap8JVKia7ERHQnJUG4RUQP0I0YpQweUJnjFDxBjRmn+QDxcjcyEvcp+/EEJcboHZsPUWPu0X0eIhskYbubYAsJwXBaGoaoy4N0KwZTU3GXTh2htXG6Gfdp/R6dPEKNGs3JwVh2NoZIszYC+4Xs9itkkg2judAvV6CfSumXMpO6fFg4vt++Hde2bsVPJKUbRMMt6v7PVM2P9FG4SkK+SbG/0t47JHRmAzI5mQzC6uwcVulrzGxldhb26cdYIvuhuwdvGPYjOlQKRVAwdjPh+/jiVVUiPjr1Pv6Y/A0rM7NY/Guae45D+//zPXw+HG7+z+lpDI+O4eZtGyYf/Y6FpeX/xbmPfwDiVsVz9wagGAAAAABJRU5ErkJggg==","aspectRatio":1,"src":"/static/dd02c9ee84329bacdf5004d5025b28c1/3ddd4/ddd-typescript-cover.png","srcSet":"/static/dd02c9ee84329bacdf5004d5025b28c1/078a8/ddd-typescript-cover.png 163w,\n/static/dd02c9ee84329bacdf5004d5025b28c1/e56da/ddd-typescript-cover.png 327w,\n/static/dd02c9ee84329bacdf5004d5025b28c1/3ddd4/ddd-typescript-cover.png 653w,\n/static/dd02c9ee84329bacdf5004d5025b28c1/c5cc7/ddd-typescript-cover.png 980w,\n/static/dd02c9ee84329bacdf5004d5025b28c1/6050d/ddd-typescript-cover.png 1200w","srcWebp":"/static/dd02c9ee84329bacdf5004d5025b28c1/0acdf/ddd-typescript-cover.webp","srcSetWebp":"/static/dd02c9ee84329bacdf5004d5025b28c1/ac59e/ddd-typescript-cover.webp 163w,\n/static/dd02c9ee84329bacdf5004d5025b28c1/7660b/ddd-typescript-cover.webp 327w,\n/static/dd02c9ee84329bacdf5004d5025b28c1/0acdf/ddd-typescript-cover.webp 653w,\n/static/dd02c9ee84329bacdf5004d5025b28c1/75470/ddd-typescript-cover.webp 980w,\n/static/dd02c9ee84329bacdf5004d5025b28c1/9000d/ddd-typescript-cover.webp 1200w","sizes":"(max-width: 653px) 100vw, 653px","tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='400'%20viewBox='0%200%20400%20400'%20preserveAspectRatio='none'%3e%3cpath%20d='M193%2023A170%20170%200%200078%2077l-1%201-7%209-8%2011c-2%202-2%202-13%201-12-2-16-3-10-3l3-1-7%201-14%201c-14%201-21%202-21%204l2%202h3l-2%203c-3%204-3%2012-1%2015s3%204%201%204l-2%201c-1%201%200%202%202%205%203%203%206%205%205%202l1-1%201%202h1l1%201v1l1%202-3-1c-3-3-3-2%200%202%207%206%2019%2015%2016%2011-1-2%202-1%203%201v1h-3l3%201%201%201%201%203%203%202-2%2011c-3%2012-4%2015-7%2015-2%200-8%206-7%208%200%202%204%203%205%202h2c-1-2%204-5%206-4l-1%202-4%204-2%201h-3c-2%201-5%200-6-2l-2%203c-2%2011%204%2024%2013%2027%203%200%203%201%205%2012a204%20204%200%200016%2048H0v37l1%2038h118l7%204c23%2012%2059%2020%2086%2019%2023-2%2047-8%2069-18l10-5h54c49%200%2055%200%2055-2a914%20914%200%20000-89v-7l-6-6-11-9c-4-3-5-4-5-6%2011-63-4-116-42-160l-8-10-1-1-5-1a169%20169%200%2000-129-46m-80%2057c-6%202-16%2012-14%2014l2-1h2l-3%204c-3%203-4%206-1%204s6-1%204%200c-4%202-5%205-2%205v2c-4%204-2%206%205%203%205-2%207-1%202%201l-4%203%205-2%204-3%204-2c7-1%2013-5%2013-7s0-2-3-1h-5l-2%201h-2l-3%201-5%201-2-1%202-1%203-3%202-2%201%201c-2%202%202%202%208%200%206-1%206-1%204-2-2-2-3-4%200-4h-3c-6%200-4-1%203-3l5-1-2-2c-3-2-8-2-14-1-3%201-5-1-1-2l5-2%203-1h-3l-8%201m123%201c-3%201-8%207-10%2011-2%203-1%2011%201%2014v-2c0-5%201-6%205-2%202%203%205%204%208%202%202%200%202-1%201-1-1-2%200-6%201-6v-9c-2-4-1-6%203-6%203%200%203%200%202-1h-11m-37%203c-3%202-4%207-3%2010%202%205%2013%202%2015-4l2-1c2%201%201-3-2-5s-9-3-12%200m74%2028c-4%202-10%206-8%206h-1c-2%200-3%200-2%201l1%202%203%201-1%201c-3%200-4%200-3%201l1%203h-4l-3-1-2-1-2-2c-1-4-7%204-8%2011%200%205%201%205%203%201%203-3%203-4%200-3l1-2c2-1%202-3%202-4h1l2%201h1l-2%202-2%201%202%202c2%201%203%201%204-1h2c1%201%202%202%203%201v-2c-2%200-2-1-1-1%202-1%205%200%205%201l1%203%201-1c-1-5%201-5%205-2l3%201h1l1%203c0%202%200%202%204%201%202%200%202-1%201-2l-1-2v-1l-1%201-1%201-1-2-1-1v-1l3-1c8%200%2013-2%208-5l-9-1c0%201-4%202-6%201-1%200-1-2%201-2l1-1-2-1c-2%200-2%201-2%203l-2%202c-3%200-2-3%202-7%204-3%204-3%206-2v1l-1%201%207%201%206%202c2%200%202%200%200-3-4-5-8-6-16-4m-84%2022a62%2062%200%2000-43%2047c0%202%200%202%201%200h7l1-1-3-1c-3%201-3%201-1-1%201-1%201-1-1-1h-2l6-2h23l3%202c3%201%204%202%201%201-2%200-2%200-1%201l4%201%204%201%203%201c2%200%202%200%201-1s-1-1%201-1%202%200%201-1c-2-1-2-1-1-2v-1h-2l-2-1-1-1c1%200%2010%202%2012%204%203%201%205%201%203-1-2%200-2-1-1-1l4%202c4%203%205%202%201-2-2-1-3-3-2-3l-1-1-2-1c-3-2-1-3%202%200h4l1%201h1c2%200%202%200%201%201s-1%201%201%201c1%201%201%201-1%201l-2-1-2-1c-3%200%202%203%206%203h3c-2%200-3-2-1-2v-1c-1-1-1-1%201-1%201%200%202%200%201-1-2-1-1-2%202-1h4c1%200-1-3-3-3l-2-1h3c2%200%202%200%201-1s2-2%205-1l1-1h1l1-2%201-5%201-2v-2l-1-2%202-2%201-1%201-1%201-1v-1c5%200-11-8-20-10-8-2-21-2-27%200m-31%20131c-9%203-19%2014-19%2019%200%202%2014%201%2020%200l10-3%208-1-1-1c-3%200-1-2%202-2l4-2%201-2%201-2%201-2-4-3c-6-3-17-4-23-1M25%20315l-1%208v7h4c7%200%209-2%209-7l-2-6c-2-2-9-4-10-2m90%207v8h4c12%200%2012-14%201-16h-5v8m77%200v8h4c12%200%2013-14%201-16h-5v8m-150-2c-2%201-2%206-1%208%202%203%207%202%209-1%203-6-4-12-8-7m197-1v10l4%201c3-1%204%200%202%202l-4%201h-2%208l1-8v-7h-4l-5%201'%20fill='%23fafafa'%20fill-rule='evenodd'/%3e%3c/svg%3e"},"narrow":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsSAAALEgHS3X78AAAEk0lEQVQ4y2VUWVCTVxT+7VhsZU0gZQtbkmFkcSRhERJs2QKJTolCiLECYbFTqCxmClSUWl861Wp5KdNpmRYVH1qgjrZO2+l0kAetQSoIwoBU+1jaQUAphM2Er+feIE2nd3Jy7n//c797zne++wvr6+tYB8A8G07yq6trcB8LCwuYm3uyGcPG2tozPHM4+JxjbOAI7mAOClhbc4FNTU2hra0NJpMJanUakpOToNPpYLVa0dfXh3Un7aEfO5xjbOAIz9EZkMPh5GCtra0IDQ2FIAjcPD09EREevvns4eEBg8GAiYkHPH5peflfQPfSnE4nLBYL3+Tl5QV/fzGZP4KDg6BQKODt7UWZJkMikfAYiSQAvb29fO/Kygr3wszMDB4+fIT5+b9RW1vLA3t6voH1mBUBAQEICwtDbm4u6uvqUEfvi4uLeYbe3t7kX4RI5Ifh4eFNXoWzH55BU0Mj33Bg/wGYD5rR/nk7MjIyeFYRERGIjY1Fwq4EXqZWm4tD5kPYk74HYrGYJ6DRaDZpEy5euAhrvRUVZeUwFRVxz8jXqDXYu3cfNUSNhnca0Hy8mcC0qKqqRseXHTjRfAJSqZRXwUC7u7tdJdsX7ej4ogO1NbUos5ShsKAARUYjMjMzeSY2Wz/RMY+nT56i81InjlS+iYryCuS/nk+ZxyEoKIgDFhYWugDZX3t7O+RyOarfqkLN0RqYzWakJKegsbEJfTf6cP2767jScwXH322GTCZDYmISNScFO+N38rJf2raNU2O3L1FTHs/g43Pn6WU8QkKCYSw08mwtpRacpLJOnzqNM4xnAmdcMQlFR0dDqVRCStLy8/ODWCTiihgZGYFgs9lQWlLKg318fBBPwKw5bK2poQktJ9/jB+h1evj6+vISs7OyoVKqkK5JR0xMDPHozwGZLgWmSNZhxgM7KTAwEFnEX8ZrGdDr9SSZPOTkaJFHXkvekG/APmoW63pWVhbxXQR1mhqRvGS7i8Nvr17DC1u2QETp+4tFkEVF0YZdiCO5xOzYAVlkFOfUZDShjrJlVnK4GPo8HbcCqqjkcAkG7gy4AGcXFiGjjQIJ1ZOE+rKvDyShIWhqacHlri7oqKMKAlftTkUBNeztunocrT+GYpJYSXklDpLYLZVHUE3rwnhFOSbLLLgcG4MP6Lqdp6t2ljL9hAAHi4zo1ebgAjWhjZ4/pVvTQfNLcXH4TC5DZ3wcvlap8JVKia7ERHQnJUG4RUQP0I0YpQweUJnjFDxBjRmn+QDxcjcyEvcp+/EEJcboHZsPUWPu0X0eIhskYbubYAsJwXBaGoaoy4N0KwZTU3GXTh2htXG6Gfdp/R6dPEKNGs3JwVh2NoZIszYC+4Xs9itkkg2judAvV6CfSumXMpO6fFg4vt++Hde2bsVPJKUbRMMt6v7PVM2P9FG4SkK+SbG/0t47JHRmAzI5mQzC6uwcVulrzGxldhb26cdYIvuhuwdvGPYjOlQKRVAwdjPh+/jiVVUiPjr1Pv6Y/A0rM7NY/Guae45D+//zPXw+HG7+z+lpDI+O4eZtGyYf/Y6FpeX/xbmPfwDiVsVz9wagGAAAAABJRU5ErkJggg==","aspectRatio":1,"src":"/static/dd02c9ee84329bacdf5004d5025b28c1/502b1/ddd-typescript-cover.png","srcSet":"/static/dd02c9ee84329bacdf5004d5025b28c1/f2e6d/ddd-typescript-cover.png 114w,\n/static/dd02c9ee84329bacdf5004d5025b28c1/4ddba/ddd-typescript-cover.png 229w,\n/static/dd02c9ee84329bacdf5004d5025b28c1/502b1/ddd-typescript-cover.png 457w,\n/static/dd02c9ee84329bacdf5004d5025b28c1/7ddc2/ddd-typescript-cover.png 686w,\n/static/dd02c9ee84329bacdf5004d5025b28c1/435bf/ddd-typescript-cover.png 914w,\n/static/dd02c9ee84329bacdf5004d5025b28c1/6050d/ddd-typescript-cover.png 1200w","srcWebp":"/static/dd02c9ee84329bacdf5004d5025b28c1/15384/ddd-typescript-cover.webp","srcSetWebp":"/static/dd02c9ee84329bacdf5004d5025b28c1/31fce/ddd-typescript-cover.webp 114w,\n/static/dd02c9ee84329bacdf5004d5025b28c1/e3e25/ddd-typescript-cover.webp 229w,\n/static/dd02c9ee84329bacdf5004d5025b28c1/15384/ddd-typescript-cover.webp 457w,\n/static/dd02c9ee84329bacdf5004d5025b28c1/0258d/ddd-typescript-cover.webp 686w,\n/static/dd02c9ee84329bacdf5004d5025b28c1/64ea2/ddd-typescript-cover.webp 914w,\n/static/dd02c9ee84329bacdf5004d5025b28c1/9000d/ddd-typescript-cover.webp 1200w","sizes":"(max-width: 457px) 100vw, 457px","tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='400'%20viewBox='0%200%20400%20400'%20preserveAspectRatio='none'%3e%3cpath%20d='M193%2023A170%20170%200%200078%2077l-1%201-7%209-8%2011c-2%202-2%202-13%201-12-2-16-3-10-3l3-1-7%201-14%201c-14%201-21%202-21%204l2%202h3l-2%203c-3%204-3%2012-1%2015s3%204%201%204l-2%201c-1%201%200%202%202%205%203%203%206%205%205%202l1-1%201%202h1l1%201v1l1%202-3-1c-3-3-3-2%200%202%207%206%2019%2015%2016%2011-1-2%202-1%203%201v1h-3l3%201%201%201%201%203%203%202-2%2011c-3%2012-4%2015-7%2015-2%200-8%206-7%208%200%202%204%203%205%202h2c-1-2%204-5%206-4l-1%202-4%204-2%201h-3c-2%201-5%200-6-2l-2%203c-2%2011%204%2024%2013%2027%203%200%203%201%205%2012a204%20204%200%200016%2048H0v37l1%2038h118l7%204c23%2012%2059%2020%2086%2019%2023-2%2047-8%2069-18l10-5h54c49%200%2055%200%2055-2a914%20914%200%20000-89v-7l-6-6-11-9c-4-3-5-4-5-6%2011-63-4-116-42-160l-8-10-1-1-5-1a169%20169%200%2000-129-46m-80%2057c-6%202-16%2012-14%2014l2-1h2l-3%204c-3%203-4%206-1%204s6-1%204%200c-4%202-5%205-2%205v2c-4%204-2%206%205%203%205-2%207-1%202%201l-4%203%205-2%204-3%204-2c7-1%2013-5%2013-7s0-2-3-1h-5l-2%201h-2l-3%201-5%201-2-1%202-1%203-3%202-2%201%201c-2%202%202%202%208%200%206-1%206-1%204-2-2-2-3-4%200-4h-3c-6%200-4-1%203-3l5-1-2-2c-3-2-8-2-14-1-3%201-5-1-1-2l5-2%203-1h-3l-8%201m123%201c-3%201-8%207-10%2011-2%203-1%2011%201%2014v-2c0-5%201-6%205-2%202%203%205%204%208%202%202%200%202-1%201-1-1-2%200-6%201-6v-9c-2-4-1-6%203-6%203%200%203%200%202-1h-11m-37%203c-3%202-4%207-3%2010%202%205%2013%202%2015-4l2-1c2%201%201-3-2-5s-9-3-12%200m74%2028c-4%202-10%206-8%206h-1c-2%200-3%200-2%201l1%202%203%201-1%201c-3%200-4%200-3%201l1%203h-4l-3-1-2-1-2-2c-1-4-7%204-8%2011%200%205%201%205%203%201%203-3%203-4%200-3l1-2c2-1%202-3%202-4h1l2%201h1l-2%202-2%201%202%202c2%201%203%201%204-1h2c1%201%202%202%203%201v-2c-2%200-2-1-1-1%202-1%205%200%205%201l1%203%201-1c-1-5%201-5%205-2l3%201h1l1%203c0%202%200%202%204%201%202%200%202-1%201-2l-1-2v-1l-1%201-1%201-1-2-1-1v-1l3-1c8%200%2013-2%208-5l-9-1c0%201-4%202-6%201-1%200-1-2%201-2l1-1-2-1c-2%200-2%201-2%203l-2%202c-3%200-2-3%202-7%204-3%204-3%206-2v1l-1%201%207%201%206%202c2%200%202%200%200-3-4-5-8-6-16-4m-84%2022a62%2062%200%2000-43%2047c0%202%200%202%201%200h7l1-1-3-1c-3%201-3%201-1-1%201-1%201-1-1-1h-2l6-2h23l3%202c3%201%204%202%201%201-2%200-2%200-1%201l4%201%204%201%203%201c2%200%202%200%201-1s-1-1%201-1%202%200%201-1c-2-1-2-1-1-2v-1h-2l-2-1-1-1c1%200%2010%202%2012%204%203%201%205%201%203-1-2%200-2-1-1-1l4%202c4%203%205%202%201-2-2-1-3-3-2-3l-1-1-2-1c-3-2-1-3%202%200h4l1%201h1c2%200%202%200%201%201s-1%201%201%201c1%201%201%201-1%201l-2-1-2-1c-3%200%202%203%206%203h3c-2%200-3-2-1-2v-1c-1-1-1-1%201-1%201%200%202%200%201-1-2-1-1-2%202-1h4c1%200-1-3-3-3l-2-1h3c2%200%202%200%201-1s2-2%205-1l1-1h1l1-2%201-5%201-2v-2l-1-2%202-2%201-1%201-1%201-1v-1c5%200-11-8-20-10-8-2-21-2-27%200m-31%20131c-9%203-19%2014-19%2019%200%202%2014%201%2020%200l10-3%208-1-1-1c-3%200-1-2%202-2l4-2%201-2%201-2%201-2-4-3c-6-3-17-4-23-1M25%20315l-1%208v7h4c7%200%209-2%209-7l-2-6c-2-2-9-4-10-2m90%207v8h4c12%200%2012-14%201-16h-5v8m77%200v8h4c12%200%2013-14%201-16h-5v8m-150-2c-2%201-2%206-1%208%202%203%207%202%209-1%203-6-4-12-8-7m197-1v10l4%201c3-1%204%200%202%202l-4%201h-2%208l1-8v-7h-4l-5%201'%20fill='%23fafafa'%20fill-rule='evenodd'/%3e%3c/svg%3e"},"seo":{"src":"/static/dd02c9ee84329bacdf5004d5025b28c1/6050d/ddd-typescript-cover.png"}}},{"id":"ba6d4176-7616-520c-ba8f-c0389bb586f8","slug":"/progressive-web-apps-offline-capabilities-and-background-operations","secret":false,"title":"Progressive Web Apps, Offline Capabilities and Background Operations","author":"Luke Celitan","date":"September 18th, 2025","dateForSEO":"2025-09-18T00:00:00.000Z","timeToRead":5,"excerpt":"A comprehensive, hands-on guide to building Progressive Web Apps (PWAs) with robust offline capabilities, advanced caching strategies, background sync, background fetch, push notifications, and real-world troubleshooting. Learn the architecture, implementation, performance optimization, and best practices for resilient, user-friendly web apps.","subscription":true,"body":"var _excluded = [\"components\"];\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n \"title\": \"Progressive Web Apps, Offline Capabilities and Background Operations\",\n \"excerpt\": \"A comprehensive, hands-on guide to building Progressive Web Apps (PWAs) with robust offline capabilities, advanced caching strategies, background sync, background fetch, push notifications, and real-world troubleshooting. Learn the architecture, implementation, performance optimization, and best practices for resilient, user-friendly web apps.\",\n \"date\": \"2025-09-18T00:00:00.000Z\",\n \"hero\": \"pwacover.png\",\n \"author\": \"Luke Celitan\",\n \"category\": \"Post\",\n \"tech\": [\"JS\", \"TS\"]\n};\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"h1\", {\n \"id\": \"progressive-web-apps-the-definitive-deep-dive-on-offline-capabilities-and-background-operations\"\n }, \"Progressive Web Apps: The Definitive Deep-Dive on Offline Capabilities and Background Operations\"), mdx(\"h2\", {\n \"id\": \"introduction\"\n }, \"Introduction\"), mdx(\"p\", null, \"Progressive Web Apps (PWAs) have revolutionized the way we build web applications, bringing native-like reliability, speed, and engagement to the browser. One of the most powerful features of PWAs is their ability to work offline and perform background operations, ensuring users have a seamless experience regardless of network conditions. In this guide, I\\u2019ll take you on a deep technical journey through the architecture, implementation, and advanced strategies for building PWAs with robust offline capabilities and background features. Whether you\\u2019re new to PWAs or looking to master advanced APIs, this post will serve as your definitive reference.\"), mdx(\"h2\", {\n \"id\": \"1-what-is-a-pwa-why-offline-matters\"\n }, \"1. What is a PWA? Why Offline Matters\"), mdx(\"p\", null, \"A Progressive Web App (PWA) is a web application that leverages modern browser APIs to deliver an app-like experience: installability, offline support, background sync, push notifications, and more. PWAs bridge the gap between web and native apps, offering reliability and engagement even in poor or intermittent network conditions.\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Why Offline Capabilities Matter:\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"User Expectations:\"), \" Users expect apps to work regardless of connectivity. Offline support is no longer a luxury\\u2014it\\u2019s a necessity.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Reliability:\"), \" Offline operation ensures users can access critical features and data, improving trust and retention.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Performance:\"), \" Serving cached resources is faster than fetching from the network, leading to snappier UX.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Engagement:\"), \" Features like background sync and push notifications keep users engaged even when the app isn\\u2019t open.\")), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Key Technologies:\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Service Worker API\"), \": The backbone of offline and background operations.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Cache API\"), \": Store and retrieve resources for offline use.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Background Sync, Background Fetch, Periodic Sync, Push API, Notifications\"), \": Advanced APIs for background tasks and user engagement.\")), mdx(\"h2\", {\n \"id\": \"2-pwa-architecture-main-app-vs-service-worker\"\n }, \"2. PWA Architecture: Main App vs. Service Worker\"), mdx(\"p\", null, \"PWAs are architected around a clear separation of concerns:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Main App Thread\"), \": Handles UI, user interactions, and business logic. Runs in the browser\\u2019s main thread.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Service Worker Thread\"), \": Runs in the background, intercepts network requests, manages cache, and handles background tasks. Isolated from the main app, communicates via messaging.\")), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Diagram: PWA Architecture\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\"\n }, \"+-------------------+ +---------------------+\\n| Main App (UI) | <--> | Service Worker |\\n| HTML, CSS, JS | | Background Thread |\\n+-------------------+ +---------------------+\\n\")), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Communication:\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"postMessage\"), \" API for sending messages between main app and service worker.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Service worker events (\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"fetch\"), \", \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"sync\"), \", \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"push\"), \", etc.) for intercepting and handling background tasks.\")), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Why This Matters:\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Keeps UI responsive while service worker handles heavy lifting.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Enables offline and background operations even when the app is closed.\")), mdx(\"h2\", {\n \"id\": \"3-service-worker-fundamentals\"\n }, \"3. Service Worker Fundamentals\"), mdx(\"p\", null, \"Service workers are the heart of PWAs. Let\\u2019s break down their lifecycle and core concepts:\"), mdx(\"h3\", {\n \"id\": \"registering-a-service-worker\"\n }, \"Registering a Service Worker\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"// main.js\\nif ('serviceWorker' in navigator) {\\n window.addEventListener('load', () => {\\n navigator.serviceWorker.register('/service-worker.js')\\n .then(registration => {\\n console.log('Service Worker registered with scope:', registration.scope);\\n })\\n .catch(error => {\\n console.error('Service Worker registration failed:', error);\\n });\\n });\\n}\\n\")), mdx(\"h3\", {\n \"id\": \"service-worker-lifecycle\"\n }, \"Service Worker Lifecycle\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Install\"), \": Cache assets and prepare for activation.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Activate\"), \": Clean up old caches, take control of pages.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Fetch\"), \": Intercept network requests, serve from cache or network.\")), mdx(\"h3\", {\n \"id\": \"scope-and-limitations\"\n }, \"Scope and Limitations\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Service workers are scoped to the directory they\\u2019re registered from.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"No direct DOM access; communicate via messaging.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Runs in a separate thread; may be stopped and restarted by the browser.\")), mdx(\"h2\", {\n \"id\": \"4-implementing-offline-operation\"\n }, \"4. Implementing Offline Operation\"), mdx(\"p\", null, \"Offline operation is enabled by intercepting network requests and serving cached resources. The most common strategies are \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"cache-first\"), \" and \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"network-first\"), \".\"), mdx(\"h3\", {\n \"id\": \"caching-strategies\"\n }, \"Caching Strategies\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Cache-First\"), \": Serve from cache if available, otherwise fetch from network.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Network-First\"), \": Try network first, fall back to cache if offline.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Stale-While-Revalidate\"), \": Serve cached response, update cache in background.\")), mdx(\"h3\", {\n \"id\": \"using-the-cache-api\"\n }, \"Using the Cache API\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"// service-worker.js\\nconst CACHE_NAME = 'pwa-cache-v1';\\nconst ASSETS_TO_CACHE = [\\n '/',\\n '/index.html',\\n '/styles.css',\\n '/app.js',\\n '/fallback.html',\\n];\\n\\nself.addEventListener('install', event => {\\n event.waitUntil(\\n caches.open(CACHE_NAME).then(cache => cache.addAll(ASSETS_TO_CACHE))\\n );\\n});\\n\\nself.addEventListener('activate', event => {\\n event.waitUntil(\\n caches.keys().then(keys =>\\n Promise.all(\\n keys.filter(key => key !== CACHE_NAME).map(key => caches.delete(key))\\n )\\n )\\n );\\n});\\n\")), mdx(\"h3\", {\n \"id\": \"intercepting-fetch-requests\"\n }, \"Intercepting Fetch Requests\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Cache-First Example with Fallback Redirect:\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"// service-worker.js\\nself.addEventListener('fetch', event => {\\n event.respondWith(\\n caches.match(event.request).then(cachedResponse => {\\n if (cachedResponse) {\\n return cachedResponse;\\n }\\n return fetch(event.request).catch(() => caches.match('/fallback.html'));\\n })\\n );\\n});\\n\")), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Annotated Explanation:\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Try to match the request in cache.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"If found, return cached response.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"If not, attempt network fetch.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"If network fails (offline), return cached fallback page.\")), mdx(\"h3\", {\n \"id\": \"practical-example-redirecting-to-cache-when-offline\"\n }, \"Practical Example: Redirecting to Cache When Offline\"), mdx(\"p\", null, \"Suppose your app has a \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"/fallback.html\"), \" page cached during install. If the user is offline and requests a page not in cache, the service worker serves \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"/fallback.html\"), \".\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Edge Case:\"), \" Ensure \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"/fallback.html\"), \" is always cached and updated during service worker install.\"), mdx(\"h2\", {\n \"id\": \"5-advanced-caching-strategies\"\n }, \"5. Advanced Caching Strategies\"), mdx(\"h3\", {\n \"id\": \"when-to-use-cache-first-vs-network-first\"\n }, \"When to Use Cache-First vs. Network-First\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Static assets\"), \" (HTML, CSS, JS): Cache-first for speed.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Dynamic data\"), \" (API responses): Network-first for freshness, fallback to cache for offline.\")), mdx(\"h3\", {\n \"id\": \"handling-stale-data-and-cache-invalidation\"\n }, \"Handling Stale Data and Cache Invalidation\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Use cache versioning (\", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"CACHE_NAME\"), \") and clean up old caches on activate.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Implement custom logic to revalidate or update cache entries.\")), mdx(\"h3\", {\n \"id\": \"pre-caching-assets-during-install\"\n }, \"Pre-Caching Assets During Install\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Use \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"cache.addAll()\"), \" to pre-cache essential assets.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Consider runtime caching for assets loaded after install.\")), mdx(\"h3\", {\n \"id\": \"dynamic-caching-for-api-responses\"\n }, \"Dynamic Caching for API Responses\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"// service-worker.js\\nself.addEventListener('fetch', event => {\\n if (event.request.url.includes('/api/')) {\\n event.respondWith(\\n fetch(event.request)\\n .then(response => {\\n return caches.open(CACHE_NAME).then(cache => {\\n cache.put(event.request, response.clone());\\n return response;\\n });\\n })\\n .catch(() => caches.match(event.request))\\n );\\n }\\n});\\n\")), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Explanation:\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"For API requests, try network first, cache response, fallback to cache if offline.\")), mdx(\"h2\", {\n \"id\": \"6-background-operation\"\n }, \"6. Background Operation\"), mdx(\"p\", null, \"Service workers can run even when the main app is closed, enabling background tasks like sync, fetch, and push notifications.\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Lifecycle Management:\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Browsers may stop service workers when idle; restart them for events.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Use \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"event.waitUntil()\"), \" to keep service worker alive during async operations.\")), mdx(\"h2\", {\n \"id\": \"7-background-sync\"\n }, \"7. Background Sync\"), mdx(\"p\", null, \"Background Sync lets you queue actions (e.g., sending messages) and execute them when connectivity returns.\"), mdx(\"h3\", {\n \"id\": \"registering-sync-events-from-main-app\"\n }, \"Registering Sync Events from Main App\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"// main.js\\nasync function registerSync() {\\n const swRegistration = await navigator.serviceWorker.ready;\\n swRegistration.sync.register('send-message');\\n}\\n\")), mdx(\"h3\", {\n \"id\": \"handling-sync-events-in-service-worker\"\n }, \"Handling Sync Events in Service Worker\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"// service-worker.js\\nself.addEventListener('sync', event => {\\n if (event.tag === 'send-message') {\\n event.waitUntil(sendMessage());\\n }\\n});\\n\\nasync function sendMessage() {\\n // Logic to send queued messages\\n}\\n\")), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Limitations:\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Browser may retry sync if it fails, but limits retries and execution time.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Use IndexedDB to store queued actions for reliability.\")), mdx(\"h2\", {\n \"id\": \"8-background-fetch\"\n }, \"8. Background Fetch\"), mdx(\"p\", null, \"Background Fetch is ideal for downloading large files, even if the app is closed.\"), mdx(\"h3\", {\n \"id\": \"initiating-background-fetch-from-main-app\"\n }, \"Initiating Background Fetch from Main App\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"// main.js\\nasync function requestBackgroundFetch() {\\n const swRegistration = await navigator.serviceWorker.ready;\\n await swRegistration.backgroundFetch.fetch(\\n 'download-movie',\\n ['/movie-part-1.webm', '/movie-part-2.webm'],\\n {\\n icons: [{ src: '/icon.png', sizes: '192x192', type: 'image/png' }],\\n title: 'Downloading movie',\\n downloadTotal: 60 * 1024 * 1024,\\n }\\n );\\n}\\n\")), mdx(\"h3\", {\n \"id\": \"handling-fetch-completion-in-service-worker\"\n }, \"Handling Fetch Completion in Service Worker\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"// service-worker.js\\nself.addEventListener('backgroundfetchsuccess', event => {\\n event.waitUntil(async () => {\\n const records = await event.registration.matchAll();\\n const responses = await Promise.all(records.map(record => record.responseReady));\\n // Store responses in cache or IndexedDB\\n });\\n event.updateUI({ title: 'Download complete!' });\\n});\\n\")), mdx(\"h2\", {\n \"id\": \"9-periodic-background-sync\"\n }, \"9. Periodic Background Sync\"), mdx(\"p\", null, \"Periodic Sync keeps data fresh by updating in the background at intervals.\"), mdx(\"h3\", {\n \"id\": \"registering-periodic-sync\"\n }, \"Registering Periodic Sync\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"// main.js\\nasync function registerPeriodicSync() {\\n const swRegistration = await navigator.serviceWorker.ready;\\n swRegistration.periodicSync.register('update-news', {\\n minInterval: 24 * 60 * 60 * 1000, // 24 hours\\n });\\n}\\n\")), mdx(\"h3\", {\n \"id\": \"handling-periodic-sync-in-service-worker\"\n }, \"Handling Periodic Sync in Service Worker\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"// service-worker.js\\nself.addEventListener('periodicsync', event => {\\n if (event.tag === 'update-news') {\\n event.waitUntil(updateNews());\\n }\\n});\\n\\nasync function updateNews() {\\n // Fetch and cache latest news articles\\n}\\n\")), mdx(\"h2\", {\n \"id\": \"10-push-notifications\"\n }, \"10. Push Notifications\"), mdx(\"p\", null, \"Push API enables server-initiated messages and notifications.\"), mdx(\"h3\", {\n \"id\": \"subscribing-to-push-messages\"\n }, \"Subscribing to Push Messages\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"// main.js\\nasync function subscribeToPush() {\\n const swRegistration = await navigator.serviceWorker.ready;\\n const subscription = await swRegistration.pushManager.subscribe({\\n userVisibleOnly: true,\\n applicationServerKey: ''\\n });\\n // Send subscription to server\\n}\\n\")), mdx(\"h3\", {\n \"id\": \"handling-push-events-in-service-worker\"\n }, \"Handling Push Events in Service Worker\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"// service-worker.js\\nself.addEventListener('push', event => {\\n const data = event.data ? event.data.json() : {};\\n event.waitUntil(\\n self.registration.showNotification(data.title, {\\n body: data.body,\\n icon: '/icon.png',\\n data: data.url\\n })\\n );\\n});\\n\")), mdx(\"h3\", {\n \"id\": \"responding-to-notification-clicks\"\n }, \"Responding to Notification Clicks\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, \"self.addEventListener('notificationclick', event => {\\n event.notification.close();\\n event.waitUntil(\\n clients.openWindow(event.notification.data)\\n );\\n});\\n\")), mdx(\"h2\", {\n \"id\": \"11-permissions-and-browser-restrictions\"\n }, \"11. Permissions and Browser Restrictions\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Service Worker\"), \": No explicit permission, but must be served over HTTPS.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Background Fetch/Sync/Periodic Sync\"), \": May require user permission; browser UI informs users.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Push Notifications\"), \": Explicit user permission required; must be user-visible.\")), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Best Practices:\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Request permissions contextually (when needed, not on load).\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Inform users why permissions are needed.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Handle permission denial gracefully.\")), mdx(\"h2\", {\n \"id\": \"12-real-world-use-cases\"\n }, \"12. Real-World Use Cases\"), mdx(\"h3\", {\n \"id\": \"music-app-with-offline-streaming\"\n }, \"Music App with Offline Streaming\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Pre-cache tracks for offline playback.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Use background fetch for large downloads.\")), mdx(\"h3\", {\n \"id\": \"email-app-with-background-send\"\n }, \"Email App with Background Send\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Queue emails in IndexedDB.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Use background sync to send when online.\")), mdx(\"h3\", {\n \"id\": \"chat-app-with-push-notifications\"\n }, \"Chat App with Push Notifications\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Subscribe to push for new messages.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Show notifications even when app is closed.\")), mdx(\"h2\", {\n \"id\": \"13-performance-optimization\"\n }, \"13. Performance Optimization\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Minimize Cache Size\"), \": Remove unused assets, use cache versioning.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Efficient Background Operations\"), \": Use IndexedDB for large/complex data.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Battery and Privacy\"), \": Limit background tasks, respect user settings.\")), mdx(\"h2\", {\n \"id\": \"14-troubleshooting-and-debugging\"\n }, \"14. Troubleshooting and Debugging\"), mdx(\"h3\", {\n \"id\": \"common-errors\"\n }, \"Common Errors\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Service worker not registering: Check HTTPS, file paths, browser support.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Cache misses: Ensure assets are cached during install.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Sync failures: Use IndexedDB for reliability, handle retries.\")), mdx(\"h3\", {\n \"id\": \"debugging-tools\"\n }, \"Debugging Tools\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Chrome DevTools: Application tab for service workers and cache.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Console logs in service worker for lifecycle events.\")), mdx(\"h3\", {\n \"id\": \"recovery-strategies\"\n }, \"Recovery Strategies\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Fallback pages for offline errors.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Retry logic for background sync.\")), mdx(\"h2\", {\n \"id\": \"15-best-practices-and-common-pitfalls\"\n }, \"15. Best Practices and Common Pitfalls\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Avoid Stale Data\"), \": Implement cache invalidation and revalidation.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Handle Edge Cases\"), \": Always provide a fallback for offline requests.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"User Experience\"), \": Inform users of offline status, sync progress, and permission needs.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Security\"), \": Serve service worker over HTTPS, validate push messages.\")), mdx(\"h2\", {\n \"id\": \"16-conclusion-and-further-reading\"\n }, \"16. Conclusion and Further Reading\"), mdx(\"p\", null, \"PWAs empower developers to build resilient, engaging web apps that work offline and in the background. By mastering service workers, caching strategies, and advanced APIs, you can deliver a truly native-like experience on the web. Dive deeper into the official documentation and experiment with these APIs to unlock the full potential of your web apps!\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Further Reading:\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API\",\n \"target\": \"_blank\",\n \"rel\": \"noreferrer\"\n }, \"Service Worker API\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/API/Background_Sync_API\",\n \"target\": \"_blank\",\n \"rel\": \"noreferrer\"\n }, \"Background Sync API\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/API/Background_Fetch_API\",\n \"target\": \"_blank\",\n \"rel\": \"noreferrer\"\n }, \"Background Fetch API\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/API/Push_API\",\n \"target\": \"_blank\",\n \"rel\": \"noreferrer\"\n }, \"Push API\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API\",\n \"target\": \"_blank\",\n \"rel\": \"noreferrer\"\n }, \"Notifications API\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"a\", {\n parentName: \"li\",\n \"href\": \"https://web.dev/progressive-web-apps/\",\n \"target\": \"_blank\",\n \"rel\": \"noreferrer\"\n }, \"PWA Guides on web.dev\"))), mdx(\"hr\", null), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Ready to build your next offline-first PWA? Let\\u2019s get coding!\")));\n}\n;\nMDXContent.isMDXComponent = true;","tech":["JS","TS"],"category":"Post","appDescription":null,"hero":{"full":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsSAAALEgHS3X78AAADM0lEQVQ4y5WSXUzTVxiHz7+lUGkFrThrywC1EKFUojiEyYe4G5fUiUYUCDJQgeGUGKgRdHNxF02cuxE3P8LlvHFuOvwIGowIUiPSK7WYqEBgVflYZrIt8/LZ6V9KoALOi1/OOe8573PeL6HRKAghUBTlLQXskxW0azQa9RwWFoZWqw21T3UIhfwfhQTx9oNgBO8JCmr6h++CzPLu/VILRP+O0swc0WwNCjRkxghDL4KRBBToYsBmNBpxu938evEiZrN5tvLMnN7k1WKxkJyczPnzP3PkyDcUFRWRmJg40cRpuzz5N0VMBer1eux2O/X19Zw40URrayuFhYVTgBNzOBkUTDV0hBwOB8ePf09TUxNtbTc5evRbNjo3TpRkxpRDxyLo4HK5OHP6DKd+PMW9e93U1NTgdDoJj4iYDqiEgN5EGehk4Jyfn8/Jkz9w7Nh3XLjwC1euXCV7bTYFBQXodLrpgWK8ZkFIULZlNs79dI6GhkYuXfqNlpbL7N27j9TUVIqLSzCZTON+OgkPHwcqslbaN4C0NAd7vvwCW+JS6ur247nbRXPzWdpv36Kjo53y8jI2FXzGunW55EnFxcWiaARW62JZZzsiUslBJz5GK7LQiEwMmnzWrNhHXoaLLZ+61f3K5VVs3uCWtgPq3mGrwBztJFLJZY7IRi9l0OYRY9iASLLUkuU4TPryg2SkNJJmc2GPryXOVEXqkloyHQ3Em6qxJ9TiWLqfD+ZUyI+3SkgxUWKHVJmquXJvFKWI2Hk7WbuygZxVjeSkN7I+8yuyVhyUH9SRYT9A7upDfJTiIjf9MJ9kfc3qlHqSrHtIiKkkUmxTZRDb1dUoihCWqAoWzy0nRl/KIsPnE3tr9E4+nL9bqlJGu1velWGN2kX8gkqWLKwmdt4uzMYKFup3YAovYUFEKdFaCfT7x3j6ZAiv9yE99x/IkWjjTmc3ni4v167e5HLLDdX+8METfI+e0evrwyc10P9Cnp/S2dFN+y0PHo9XDnwnYnBoEL//dx4/7mVkZJixsVF17et7hq/Xx/XrrQwM9PP69b+8evUnf//zl9rxHu99hkdeMvbHKM+f+1X/Icn6DwvebGh8eNoPAAAAAElFTkSuQmCC","aspectRatio":1,"src":"/static/53920bf873a1ff67b3b19c0f6ad43482/a1946/pwacover.png","srcSet":"/static/53920bf873a1ff67b3b19c0f6ad43482/5b37e/pwacover.png 236w,\n/static/53920bf873a1ff67b3b19c0f6ad43482/49058/pwacover.png 472w,\n/static/53920bf873a1ff67b3b19c0f6ad43482/a1946/pwacover.png 944w,\n/static/53920bf873a1ff67b3b19c0f6ad43482/6050d/pwacover.png 1200w","srcWebp":"/static/53920bf873a1ff67b3b19c0f6ad43482/99fbb/pwacover.webp","srcSetWebp":"/static/53920bf873a1ff67b3b19c0f6ad43482/77392/pwacover.webp 236w,\n/static/53920bf873a1ff67b3b19c0f6ad43482/1f177/pwacover.webp 472w,\n/static/53920bf873a1ff67b3b19c0f6ad43482/99fbb/pwacover.webp 944w,\n/static/53920bf873a1ff67b3b19c0f6ad43482/9000d/pwacover.webp 1200w","sizes":"(max-width: 944px) 100vw, 944px","tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='400'%20viewBox='0%200%20400%20400'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%20180v181l28-1c25%200%2027%200%2029%202h5l5-1h48a140%20140%200%200128%200%20376%20376%200%200166%201c1-2%2011-2%2072-2a8952%208952%200%2001119%201l1-182V0h-45a244%20244%200%2000-47%201L154%200H0v180m230-54c-6%202-19%2013-15%2013v2c-2%204%200%203%202-1%202-3%203-4%207-4s5%200%204%201-1%201%201%201h1l1%202%201-1c-2-2%201-1%203%201l1%202%201%202%201-1c-2-2%200-1%203%201%202%202%203%203%202%204h2c1%209%203%2015%204%2013h1l1%201%201-1%202-2c3-2%204-2%204-1v1l1-2c-1%200%200-2%202-3s3-2%204-1l-1%201v2h-3v1c2-1%202%202%200%204v2l-1%201-1-2-5%201-6%201v6c-1%201-1%202%201%202%204%201%201%204-8%207-5%203-10%204-13%205-3%200-4%200-2-1%202%200%202%200-3-2-7-2-9%200-4%205l4%204%203%201c3%200%203%200%201-1s-2-1%202-1l8-2h7l-2%201h2l-2%201c-2%201-5%202-6%201-2%200-2%200-1%201s1%201-1%201h-3c-1%201%200%201%201%201l4%202c1%202%201%202-1%202l-4-2-6-2h-2l-1-1c0-3-1-3-5%200-3%203-3%203-1%204v4c-2%202-3%2011-1%2010%201-1%202%201%202%204l1%203v5l-1-3-1-2-1-1c0-2-2-1-3%200l-1%203v1l-1-2c-1-3-3-3-4%201l-5%205c-5%204-13%2011-13%2013l-2%201c-2%201-6%209-5%2010l-1%202-1%206c0%206-4%208-8%206l-1-1c2%200%202%200%201-2l5%201%201-1-4-2c-4-1-7%200-5%203%200%202-5%204-11%206l-2%202c0%202-18%2010-23%2010h-5l-2%201-1-1c1-1-2-4-5-5s-3-1-4%201c0%202-1%201-6-4-5-6-6-6-10-6-6-1-6%201-3%209%202%203%203%204%203%202%200-3%201-2%201%202l2%204%201%203%201%202v-4c0-3%200-3%201-1l2%201%201%202c0%202%200%202%202%201l1-1c0%203%202%202%204-1%201-2%201-2%201%200h1v1l1%202c2%200%201-4-1-6l-1-2%202%201c1%201%201%201%201-1l1-2v3h1c1-2%202%202%202%205v1h10c0%202%204%201%205-1%201-1%201-1%201%201h2l1-1c0%202%2016%202%2016%200h1c1%203%203%202%204-1%200-2%200-2%201%200%201%201%201%201%201-1%200-4%202-4%202%201v4l1-4v-3l2%203c2%203%202%203%203%202h4v-2l1%202c1%202%201%200%201-8%200-5%200-5%201-3s2%202%202%201c1-1%201-1%200%200l2%203v-2c0-2%201-2%202%202%203%208%204%207%201-1-2-7-2-10%200-5l2%202%201%201h1c1-2%201-3-2-7l-2-4%202-2%202-5v-6c2%201%202%201%202-1v-1c1%202%202%202%202%201%201-1%201%200%201%201%200%202%200%202%201%201v-5c2%201%201-1%200-2-2-1-3-3-1-2l1-2c-1-3%201-3%202%200%201%202%201%202%202%201%201-3%200-5-1-3h-1c1-1%200-2-1-3-2-1-1-2%202-2%202%201%203%202%204%205l2%203%201%201v-11l1-2%201%204%201%208c1%202%201%203-2%205-5%202-5%205%200%206%202%200%203%200%202-2h2c0-2%200-2%201-1l1%201v-14c0-7%200-7%202-6%201%201%203%202%203%204l3%203%202%203c0%202%201%204%203%205%203%202%204%206%201%207v-2c0-2%200-3-3-2-3%200-3%201-1%201l2%201-1%201h-3l-1%201v-1l-1-1-2%203c0%202%200%202-1%200s-3-3-4-1l-4%201-2%201h-1c-1-2-8-1-9%201l-2%201-3%203c-3%204-3%204-1%207%203%205%204%206%204%201v-1l1%201c0-3%203%203%203%205%200%204-5%2010-6%207-1-1-1-1-1%201%201%201%200%202-2%203-2%202-1%202%2014%202l17-1h1c1%201%203%201%204-1s1-2%201%200c1%202%202%202%206%202l6-1h1l1-1%202-1h1c2-2%201-7%200-7v-1l-1-1h-2c-2-2-7-3-7-2h-2l-7-1-4%201%203-1c4-2%205-2%203-3v-3c1-3%203-2%202%202v2c2%200%204-3%203-4l1-1%201%201h1c1-2%201-2%202-1h1c0-1%200-2%201-1l1-1h1l1%201-1%201v2h1c0-2%200-2%201%200%201%203%202%203%201%200l1-2h3l-1-2c-1-1-1-3%201-3l1%201h2l2%201c1%201%201%200%201-1%200-2%200-2-1-1h-1c2-5-8-13-14-13-2%200-3%200-2-1l-1-2-3-2-4-3h-1v-1l2-1h1l-2-1-1-2%201-2%201%201c1%201%201%201%201-1l1-6v1l2%202c3-1%204%208%201%2010v3c2%201%202%201%202-1v-2l1%202%203%202h1l1%201h-1l-3%201%204%201h3c-1%201-1%201%201%201h1l1%202%201-1v-1l2%201-1%201%201%203%203%201%202%201c1%202%202%202%202%201h1c1%201%201%201%202-1%200-2%200-2%201-1h1c0-2%200-2%202%200%202%203%203%201%200-2v-2l-2-2v-2h3l1-1c-2-2%201-1%203%202l3%202-2-3c-2-3%200-3%203%200%205%203%205-1%201-4l-3-3%204%202%202%202-2-3-2-2%202%201c2%201%201%200-2-3l-3-4%202%201%201%201%201-1v-1c2-1-2-3-7-4-4-1-4-1%201-1%207%201%209%200%206-2l-1-1%203%201c2%203%202%200%200-4-2-3%201-3%204%201l1%202%202-2%201-3v-3h-2v-1l-5-2-6-2v-1c1-1%201-1-1-1h-2v-1l-5-1-4%201c-2%202-2%202-2-1%200-2%201-3%2010-1%206%202%208%201%208-3l1%201v3l1%202h5l2%201h2l-1-2c-2-2-3-5-1-3v-1l1-1c1%201%202%200%203-1h1l1-1-2-1v-1c0-2%200-2-1-1h-1c1-2-1-3-5-6-6-5-14-6-18-4h-4c-1-1-1-1%201-1l3-3h-2l-4%201-2%201h-3l-1-1c-5%200-5%200-3%201v1l-3-1%205-3%2010-5%204-3%201%203c1%203%205%204%209%202%204-1%204-3%201-2-2%200-2%200-1-1%202-1%202-1%201-2v-1l1-1h-2v-10l-1-1%201-3h1l1%201v10h4l5%201c1%202%201%202-2%202s-4%200-4%202l2%201v1c-3%202-2%203%201%202%201%200%202%200%201%201-4%201-1%203%203%203h5l-4%202-2%201%202%201c-1%201%200%201%202%201l4%201v1c-1%200-2%200-1%201l4%201h4l-3-1-3-1h3c1%200%202%200%201-1s-2-10%200-10l1%205%201%205%201-2-1-10v-8h-4l-4%201v-4c0-3%200-3%201-1s1%202%201-1l1-3v3c0%202%200%203%203%203%202%200%203%201%203%204%201%203%201%203%202%201l1-3v-3c-1%200-1-1%201-1h3v2l1-2c0-2-1-2-7-2-8%200-8-2%200-2%207%200%208-1%204-4-5-3-9-3-17-2h-8l-4-1c-4%200-7%203-7%206h2l-1%202-3%202c-1%202-2%202-3%202-3-1-2-2%201-2l1-4%201-3%201-1h-3c0-1%201-2%203-2%201-1%202-1%201-2l-1-2c0-2%200-2%201-1h1v-1c2%202%203%201%201-1-1-2-2-3-2-1-1%201-1%201-1-1%201-2-4-8-10-12-7-5-20-7-30-5m20%2060l-2%201c0%202-3%204-4%203-2%200-2%200-1%201%202%201%202%201-1%202l-1%201%202%201h-2v1c2%201%200%202-8%203-5%200-7%202-2%201%203%200%203%200%202%201-2%201-1%201%202%201h5v4c0%203%200%203-1%202l-2-4c-1-1-1%200-1%203%200%202%200%203-1%202v2l-1%204-1-4c0-3%200-3-1-1l-1%202-1%201%201%201h1l-2%201-1-5v-2l-1%2010c0%205%200%208%201%207l2-1v-3c-2%200-1-3%201-3l5-1c3-1%204%200%203%207l1%205v-1c0-2%202-4%203-2v3c2%200%205%203%205%204l-2%201h-2l-2%201c0%201-1%201%200%200l-2-1-3%201h2c1%200%202%202%200%204v1h1l1%201%201-2v-2h1c0%202%200%202%202%202l2-1-1-2c-1-1-1-1%201-1%203%201%203%201%203-1l1-3c1-3%201-8-2-8-2%201-6-7-6-17v-5c0%202%200%202%202-1%200-2%201-3%202-3l-1%203v17c1%201%201-1%201-6v-7c0-3%200-3%201-2v-1c0-3%200-3%201-2s1%201%201-1v-1h1c-1-1%200-3%201-4l2-2-4%202-2%201c1-1%201-1%200%200-3%201-2-3%201-6s3-4%200-2M15%20314l1%208%201-3c0-2%200-3%202-3%208%200%208-9%200-10h-4v8m128-6l2%206c2%208%202%208%204%208l2-6c2-7%202-7%204%200%201%207%203%208%205%202a3102%203102%200%2001-1-5c-1%206-2%206-4-3-1-6-3-5-5%203l-1%206-2-5-3-8-1%202m34%206v8h4c4%200%205-1%206-3%202-4%200-9-5-8-3%200-3-1-3-3l-1-2-1%208m-140-2c-2%201-2%206-1%208%202%203%207%202%209-1%203-6-4-12-8-7m13%200c-4%203-1%2011%204%2010%201-1%202%200%202%201s-3%202-5%201l-2%201h8l1-8v-6l-3-1c-3%200-4%201-5%202m162%206l1%208%201-2c0-2%201-3%203-3%205%201%207-4%205-8-1-2-2-3-6-3h-4v8m14%200l1%208%201-2c0-2%200-3%203-2%203%200%205-2%205-6s-2-6-7-6l-3%201v7'%20fill='%23fafafa'%20fill-rule='evenodd'/%3e%3c/svg%3e"},"regular":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsSAAALEgHS3X78AAADM0lEQVQ4y5WSXUzTVxiHz7+lUGkFrThrywC1EKFUojiEyYe4G5fUiUYUCDJQgeGUGKgRdHNxF02cuxE3P8LlvHFuOvwIGowIUiPSK7WYqEBgVflYZrIt8/LZ6V9KoALOi1/OOe8573PeL6HRKAghUBTlLQXskxW0azQa9RwWFoZWqw21T3UIhfwfhQTx9oNgBO8JCmr6h++CzPLu/VILRP+O0swc0WwNCjRkxghDL4KRBBToYsBmNBpxu938evEiZrN5tvLMnN7k1WKxkJyczPnzP3PkyDcUFRWRmJg40cRpuzz5N0VMBer1eux2O/X19Zw40URrayuFhYVTgBNzOBkUTDV0hBwOB8ePf09TUxNtbTc5evRbNjo3TpRkxpRDxyLo4HK5OHP6DKd+PMW9e93U1NTgdDoJj4iYDqiEgN5EGehk4Jyfn8/Jkz9w7Nh3XLjwC1euXCV7bTYFBQXodLrpgWK8ZkFIULZlNs79dI6GhkYuXfqNlpbL7N27j9TUVIqLSzCZTON+OgkPHwcqslbaN4C0NAd7vvwCW+JS6ur247nbRXPzWdpv36Kjo53y8jI2FXzGunW55EnFxcWiaARW62JZZzsiUslBJz5GK7LQiEwMmnzWrNhHXoaLLZ+61f3K5VVs3uCWtgPq3mGrwBztJFLJZY7IRi9l0OYRY9iASLLUkuU4TPryg2SkNJJmc2GPryXOVEXqkloyHQ3Em6qxJ9TiWLqfD+ZUyI+3SkgxUWKHVJmquXJvFKWI2Hk7WbuygZxVjeSkN7I+8yuyVhyUH9SRYT9A7upDfJTiIjf9MJ9kfc3qlHqSrHtIiKkkUmxTZRDb1dUoihCWqAoWzy0nRl/KIsPnE3tr9E4+nL9bqlJGu1velWGN2kX8gkqWLKwmdt4uzMYKFup3YAovYUFEKdFaCfT7x3j6ZAiv9yE99x/IkWjjTmc3ni4v167e5HLLDdX+8METfI+e0evrwyc10P9Cnp/S2dFN+y0PHo9XDnwnYnBoEL//dx4/7mVkZJixsVF17et7hq/Xx/XrrQwM9PP69b+8evUnf//zl9rxHu99hkdeMvbHKM+f+1X/Icn6DwvebGh8eNoPAAAAAElFTkSuQmCC","aspectRatio":1,"src":"/static/53920bf873a1ff67b3b19c0f6ad43482/3ddd4/pwacover.png","srcSet":"/static/53920bf873a1ff67b3b19c0f6ad43482/078a8/pwacover.png 163w,\n/static/53920bf873a1ff67b3b19c0f6ad43482/e56da/pwacover.png 327w,\n/static/53920bf873a1ff67b3b19c0f6ad43482/3ddd4/pwacover.png 653w,\n/static/53920bf873a1ff67b3b19c0f6ad43482/c5cc7/pwacover.png 980w,\n/static/53920bf873a1ff67b3b19c0f6ad43482/6050d/pwacover.png 1200w","srcWebp":"/static/53920bf873a1ff67b3b19c0f6ad43482/0acdf/pwacover.webp","srcSetWebp":"/static/53920bf873a1ff67b3b19c0f6ad43482/ac59e/pwacover.webp 163w,\n/static/53920bf873a1ff67b3b19c0f6ad43482/7660b/pwacover.webp 327w,\n/static/53920bf873a1ff67b3b19c0f6ad43482/0acdf/pwacover.webp 653w,\n/static/53920bf873a1ff67b3b19c0f6ad43482/75470/pwacover.webp 980w,\n/static/53920bf873a1ff67b3b19c0f6ad43482/9000d/pwacover.webp 1200w","sizes":"(max-width: 653px) 100vw, 653px","tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='400'%20viewBox='0%200%20400%20400'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%20180v181l28-1c25%200%2027%200%2029%202h5l5-1h48a140%20140%200%200128%200%20376%20376%200%200166%201c1-2%2011-2%2072-2a8952%208952%200%2001119%201l1-182V0h-45a244%20244%200%2000-47%201L154%200H0v180m230-54c-6%202-19%2013-15%2013v2c-2%204%200%203%202-1%202-3%203-4%207-4s5%200%204%201-1%201%201%201h1l1%202%201-1c-2-2%201-1%203%201l1%202%201%202%201-1c-2-2%200-1%203%201%202%202%203%203%202%204h2c1%209%203%2015%204%2013h1l1%201%201-1%202-2c3-2%204-2%204-1v1l1-2c-1%200%200-2%202-3s3-2%204-1l-1%201v2h-3v1c2-1%202%202%200%204v2l-1%201-1-2-5%201-6%201v6c-1%201-1%202%201%202%204%201%201%204-8%207-5%203-10%204-13%205-3%200-4%200-2-1%202%200%202%200-3-2-7-2-9%200-4%205l4%204%203%201c3%200%203%200%201-1s-2-1%202-1l8-2h7l-2%201h2l-2%201c-2%201-5%202-6%201-2%200-2%200-1%201s1%201-1%201h-3c-1%201%200%201%201%201l4%202c1%202%201%202-1%202l-4-2-6-2h-2l-1-1c0-3-1-3-5%200-3%203-3%203-1%204v4c-2%202-3%2011-1%2010%201-1%202%201%202%204l1%203v5l-1-3-1-2-1-1c0-2-2-1-3%200l-1%203v1l-1-2c-1-3-3-3-4%201l-5%205c-5%204-13%2011-13%2013l-2%201c-2%201-6%209-5%2010l-1%202-1%206c0%206-4%208-8%206l-1-1c2%200%202%200%201-2l5%201%201-1-4-2c-4-1-7%200-5%203%200%202-5%204-11%206l-2%202c0%202-18%2010-23%2010h-5l-2%201-1-1c1-1-2-4-5-5s-3-1-4%201c0%202-1%201-6-4-5-6-6-6-10-6-6-1-6%201-3%209%202%203%203%204%203%202%200-3%201-2%201%202l2%204%201%203%201%202v-4c0-3%200-3%201-1l2%201%201%202c0%202%200%202%202%201l1-1c0%203%202%202%204-1%201-2%201-2%201%200h1v1l1%202c2%200%201-4-1-6l-1-2%202%201c1%201%201%201%201-1l1-2v3h1c1-2%202%202%202%205v1h10c0%202%204%201%205-1%201-1%201-1%201%201h2l1-1c0%202%2016%202%2016%200h1c1%203%203%202%204-1%200-2%200-2%201%200%201%201%201%201%201-1%200-4%202-4%202%201v4l1-4v-3l2%203c2%203%202%203%203%202h4v-2l1%202c1%202%201%200%201-8%200-5%200-5%201-3s2%202%202%201c1-1%201-1%200%200l2%203v-2c0-2%201-2%202%202%203%208%204%207%201-1-2-7-2-10%200-5l2%202%201%201h1c1-2%201-3-2-7l-2-4%202-2%202-5v-6c2%201%202%201%202-1v-1c1%202%202%202%202%201%201-1%201%200%201%201%200%202%200%202%201%201v-5c2%201%201-1%200-2-2-1-3-3-1-2l1-2c-1-3%201-3%202%200%201%202%201%202%202%201%201-3%200-5-1-3h-1c1-1%200-2-1-3-2-1-1-2%202-2%202%201%203%202%204%205l2%203%201%201v-11l1-2%201%204%201%208c1%202%201%203-2%205-5%202-5%205%200%206%202%200%203%200%202-2h2c0-2%200-2%201-1l1%201v-14c0-7%200-7%202-6%201%201%203%202%203%204l3%203%202%203c0%202%201%204%203%205%203%202%204%206%201%207v-2c0-2%200-3-3-2-3%200-3%201-1%201l2%201-1%201h-3l-1%201v-1l-1-1-2%203c0%202%200%202-1%200s-3-3-4-1l-4%201-2%201h-1c-1-2-8-1-9%201l-2%201-3%203c-3%204-3%204-1%207%203%205%204%206%204%201v-1l1%201c0-3%203%203%203%205%200%204-5%2010-6%207-1-1-1-1-1%201%201%201%200%202-2%203-2%202-1%202%2014%202l17-1h1c1%201%203%201%204-1s1-2%201%200c1%202%202%202%206%202l6-1h1l1-1%202-1h1c2-2%201-7%200-7v-1l-1-1h-2c-2-2-7-3-7-2h-2l-7-1-4%201%203-1c4-2%205-2%203-3v-3c1-3%203-2%202%202v2c2%200%204-3%203-4l1-1%201%201h1c1-2%201-2%202-1h1c0-1%200-2%201-1l1-1h1l1%201-1%201v2h1c0-2%200-2%201%200%201%203%202%203%201%200l1-2h3l-1-2c-1-1-1-3%201-3l1%201h2l2%201c1%201%201%200%201-1%200-2%200-2-1-1h-1c2-5-8-13-14-13-2%200-3%200-2-1l-1-2-3-2-4-3h-1v-1l2-1h1l-2-1-1-2%201-2%201%201c1%201%201%201%201-1l1-6v1l2%202c3-1%204%208%201%2010v3c2%201%202%201%202-1v-2l1%202%203%202h1l1%201h-1l-3%201%204%201h3c-1%201-1%201%201%201h1l1%202%201-1v-1l2%201-1%201%201%203%203%201%202%201c1%202%202%202%202%201h1c1%201%201%201%202-1%200-2%200-2%201-1h1c0-2%200-2%202%200%202%203%203%201%200-2v-2l-2-2v-2h3l1-1c-2-2%201-1%203%202l3%202-2-3c-2-3%200-3%203%200%205%203%205-1%201-4l-3-3%204%202%202%202-2-3-2-2%202%201c2%201%201%200-2-3l-3-4%202%201%201%201%201-1v-1c2-1-2-3-7-4-4-1-4-1%201-1%207%201%209%200%206-2l-1-1%203%201c2%203%202%200%200-4-2-3%201-3%204%201l1%202%202-2%201-3v-3h-2v-1l-5-2-6-2v-1c1-1%201-1-1-1h-2v-1l-5-1-4%201c-2%202-2%202-2-1%200-2%201-3%2010-1%206%202%208%201%208-3l1%201v3l1%202h5l2%201h2l-1-2c-2-2-3-5-1-3v-1l1-1c1%201%202%200%203-1h1l1-1-2-1v-1c0-2%200-2-1-1h-1c1-2-1-3-5-6-6-5-14-6-18-4h-4c-1-1-1-1%201-1l3-3h-2l-4%201-2%201h-3l-1-1c-5%200-5%200-3%201v1l-3-1%205-3%2010-5%204-3%201%203c1%203%205%204%209%202%204-1%204-3%201-2-2%200-2%200-1-1%202-1%202-1%201-2v-1l1-1h-2v-10l-1-1%201-3h1l1%201v10h4l5%201c1%202%201%202-2%202s-4%200-4%202l2%201v1c-3%202-2%203%201%202%201%200%202%200%201%201-4%201-1%203%203%203h5l-4%202-2%201%202%201c-1%201%200%201%202%201l4%201v1c-1%200-2%200-1%201l4%201h4l-3-1-3-1h3c1%200%202%200%201-1s-2-10%200-10l1%205%201%205%201-2-1-10v-8h-4l-4%201v-4c0-3%200-3%201-1s1%202%201-1l1-3v3c0%202%200%203%203%203%202%200%203%201%203%204%201%203%201%203%202%201l1-3v-3c-1%200-1-1%201-1h3v2l1-2c0-2-1-2-7-2-8%200-8-2%200-2%207%200%208-1%204-4-5-3-9-3-17-2h-8l-4-1c-4%200-7%203-7%206h2l-1%202-3%202c-1%202-2%202-3%202-3-1-2-2%201-2l1-4%201-3%201-1h-3c0-1%201-2%203-2%201-1%202-1%201-2l-1-2c0-2%200-2%201-1h1v-1c2%202%203%201%201-1-1-2-2-3-2-1-1%201-1%201-1-1%201-2-4-8-10-12-7-5-20-7-30-5m20%2060l-2%201c0%202-3%204-4%203-2%200-2%200-1%201%202%201%202%201-1%202l-1%201%202%201h-2v1c2%201%200%202-8%203-5%200-7%202-2%201%203%200%203%200%202%201-2%201-1%201%202%201h5v4c0%203%200%203-1%202l-2-4c-1-1-1%200-1%203%200%202%200%203-1%202v2l-1%204-1-4c0-3%200-3-1-1l-1%202-1%201%201%201h1l-2%201-1-5v-2l-1%2010c0%205%200%208%201%207l2-1v-3c-2%200-1-3%201-3l5-1c3-1%204%200%203%207l1%205v-1c0-2%202-4%203-2v3c2%200%205%203%205%204l-2%201h-2l-2%201c0%201-1%201%200%200l-2-1-3%201h2c1%200%202%202%200%204v1h1l1%201%201-2v-2h1c0%202%200%202%202%202l2-1-1-2c-1-1-1-1%201-1%203%201%203%201%203-1l1-3c1-3%201-8-2-8-2%201-6-7-6-17v-5c0%202%200%202%202-1%200-2%201-3%202-3l-1%203v17c1%201%201-1%201-6v-7c0-3%200-3%201-2v-1c0-3%200-3%201-2s1%201%201-1v-1h1c-1-1%200-3%201-4l2-2-4%202-2%201c1-1%201-1%200%200-3%201-2-3%201-6s3-4%200-2M15%20314l1%208%201-3c0-2%200-3%202-3%208%200%208-9%200-10h-4v8m128-6l2%206c2%208%202%208%204%208l2-6c2-7%202-7%204%200%201%207%203%208%205%202a3102%203102%200%2001-1-5c-1%206-2%206-4-3-1-6-3-5-5%203l-1%206-2-5-3-8-1%202m34%206v8h4c4%200%205-1%206-3%202-4%200-9-5-8-3%200-3-1-3-3l-1-2-1%208m-140-2c-2%201-2%206-1%208%202%203%207%202%209-1%203-6-4-12-8-7m13%200c-4%203-1%2011%204%2010%201-1%202%200%202%201s-3%202-5%201l-2%201h8l1-8v-6l-3-1c-3%200-4%201-5%202m162%206l1%208%201-2c0-2%201-3%203-3%205%201%207-4%205-8-1-2-2-3-6-3h-4v8m14%200l1%208%201-2c0-2%200-3%203-2%203%200%205-2%205-6s-2-6-7-6l-3%201v7'%20fill='%23fafafa'%20fill-rule='evenodd'/%3e%3c/svg%3e"},"narrow":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsSAAALEgHS3X78AAADM0lEQVQ4y5WSXUzTVxiHz7+lUGkFrThrywC1EKFUojiEyYe4G5fUiUYUCDJQgeGUGKgRdHNxF02cuxE3P8LlvHFuOvwIGowIUiPSK7WYqEBgVflYZrIt8/LZ6V9KoALOi1/OOe8573PeL6HRKAghUBTlLQXskxW0azQa9RwWFoZWqw21T3UIhfwfhQTx9oNgBO8JCmr6h++CzPLu/VILRP+O0swc0WwNCjRkxghDL4KRBBToYsBmNBpxu938evEiZrN5tvLMnN7k1WKxkJyczPnzP3PkyDcUFRWRmJg40cRpuzz5N0VMBer1eux2O/X19Zw40URrayuFhYVTgBNzOBkUTDV0hBwOB8ePf09TUxNtbTc5evRbNjo3TpRkxpRDxyLo4HK5OHP6DKd+PMW9e93U1NTgdDoJj4iYDqiEgN5EGehk4Jyfn8/Jkz9w7Nh3XLjwC1euXCV7bTYFBQXodLrpgWK8ZkFIULZlNs79dI6GhkYuXfqNlpbL7N27j9TUVIqLSzCZTON+OgkPHwcqslbaN4C0NAd7vvwCW+JS6ur247nbRXPzWdpv36Kjo53y8jI2FXzGunW55EnFxcWiaARW62JZZzsiUslBJz5GK7LQiEwMmnzWrNhHXoaLLZ+61f3K5VVs3uCWtgPq3mGrwBztJFLJZY7IRi9l0OYRY9iASLLUkuU4TPryg2SkNJJmc2GPryXOVEXqkloyHQ3Em6qxJ9TiWLqfD+ZUyI+3SkgxUWKHVJmquXJvFKWI2Hk7WbuygZxVjeSkN7I+8yuyVhyUH9SRYT9A7upDfJTiIjf9MJ9kfc3qlHqSrHtIiKkkUmxTZRDb1dUoihCWqAoWzy0nRl/KIsPnE3tr9E4+nL9bqlJGu1velWGN2kX8gkqWLKwmdt4uzMYKFup3YAovYUFEKdFaCfT7x3j6ZAiv9yE99x/IkWjjTmc3ni4v167e5HLLDdX+8METfI+e0evrwyc10P9Cnp/S2dFN+y0PHo9XDnwnYnBoEL//dx4/7mVkZJixsVF17et7hq/Xx/XrrQwM9PP69b+8evUnf//zl9rxHu99hkdeMvbHKM+f+1X/Icn6DwvebGh8eNoPAAAAAElFTkSuQmCC","aspectRatio":1,"src":"/static/53920bf873a1ff67b3b19c0f6ad43482/502b1/pwacover.png","srcSet":"/static/53920bf873a1ff67b3b19c0f6ad43482/f2e6d/pwacover.png 114w,\n/static/53920bf873a1ff67b3b19c0f6ad43482/4ddba/pwacover.png 229w,\n/static/53920bf873a1ff67b3b19c0f6ad43482/502b1/pwacover.png 457w,\n/static/53920bf873a1ff67b3b19c0f6ad43482/7ddc2/pwacover.png 686w,\n/static/53920bf873a1ff67b3b19c0f6ad43482/435bf/pwacover.png 914w,\n/static/53920bf873a1ff67b3b19c0f6ad43482/6050d/pwacover.png 1200w","srcWebp":"/static/53920bf873a1ff67b3b19c0f6ad43482/15384/pwacover.webp","srcSetWebp":"/static/53920bf873a1ff67b3b19c0f6ad43482/31fce/pwacover.webp 114w,\n/static/53920bf873a1ff67b3b19c0f6ad43482/e3e25/pwacover.webp 229w,\n/static/53920bf873a1ff67b3b19c0f6ad43482/15384/pwacover.webp 457w,\n/static/53920bf873a1ff67b3b19c0f6ad43482/0258d/pwacover.webp 686w,\n/static/53920bf873a1ff67b3b19c0f6ad43482/64ea2/pwacover.webp 914w,\n/static/53920bf873a1ff67b3b19c0f6ad43482/9000d/pwacover.webp 1200w","sizes":"(max-width: 457px) 100vw, 457px","tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='400'%20viewBox='0%200%20400%20400'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%20180v181l28-1c25%200%2027%200%2029%202h5l5-1h48a140%20140%200%200128%200%20376%20376%200%200166%201c1-2%2011-2%2072-2a8952%208952%200%2001119%201l1-182V0h-45a244%20244%200%2000-47%201L154%200H0v180m230-54c-6%202-19%2013-15%2013v2c-2%204%200%203%202-1%202-3%203-4%207-4s5%200%204%201-1%201%201%201h1l1%202%201-1c-2-2%201-1%203%201l1%202%201%202%201-1c-2-2%200-1%203%201%202%202%203%203%202%204h2c1%209%203%2015%204%2013h1l1%201%201-1%202-2c3-2%204-2%204-1v1l1-2c-1%200%200-2%202-3s3-2%204-1l-1%201v2h-3v1c2-1%202%202%200%204v2l-1%201-1-2-5%201-6%201v6c-1%201-1%202%201%202%204%201%201%204-8%207-5%203-10%204-13%205-3%200-4%200-2-1%202%200%202%200-3-2-7-2-9%200-4%205l4%204%203%201c3%200%203%200%201-1s-2-1%202-1l8-2h7l-2%201h2l-2%201c-2%201-5%202-6%201-2%200-2%200-1%201s1%201-1%201h-3c-1%201%200%201%201%201l4%202c1%202%201%202-1%202l-4-2-6-2h-2l-1-1c0-3-1-3-5%200-3%203-3%203-1%204v4c-2%202-3%2011-1%2010%201-1%202%201%202%204l1%203v5l-1-3-1-2-1-1c0-2-2-1-3%200l-1%203v1l-1-2c-1-3-3-3-4%201l-5%205c-5%204-13%2011-13%2013l-2%201c-2%201-6%209-5%2010l-1%202-1%206c0%206-4%208-8%206l-1-1c2%200%202%200%201-2l5%201%201-1-4-2c-4-1-7%200-5%203%200%202-5%204-11%206l-2%202c0%202-18%2010-23%2010h-5l-2%201-1-1c1-1-2-4-5-5s-3-1-4%201c0%202-1%201-6-4-5-6-6-6-10-6-6-1-6%201-3%209%202%203%203%204%203%202%200-3%201-2%201%202l2%204%201%203%201%202v-4c0-3%200-3%201-1l2%201%201%202c0%202%200%202%202%201l1-1c0%203%202%202%204-1%201-2%201-2%201%200h1v1l1%202c2%200%201-4-1-6l-1-2%202%201c1%201%201%201%201-1l1-2v3h1c1-2%202%202%202%205v1h10c0%202%204%201%205-1%201-1%201-1%201%201h2l1-1c0%202%2016%202%2016%200h1c1%203%203%202%204-1%200-2%200-2%201%200%201%201%201%201%201-1%200-4%202-4%202%201v4l1-4v-3l2%203c2%203%202%203%203%202h4v-2l1%202c1%202%201%200%201-8%200-5%200-5%201-3s2%202%202%201c1-1%201-1%200%200l2%203v-2c0-2%201-2%202%202%203%208%204%207%201-1-2-7-2-10%200-5l2%202%201%201h1c1-2%201-3-2-7l-2-4%202-2%202-5v-6c2%201%202%201%202-1v-1c1%202%202%202%202%201%201-1%201%200%201%201%200%202%200%202%201%201v-5c2%201%201-1%200-2-2-1-3-3-1-2l1-2c-1-3%201-3%202%200%201%202%201%202%202%201%201-3%200-5-1-3h-1c1-1%200-2-1-3-2-1-1-2%202-2%202%201%203%202%204%205l2%203%201%201v-11l1-2%201%204%201%208c1%202%201%203-2%205-5%202-5%205%200%206%202%200%203%200%202-2h2c0-2%200-2%201-1l1%201v-14c0-7%200-7%202-6%201%201%203%202%203%204l3%203%202%203c0%202%201%204%203%205%203%202%204%206%201%207v-2c0-2%200-3-3-2-3%200-3%201-1%201l2%201-1%201h-3l-1%201v-1l-1-1-2%203c0%202%200%202-1%200s-3-3-4-1l-4%201-2%201h-1c-1-2-8-1-9%201l-2%201-3%203c-3%204-3%204-1%207%203%205%204%206%204%201v-1l1%201c0-3%203%203%203%205%200%204-5%2010-6%207-1-1-1-1-1%201%201%201%200%202-2%203-2%202-1%202%2014%202l17-1h1c1%201%203%201%204-1s1-2%201%200c1%202%202%202%206%202l6-1h1l1-1%202-1h1c2-2%201-7%200-7v-1l-1-1h-2c-2-2-7-3-7-2h-2l-7-1-4%201%203-1c4-2%205-2%203-3v-3c1-3%203-2%202%202v2c2%200%204-3%203-4l1-1%201%201h1c1-2%201-2%202-1h1c0-1%200-2%201-1l1-1h1l1%201-1%201v2h1c0-2%200-2%201%200%201%203%202%203%201%200l1-2h3l-1-2c-1-1-1-3%201-3l1%201h2l2%201c1%201%201%200%201-1%200-2%200-2-1-1h-1c2-5-8-13-14-13-2%200-3%200-2-1l-1-2-3-2-4-3h-1v-1l2-1h1l-2-1-1-2%201-2%201%201c1%201%201%201%201-1l1-6v1l2%202c3-1%204%208%201%2010v3c2%201%202%201%202-1v-2l1%202%203%202h1l1%201h-1l-3%201%204%201h3c-1%201-1%201%201%201h1l1%202%201-1v-1l2%201-1%201%201%203%203%201%202%201c1%202%202%202%202%201h1c1%201%201%201%202-1%200-2%200-2%201-1h1c0-2%200-2%202%200%202%203%203%201%200-2v-2l-2-2v-2h3l1-1c-2-2%201-1%203%202l3%202-2-3c-2-3%200-3%203%200%205%203%205-1%201-4l-3-3%204%202%202%202-2-3-2-2%202%201c2%201%201%200-2-3l-3-4%202%201%201%201%201-1v-1c2-1-2-3-7-4-4-1-4-1%201-1%207%201%209%200%206-2l-1-1%203%201c2%203%202%200%200-4-2-3%201-3%204%201l1%202%202-2%201-3v-3h-2v-1l-5-2-6-2v-1c1-1%201-1-1-1h-2v-1l-5-1-4%201c-2%202-2%202-2-1%200-2%201-3%2010-1%206%202%208%201%208-3l1%201v3l1%202h5l2%201h2l-1-2c-2-2-3-5-1-3v-1l1-1c1%201%202%200%203-1h1l1-1-2-1v-1c0-2%200-2-1-1h-1c1-2-1-3-5-6-6-5-14-6-18-4h-4c-1-1-1-1%201-1l3-3h-2l-4%201-2%201h-3l-1-1c-5%200-5%200-3%201v1l-3-1%205-3%2010-5%204-3%201%203c1%203%205%204%209%202%204-1%204-3%201-2-2%200-2%200-1-1%202-1%202-1%201-2v-1l1-1h-2v-10l-1-1%201-3h1l1%201v10h4l5%201c1%202%201%202-2%202s-4%200-4%202l2%201v1c-3%202-2%203%201%202%201%200%202%200%201%201-4%201-1%203%203%203h5l-4%202-2%201%202%201c-1%201%200%201%202%201l4%201v1c-1%200-2%200-1%201l4%201h4l-3-1-3-1h3c1%200%202%200%201-1s-2-10%200-10l1%205%201%205%201-2-1-10v-8h-4l-4%201v-4c0-3%200-3%201-1s1%202%201-1l1-3v3c0%202%200%203%203%203%202%200%203%201%203%204%201%203%201%203%202%201l1-3v-3c-1%200-1-1%201-1h3v2l1-2c0-2-1-2-7-2-8%200-8-2%200-2%207%200%208-1%204-4-5-3-9-3-17-2h-8l-4-1c-4%200-7%203-7%206h2l-1%202-3%202c-1%202-2%202-3%202-3-1-2-2%201-2l1-4%201-3%201-1h-3c0-1%201-2%203-2%201-1%202-1%201-2l-1-2c0-2%200-2%201-1h1v-1c2%202%203%201%201-1-1-2-2-3-2-1-1%201-1%201-1-1%201-2-4-8-10-12-7-5-20-7-30-5m20%2060l-2%201c0%202-3%204-4%203-2%200-2%200-1%201%202%201%202%201-1%202l-1%201%202%201h-2v1c2%201%200%202-8%203-5%200-7%202-2%201%203%200%203%200%202%201-2%201-1%201%202%201h5v4c0%203%200%203-1%202l-2-4c-1-1-1%200-1%203%200%202%200%203-1%202v2l-1%204-1-4c0-3%200-3-1-1l-1%202-1%201%201%201h1l-2%201-1-5v-2l-1%2010c0%205%200%208%201%207l2-1v-3c-2%200-1-3%201-3l5-1c3-1%204%200%203%207l1%205v-1c0-2%202-4%203-2v3c2%200%205%203%205%204l-2%201h-2l-2%201c0%201-1%201%200%200l-2-1-3%201h2c1%200%202%202%200%204v1h1l1%201%201-2v-2h1c0%202%200%202%202%202l2-1-1-2c-1-1-1-1%201-1%203%201%203%201%203-1l1-3c1-3%201-8-2-8-2%201-6-7-6-17v-5c0%202%200%202%202-1%200-2%201-3%202-3l-1%203v17c1%201%201-1%201-6v-7c0-3%200-3%201-2v-1c0-3%200-3%201-2s1%201%201-1v-1h1c-1-1%200-3%201-4l2-2-4%202-2%201c1-1%201-1%200%200-3%201-2-3%201-6s3-4%200-2M15%20314l1%208%201-3c0-2%200-3%202-3%208%200%208-9%200-10h-4v8m128-6l2%206c2%208%202%208%204%208l2-6c2-7%202-7%204%200%201%207%203%208%205%202a3102%203102%200%2001-1-5c-1%206-2%206-4-3-1-6-3-5-5%203l-1%206-2-5-3-8-1%202m34%206v8h4c4%200%205-1%206-3%202-4%200-9-5-8-3%200-3-1-3-3l-1-2-1%208m-140-2c-2%201-2%206-1%208%202%203%207%202%209-1%203-6-4-12-8-7m13%200c-4%203-1%2011%204%2010%201-1%202%200%202%201s-3%202-5%201l-2%201h8l1-8v-6l-3-1c-3%200-4%201-5%202m162%206l1%208%201-2c0-2%201-3%203-3%205%201%207-4%205-8-1-2-2-3-6-3h-4v8m14%200l1%208%201-2c0-2%200-3%203-2%203%200%205-2%205-6s-2-6-7-6l-3%201v7'%20fill='%23fafafa'%20fill-rule='evenodd'/%3e%3c/svg%3e"},"seo":{"src":"/static/53920bf873a1ff67b3b19c0f6ad43482/6050d/pwacover.png"}}}]}},"staticQueryHashes":["1609575157","2068910035","2361467917","2361467917","3838421970","500183989","5650841"]}