Caching Strategies for Performance in Progressive Web Apps

What is Caching?

Caching refers to the storage of data in a temporary storage area (cache) to reduce access times. It allows for faster retrieval of frequently accessed data, thus improving performance.

Types of Caching

• Browser Caching
• Service Worker Caching
• Application Cache (Deprecated)
• HTTP Caching

3.1 Cache First Strategy

This strategy prioritizes the cache over the network. If the requested resource is available in the cache, it is served from there; otherwise, it fetches the resource from the network.

self.addEventListener('fetch', (event) => {
    event.respondWith(
        caches.match(event.request)
            .then((response) => {
                return response || fetch(event.request);
            })
    );
});
            

3.2 Network First Strategy

This strategy tries to fetch data from the network first and falls back to the cache if the network request fails.

self.addEventListener('fetch', (event) => {
    event.respondWith(
        fetch(event.request)
            .catch(() => {
                return caches.match(event.request);
            })
    );
});
            

3.3 Stale While Revalidate

This strategy serves the cached response and simultaneously fetches the latest data from the network to update the cache.

self.addEventListener('fetch', (event) => {
    event.respondWith(
        caches.match(event.request)
            .then((cachedResponse) => {
                const fetchPromise = fetch(event.request).then((networkResponse) => {
                    caches.open('dynamic-cache').then((cache) => {
                        cache.put(event.request, networkResponse.clone());
                    });
                    return networkResponse;
                });
                return cachedResponse || fetchPromise;
            })
    );
});