loading...
Cover image for Progressive Web Apps: Caching Strategies

Progressive Web Apps: Caching Strategies

mr_steelze profile image Sholley O. Updated on ・3 min read

The past few weeks, I have been doing some brushing up on progressive web apps and got to understand some concepts better especially caching strategies. So this is me writing about what I learnt.

P.S: I'm not a good writer :) and this doesn't cover the basics of PWAs

What's a Progressive Web App

Progressive Web Apps(PWAs) are normal web applications which can feel like native mobile applications to the user.

To understand more about PWAs Check out this page

Caching Strategies

Building PWAs you'll be doing some caching. It could be assets(css, js, icons, images), responses or even a fallback offline page. So choosing strategies that work best for your application is very important. Common caching strategies are:

* Cache Only

The Cache only strategy returns a resource from the cache without ever going to the network. If it doesn't exist in the cache, it fails and nothing happens because at no point are we trying to get that resource over the network. This strategy is useful for serving assets pre-cached during the installation of a service worker.

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

* Network Only

The Network only strategy goes to the network to get a resource. It's never stored in the cache or looked for in the cache. This strategy is useful if stale or cached version is unacceptable (For data that must be always upto date).

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

* Cache First

The cache first strategy tries to get a resource from the cache first. If it's not found, we go to the network and cache the response for subsequent requests. If the resource is found in the cache we return it and no request is made over the network. This strategy is useful for caching assets on the fly and repetitive requests for the same asset is immediately returned from the cache.

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

* Network First

The network first strategy always tries to get the resource over the network first. If the request fails, we go to the cache and check for the resource. If the request is successfull we cache and return the response. This strategy is useful for resources that always need to be fresh.

self.addEventListener('fetch', event => {
 event.respondWith(
   fetch(event.request).then(response => {
     cache.put(event.request, response.clone());
     return response;
   }).catch(_ => {
     return caches.match(event.request);
   });
 );
});

* Stale while revalidate

The stale while revalidate always serves a resource from the cache and then a corresponding request is made over the network and then cached.

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

So What Next?

There we have it. The above are common strategies you will find yourself using most times. To read more about caching strategies Read More...

Below are two basic PWAs I built, will really appreciate feedbacks, likes, retweets or stars. Also, will love feedbacks on this writeup. Thanks :)

  1. A basic weather forecast app Predict Sky
  2. A currency converter Currency Converter

Discussion

pic
Editor guide
Collapse
logeekal profile image
Jatin Kathuria

Thank you...very interesting and I used to wonder why Dev.to website acts like an app. I was thinking that it is an Android Instant App but I guess it is a PWA.

Cheers.
Keep sharing.

Collapse
mr_steelze profile image
Sholley O. Author

Thanks, Jatin. This really means a lot.

Collapse
swyx profile image
shawn swyx wang 🇸🇬

great and short post! i like it!