/**
* Sugar & Fizz — Service Worker
* Served via page.sw.liquid so it lives on sugarandfizz.co (same origin).
* Strategy: Network-first — customers always get the latest version when online.
*
* DEPLOY STEPS
* 1. Shopify Admin → Online Store → Themes → Edit Code
* 2. Templates → "Add new template" → page → name: sw
* (creates page.sw.liquid — paste this file in)
* 3. Admin → Pages → Add page:
* Title: sw
* Handle: sw ← exact spelling
* Template: page.sw
* 4. Save → SW lives at sugarandfizz.co/pages/sw
*/
const CACHE_NAME = 'sf-v1';
const PRECACHE = ['/pages/order-page'];
// ─── Install ──────────────────────────────────────────────────────────────────
self.addEventListener('install', event => {
self.skipWaiting();
event.waitUntil(
caches.open(CACHE_NAME).then(cache => cache.addAll(PRECACHE))
);
});
// ─── Activate ─────────────────────────────────────────────────────────────────
self.addEventListener('activate', event => {
event.waitUntil(
Promise.all([
self.clients.claim(),
caches.keys().then(keys =>
Promise.all(
keys.filter(k => k !== CACHE_NAME).map(k => caches.delete(k))
)
)
])
);
});
// ─── Fetch — Network First ────────────────────────────────────────────────────
self.addEventListener('fetch', event => {
const { request } = event;
const url = new URL(request.url);
// Only handle same-origin GET requests
if (url.origin !== self.location.origin || request.method !== 'GET') return;
event.respondWith(networkFirst(request));
});
async function networkFirst(request) {
const cache = await caches.open(CACHE_NAME);
try {
const res = await fetch(request);
if (res.ok) cache.put(request, res.clone());
return res;
} catch {
const cached = await cache.match(request);
return cached || new Response(offlinePage(), {
headers: { 'Content-Type': 'text/html; charset=utf-8' }
});
}
}
// ─── Offline fallback ─────────────────────────────────────────────────────────
function offlinePage() {
return `
Sugar & Fizz
You're offline, babe.
Looks like you lost your connection. Come back online and we'll take your order.
`;
}