Code: Select all
// Service Worker
const cacheName = "paul-address";
const filesToCache = [
"/test/",
"/test/index.html",
"/test/js/index.js",
"/test/styles/styles.css"
];
self.addEventListener("install", e => {
console.log("[ServiceWorker**] Install");
e.waitUntil(
caches.open(cacheName).then(cache => {
console.log("[ServiceWorker**] Caching app shell");
return cache.addAll(filesToCache);
})
);
});
self.addEventListener("activate", event => {
caches.keys().then(keyList => {
return Promise.all(
keyList.map(key => {
if (key !== cacheName) {
console.log("[ServiceWorker] - Removing old cache", key);
return caches.delete(key);
}
})
);
});
});
// sw.js - Cache-first strategy for static assets
self.addEventListener('fetch', event => {
// Only handle GET requests
if (event.request.method !== 'GET') return;
const url = new URL(event.request.url);
// Cache-first for static assets
if (url.pathname.match(/\.(css|js|png|jpg|jpeg|gif|svg|ico)$/)) {
event.respondWith(
caches.match(event.request)
.then(response => {
if (response) {
console.log('Serving from cache:', event.request.url);
return response;
}
// Fetch and cache new resources
return fetch(event.request)
.then(response => {
// Don't cache non-successful responses
if (!response || response.status !== 200 || response.type !== 'basic') {
return response;
}
const responseToCache = response.clone();
caches.open(CACHE_NAME)
.then(cache => {
cache.put(event.request, responseToCache);
});
return response;
});
})
.catch(() => {
// Return fallback for images
if (event.request.destination === 'image') {
return caches.match('/images/fallback.png');
}
})
);
}
});