IPFS-portal-deploy/public/sw.js

/* ── IPFS Portal — Service Worker v2 ──
 *
 * Cache strategieën per route type:
 *   - Precache: app shell (alle pages)
 *   - Cache-first: static assets (fonts, images, CSS, JS)
 *   - Network-first: API calls (/_next/data, /api/*)
 *   - Stale-while-revalidate: navigatie requests
 */

const CACHE = 'ipfs-portal-v2';
const STATIC_CACHE = 'ipfs-portal-static-v2';
const DATA_CACHE = 'ipfs-portal-data-v2';

const PRECACHE_URLS = [
  '/',
  '/dashboard',
  '/upload',
  '/explorer',
  '/pins',
  '/history',
  '/usage',
  '/peers',
  '/users',
  '/ipns',
  '/login',
  '/settings',
  '/profile',
];

/* ── Install: precache app shell ── */

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

/* ── Activate: clean old caches ── */

self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then((keys) =>
      Promise.all(
        keys
          .filter((k) => k !== CACHE && k !== STATIC_CACHE && k !== DATA_CACHE)
          .map((k) => caches.delete(k))
      )
    )
  );
  self.clients.claim();
});

/* ── Helper: is this a navigation request? ── */

function isNavigation(req) {
  return req.mode === 'navigate';
}

function isStaticAsset(url) {
  return /\.(png|jpg|jpeg|gif|svg|webp|ico|woff2?|ttf|eot|css|js|json)$/i.test(url.pathname);
}

function isAPIRequest(url) {
  return url.pathname.startsWith('/api/') || url.pathname.startsWith('/_next/data/');
}

/* ── Fetch handler ── */

self.addEventListener('fetch', (event) => {
  const { request } = event;
  const url = new URL(request.url);

  // Same-origin only
  if (url.origin !== self.location.origin) return;

  // 1. Static assets → cache-first
  if (isStaticAsset(url)) {
    event.respondWith(cacheFirst(request, STATIC_CACHE));
    return;
  }

  // 2. API / Next.js data → network-first
  if (isAPIRequest(url)) {
    event.respondWith(networkFirst(request, DATA_CACHE));
    return;
  }

  // 3. Navigation → stale-while-revalidate
  if (isNavigation(request)) {
    event.respondWith(staleWhileRevalidate(request, CACHE));
    return;
  }

  // 4. All other requests → network-first with cache fallback
  event.respondWith(networkFirst(request, CACHE));
});

/* ── Cache strategies ── */

async function cacheFirst(request, cacheName) {
  const cached = await caches.match(request);
  if (cached) return cached;
  try {
    const response = await fetch(request);
    if (response.ok) {
      const cache = await caches.open(cacheName);
      cache.put(request, response.clone());
    }
    return response;
  } catch {
    return new Response('Offline', { status: 503 });
  }
}

async function networkFirst(request, cacheName) {
  try {
    const response = await fetch(request);
    if (response.ok) {
      const cache = await caches.open(cacheName);
      cache.put(request, response.clone());
    }
    return response;
  } catch {
    const cached = await caches.match(request);
    if (cached) return cached;
    return new Response('Offline', { status: 503 });
  }
}

async function staleWhileRevalidate(request, cacheName) {
  const cache = await caches.open(cacheName);
  const cached = await cache.match(request);

  const fetchPromise = fetch(request)
    .then((response) => {
      if (response.ok) cache.put(request, response.clone());
      return response;
    })
    .catch(() => cached);

  return cached || fetchPromise;
}