Progressive Web Apps: Caching Strategies

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

   

   Fake Ilaje boy😒

   @mr_steelze

   

   Another simple Progressive Web App😌
   A simple weather forecast app predictsky.com
   Built with plain javascript, weather data from @DarkSkyApp hosted on @Netlify.
   I'll appreciate feedback on this, retweets and star this project on @github
   Repo: github.com/Steelze/weathe…
   🥰❤️

   10:09 AM - 06 Jul 2019

   

2. A currency converter Currency Converter

   

   Fake Ilaje boy😒

   @mr_steelze

   

   Morning everyone. So I decided to redo the ALC 3.0 Progressive Web APP project and I'll appreciate feedbacks.
   
   ProjectUrl: steelze.github.io/currency-conve…
   GithubRepo: github.com/Steelze/curren…

   06:42 AM - 22 Jun 2019