Assets & Data Management

Static Assets

Static assets include HTML, CSS, JavaScript, images, fonts, and other files that don't change frequently. These are prime candidates for caching.

// sw.js - Cache static assets on install
const CACHE_NAME = 'v1';
const STATIC_ASSETS = [
  '/',
  '/index.html',
  '/css/styles.css',
  '/js/app.js',
  '/images/logo.svg',
  '/fonts/inter.woff2',
  '/offline.html'
];

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(STATIC_ASSETS))
      .then(() => self.skipWaiting())
  );
});

Data Management

Client-side Storage Options

Storage	Use Case	Limit
localStorage	Simple key-value, small data	~5MB
Cache API	Network requests, responses	Disk quota
IndexedDB	Structured data, large datasets	Disk quota

Optimization

Image optimization: Use WebP/AVIF, lazy loading, responsive images
Font optimization: Subset fonts, use woff2, font-display: swap
Code splitting: Load only what's needed
Tree shaking: Remove unused code
Minification: Minify HTML, CSS, and JS

<!-- Responsive images with WebP fallback -->
<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Description" loading="lazy">
</picture>

<!-- Font display optimization -->
<style>
  @font-face {
    font-family: 'CustomFont';
    src: url('/fonts/custom.woff2') format('woff2');
    font-display: swap; /* Show fallback font immediately */
  }
</style>

Exercise: Audit the assets of a simple web page using Chrome DevTools' Coverage tab. Identify unused CSS and JavaScript, then create a Service Worker that precaches only the critical assets needed for the first meaningful paint.