5 Service Worker Caching Strategies for Your Next PWA App

There are ways or strategies we can use in Service Workers to respond to “fetch” events. These strategies determine how the Service worker will resp

ond with a response to a fetch event based on the type of event request.

This strategy checks for the response in the cache. If it is available it is delivered, and the cache is revalidated. If it is not available, the service worker fetches the response from the network and caches it.

Let’s look at some code:

self.addEventListener('fetch', function (event) {
event.respondWith(
caches.open(cacheName)
.then(function(cache) {
cache.match(event.request)
.then( function(cacheResponse) {
fetch(event.request)
.then(function(networkResponse) {
cache.put(event.request, networkResponse)
})
return cacheResponse || networkResponse
})
})
)
});

On a fetch event, the SW checks if the event request is already in the cache by doing cache.match(event.request). It resolves to a Response object cacheResponse this is the cached response to the event.request, then, we perform a new fetch request and put it in the cache, then we return the cacheResponse or the networkResponse if the network request is successful.

PWAs use this strategy on high-priority, high-critical files. Also, non-GET requests like POST requests. POST requests responses are not cached because they mutate the datastore every time they are let out. So the responses are different every time.

This strategy will look for a response in the cache first, if any response is found previously cached, it will return and serve the cache. If not it will fetch the response from the network, serve it, and cache it for next time.

self.addEventListener('fetch', function (event) {
event.respondWith(
caches.open(cacheName)
.then(function(cache) {
cache.match(event.request)
.then( function(cacheResponse) {
if(cacheResponse)
return cacheResponse
else
return fetch(event.request)
.then(function(networkResponse) {
cache.put(event.request, networkResponse.clone())
return networkResponse
})
})
})
)
});

The priority in the strategy is to look inside the cache first. If there is something there, it serves it without bothering to get it from the network for revalidation just like the Stale-While-Revalidate does. This strategy only uses the network if no response is found cached, it fetches the response from the network and then caches it.

PWAs use this strategy on assets like images, videos, CSS, etc, files that are non-critical to the web app.

The opposite of Cache first.

This strategy will try to fetch the response from the network. If it succeeds, it will cache the response and return the response. If the network fails, it will fall back to the cache and serve the response there.

self.addEventListener(’fetch’, function (event) {
event.respondWith(
fetch(event.request).catch(function() {
return caches.match(event.request)
})
)
})

PWAs mostly use this strategy for requests that are updating frequently, especially POST requests. Online users get the most up-to-date content while offline users get the cached version. This is good so that the users will have something on their screen served to them while waiting for the network. It is better than having a network error report.

This strategy responds from the cache only. It does not fall back to the network.

self.addEventListener('fetch', function (event) {
event.respondWith(
caches.open(cacheName).then(function(cache) {
cache.match(event.request).then(function(cacheResponse) {
return cacheResponse;
})
})
)
})

No network to fall back to, nothing. It serves the response from the cache ONLY.

This strategy is used on assets that will never change once it is cached the first time. For example, the PWA logo image can never change so it is cached once and served solely from the cache. There is little to no chance that it will ever change.

This strategy solely uses the network to fetch and serve the response. It does not fallback to any cache.

self.addEventListener('fetch', function (event) {
event.respondWith(
fetch(event.request).then(function(networkResponse) {
return networkResponse
})
)
})

Unlike Cache Only, this strategy is used on assets and files that constantly change.

We have learned some cool caching Service worker caching strategies, we also learned how they work with some cool images and examples. And also, we learned when and where to use the caching strategy which is very vital.

If you have any questions regarding this or anything I should add, correct or remove, feel free to comment, email, or DM me.

Thanks!!!

Author: admin

Leave a Reply

Your email address will not be published.