Search⌘ K
AI Features
Home
Courses
Optimize your web projects with Progressive Web Apps

More Advanced Caching Strategies

Understand advanced caching strategies used in Progressive Web Apps to balance speed and data freshness. Learn when to apply cache falling back to network, network falling back to cache, stale-while-revalidate, and cache and network race methods to optimize user experience and resource delivery.

We'll cover the following...

In this lesson, the first two strategies we analyze are variations of the ones seen in the previous lesson but allow some more flexibility.



Cache falling back to network



The goal is to optimize response time.

If a resource is available in the cache, this version is delivered. Otherwise, a network request is triggered to fetch and then cache it.

This strategy is adapted for resources that do not often change, like the user profile images. In these cases, we want to provide the user with the fastest response without worrying about potentially delivering obsolete data.

JavaScript (JSX)
self.addEventListener('fetch', (event) => {

  event.respondWith(

    caches.match(event.request)

      .then((response) => {

        // The responce is in the cache, if not fetch it from the network

         return response || fetch(event.request);

      }

    )

  );

});

x


Network falling back to cache


...