KeepItGoingServer/templates/sw.js

{% load static %}const CACHE_NAME = 'keepitgoing-shell-v1';
const OFFLINE_URL = '{% url "offline" %}';

const PRECACHE_URLS = [
    "{% static 'css/app.css' %}",
    "{% static 'js/app.js' %}",
    "{% static 'favicons/favicon.svg' %}",
    "{% static 'favicons/icon-192.png' %}",
    "{% static 'favicons/icon-512.png' %}",
    "{% static 'favicons/icon-512-maskable.png' %}",
    "{% static 'favicons/apple-touch-icon-180.png' %}",
    OFFLINE_URL,
];

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

self.addEventListener('activate', (event) => {
    event.waitUntil(
        caches.keys().then((keys) =>
            Promise.all(keys.filter((key) => key !== CACHE_NAME).map((key) => caches.delete(key)))
        )
    );
    self.clients.claim();
});

self.addEventListener('fetch', (event) => {
    const request = event.request;

    // Navigations: try the network first, fall back to the offline page.
    if (request.mode === 'navigate') {
        event.respondWith(
            fetch(request).catch(() => caches.match(OFFLINE_URL))
        );
        return;
    }

    // Precached shell assets: serve from cache first.
    const path = new URL(request.url).pathname;
    if (PRECACHE_URLS.includes(path)) {
        event.respondWith(
            caches.match(request).then((cached) => cached || fetch(request))
        );
    }
});

self.addEventListener('push', (event) => {
    const data = event.data ? event.data.json() : {};
    event.waitUntil(
        self.registration.showNotification(data.title || 'KeepItGoing', {
            body: data.body || '',
            icon: '{% static "favicons/icon-192.png" %}',
            badge: '{% static "favicons/icon-192.png" %}',
            data: { url: data.url || '/' },
        })
    );
});

self.addEventListener('notificationclick', (event) => {
    event.notification.close();
    event.waitUntil(clients.openWindow(event.notification.data.url || '/'));
});