Progressive Web Apps: Caching Strategies
Tags: javascript, pwa, serviceworkers, caching
Published: 2019-07-07 20:24:20

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](https://developers.google.com/web/ilt/pwa/)

## 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.
```javascript
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).
```javascript
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.
```javascript
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.
```javascript
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.
```javascript
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...](https://developers.google.com/web/ilt/pwa/caching-files-with-service-worker)

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](https://predictsky.com)
{% twitter 1147447525630205952%}
2. A currency converter [Currency Converter](https://steelze.github.io/currency-converter/)
{% twitter 1142321922853785603%}