Offline PWA Caching for E-Commerce

{
  "name": "Aura Luxe Haute Horlogerie",
  "short_name": "Aura Luxe",
  "description": "High-performance handcrafted luxury timepieces and bespoke accessories.",
  "start_url": "/index.html?utm_source=pwa",
  "display": "standalone",
  "background_color": "#0a0a0c",
  "theme_color": "#0a0a0c",
  "orientation": "portrait-primary",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "categories": ["shopping", "lifestyle"],
  "shortcuts": [
    {
      "name": "View Timepieces",
      "url": "/catalog.html?category=timepieces",
      "icons": [{ "src": "/icons/shortcut-watch.png", "sizes": "96x96" }]
    },
    {
      "name": "Shopping Bag",
      "url": "/catalog.html?open=cart",
      "icons": [{ "src": "/icons/shortcut-cart.png", "sizes": "96x96" }]
    }
  ]
}

const CACHE_VERSION = 'aura-luxe-v1';
const STATIC_CACHE = `${CACHE_VERSION}-static`;
const DYNAMIC_CACHE = `${CACHE_VERSION}-dynamic`;

const STATIC_PRECACHE = [
  '/',
  '/index.html',
  '/catalog.html',
  '/checkout.html',
  '/offline.html',
  '/css/critical.css',
  '/js/store.js'
];

// 1. Install Event: Pre-cache Application Shell
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(STATIC_CACHE).then((cache) => {
      return cache.addAll(STATIC_PRECACHE);
    }).then(() => self.skipWaiting())
  );
});

// 2. Activate Event: Clean up legacy caches
self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then((keys) => {
      return Promise.all(
        keys.map((key) => {
          if (key !== STATIC_CACHE && key !== DYNAMIC_CACHE) {
            return caches.delete(key);
          }
        })
      );
    }).then(() => self.clients.claim())
  );
});

// 3. Fetch Event: Multi-tier routing strategies
self.addEventListener('fetch', (event) => {
  const { request } = event;
  const url = new URL(request.url);

  // Ignore cross-origin API and chrome extensions
  if (request.method !== 'GET' || !url.origin.includes(self.location.origin)) {
    return;
  }

  // Strategy A: HTML Navigation (Stale-While-Revalidate with Offline Fallback)
  if (request.mode === 'navigate') {
    event.respondWith(
      fetch(request)
        .then((networkResponse) => {
          const clone = networkResponse.clone();
          caches.open(DYNAMIC_CACHE).then((cache) => cache.put(request, clone));
          return networkResponse;
        })
        .catch(() => {
          return caches.match(request).then((cachedResponse) => {
            return cachedResponse || caches.match('/offline.html');
          });
        })
    );
    return;
  }

  // Strategy B: Static Assets & Media (Cache-First)
  event.respondWith(
    caches.match(request).then((cachedResponse) => {
      if (cachedResponse) return cachedResponse;

      return fetch(request).then((networkResponse) => {
        if (!networkResponse || networkResponse.status !== 200) {
          return networkResponse;
        }
        const clone = networkResponse.clone();
        caches.open(DYNAMIC_CACHE).then((cache) => cache.put(request, clone));
        return networkResponse;
      });
    })
  );
});

+---------------------------------------------------------------------------------------------------------+
| [STANDALONE PWA WINDOW - NO BROWSER CHROME]                                                             |
+---------------------------------------------------------------------------------------------------------+
|                                                                                                         |
|                                                  📡                                                     |
|                                       YOU'RE CURRENTLY OFFLINE                                          |
|                                                                                                         |
|       Your internet connection is temporarily unavailable. Previously viewed collections                |
|       and your shopping bag are saved locally.                                                          |
|                                                                                                         |
|                                    [ Check Connection & Retry ]                                         |
|                                                                                                         |
+---------------------------------------------------------------------------------------------------------+