The Service Worker Lifecycle: Register, Install, Activate
A service worker is a background proxy that lets your app work offline. Its lifecycle—register, install, activate—governs how it takes control of pages. The biggest footgun: a new worker waits for old clients to close before activating, delaying updates.
Service Worker Registration: Claiming Your Control Scope
Registering a service worker is like assigning a security guard (your script) to a specific area (the scope) of your site for offline support. The footgun: by default, a worker can only control its own directory, not the whole site.
Web Workers: Keep Your UI Responsive During Heavy Tasks
A Web Worker is like a background helper, running heavy JavaScript tasks in a separate thread so your UI never freezes. Use it for complex calculations or data fetching. The main footgun: workers cannot directly manipulate the DOM.
The `popstate` Event: Handling Browser History Navigation
The `popstate` event lets your app react to browser back/forward clicks. It's key for SPAs to update views without a full reload. The main footgun: the event fires before the document is fully updated, so your handler might read a stale DOM.
Manipulate Browser History with pushState and replaceState
Make a single-page app feel like a multi-page site. `pushState` changes the URL without a full page reload, creating a new browser history entry. This is essential for SPAs to enable shareable links and a working back button.
Cache API: Manual Control Over Network Responses
The Cache API is a key-value store for network requests you control directly, unlike the browser's automatic HTTP cache. Use it in service workers for offline support or to pre-cache app assets.
IndexedDB Versioning: The 'upgradeneeded' Gatekeeper
IndexedDB uses a version number to manage schema changes. Incrementing the version in `indexedDB.open()` triggers a special `upgradeneeded` event, which is the only context where you can create or modify object stores and indexes.
IndexedDB Cursors: Iterate Large Datasets Efficiently
An IndexedDB cursor is a pointer for walking through records one by one, avoiding loading a whole dataset into memory. Use it to efficiently process large browser databases.
IndexedDB Indexes: Fast Queries in the Browser
An IndexedDB index is like a book's index, letting you quickly find records by a specific property without scanning the entire dataset. It's essential for fast queries on non-primary keys, like looking up a user by email.
Choosing the Right Client-Side Storage
Client-side storage turns the browser into a mini-database for faster loads and offline access. It's used for remembering user preferences or caching assets.
IndexedDB Transactions: The Gatekeepers of Data
An IndexedDB transaction is a short-lived container for all database operations, ensuring data integrity. Use it for any read or write. The main footgun: transactions auto-commit if idle, so you must queue all requests synchronously without waiting.
IndexedDB Object Stores: Your Browser's NoSQL Table
An IndexedDB Object Store is like a NoSQL table in your browser, holding JavaScript objects by key. Use it for offline data like to-do lists or cached API responses. The main footgun: you can only create stores during a database version upgrade.
IndexedDB: A NoSQL Database in Your Browser
Think of IndexedDB as a NoSQL database in the browser, built for large structured data that localStorage can't handle. It's ideal for offline apps or caching large assets. The footgun: browsers can evict your data, so it's not permanent storage.
Storing Objects in Web Storage: The JSON Step
Web Storage only stores strings. To save complex data like objects, you must first serialize them with `JSON.stringify()`. This is essential for persisting user settings or session info.
sessionStorage: Tab-Specific Browser Memory
sessionStorage is temporary browser memory isolated to a single tab. Use it to save state within a single user workflow, like form data. The footgun: unlike localStorage, this data is *not* shared between tabs, even for the same site.
localStorage: Your Browser's Persistent Key-Value Store
localStorage is a simple dictionary saved in the browser that persists after the tab closes. Use it to save user settings like a theme. The footgun: all values are strings, so numbers and booleans need manual conversion, like parsing 'true' back to a boolean.
Variadic Tuple Types: Type-Safe Spreads for Tuples
Variadic tuple types let you use spread syntax (`...`) inside tuple type definitions, just like you do with array values. This is crucial for typing functions that manipulate tuples, like `concat`, without writing endless overloads or losing type information.
TypeScript's Optional Chaining (`?.`)
Optional chaining (`?.`) lets you safely access nested properties without crashing on `null` or `undefined`. Use it to replace verbose `&&` checks when traversing deep objects. The footgun is that it only checks the value to its left, not the entire chain.
Stream a Fetch Response Chunk by Chunk
Process a fetch response as it arrives, chunk by chunk, instead of buffering the whole file in memory. This is ideal for large files like videos or giant JSON datasets.
The Fetch API's Request Object
The Fetch API's Request object is a blueprint for an HTTP call, bundling URL, method, headers, and body. It's key for intercepting traffic in service workers or building reusable fetches. The main footgun: its body is a stream that can only be read once.