Network-first with Fallback to Cache

Demonstrate how to implement a network-first strategy that falls back to the cache if the network request fails, ideal for applications where fresh data is a priority.
if ('caches' in window) {
  // This code will check for cache availability in the browser
First, we check if the Cache Storage API is available in the browser.
function fetchAndCache(request) {
  return fetch(request)
    .then(response => {
      if (!response.ok) {
        throw Error('Network response was not ok.');
      const responseToCache = response.clone();'my-cache').then(cache => {
        cache.put(request, responseToCache);
      return response;
    .catch(() => caches.match(request));
This function attempts a network request and caches the response. If the network request fails, it will try to retrieve the response from the cache.
self.addEventListener('fetch', event => {
    fetchAndCache(event.request).catch(() => {
      return caches.match(event.request).then(cachedResponse => {
        if (cachedResponse) {
          return cachedResponse;
        // Optional: Return a default fallback page for certain requests
        if (event.request.mode === 'navigate') {
          return caches.match('/offline.html');
This event listener intercepts fetch events, calls the fetchAndCache function, and handles cases where both the network and the cache fail. Optionally, it provides a fallback for navigation requests.