Issue with Network first, then Cache

[Sdaud1950]

While using the SuperPwa with Network first, then Cache, there is an error shown sometimes. Ref screenshot. https://prnt.sc/zxcjYLfdEjnU

Ref Ticket .https://magazine3.in/conversation/59013?folder_id=29

Ref code solution. https://developer.chrome.com/docs/workbox/caching-strategies-overview/#network-first-falling-back-to-cache https://prnt.sc/pfBPzSTzIeXB

[dwise85]

For example, if there is a slow network, spotty network, server outage, etc. These various error states should cause fetch() API to throw an error. As seen in the references Google caching strategies the appropriate mitigation for those errors for a PWA is to catch the error and serve from the Cache as so:

return fetch(event.request.url).then((fetchedResponse) => {
  ...
}).catch(() => {
  // If the network is unavailable, get
  return cache.match(event.request.url);
});

This would be a slight adjustment to the existing logic of Super PWA from:

            if ( (e.request.mode === 'navigate' || e.request.mode === 'cors') && navigator.onLine ) {
                e.respondWith(
                    fetch(e.request).then(function(response) {
                        return caches.open(cacheName).then(function(cache) {
                            cache.put(e.request, response.clone());
                            return response;
                        });  
                    })
                );
                return;
            }

to

            if ( (e.request.mode === 'navigate' || e.request.mode === 'cors') && navigator.onLine ) {
                e.respondWith(
                    fetch(e.request).then(function(response) {
                        return caches.open(cacheName).then(function(cache) {
                            cache.put(e.request, response.clone());
                            return response;
                        });  
                    }).catch(() => {
                                          // If the network is unavailable, get
                                          return cache.match(event.request.url);
                                        });
                );
                return;
            }

[akshaywali]

update pushed in 2.2.12