Implement offline caching using Service Worker in portfolio app

Components

This proposal involves the Service Worker part of the application (that needs to be implemented).

Proposal

I propose adding a Service Worker to the portfolio application. Among other things, it will allow us to add caching feature in the application. In that way, it will drastically reduce page load times for users that visit the website for the second time or later. Also, now users will actually be able to use the application when offline.

Mockups / Examples

To implement this, we will need to add an sw.js file at the root of the website folder. Implementation of sw.js will mostly follow the tutorial given in this Google Lab - Caching Files with Service Worker.

The resource serving flow of the application would then look as follows -

Benefits

Once implemented, this will make the portfolio app load quicker. Also, the app would work even in conditions with weak or no network connection. This will also be a step in the direction of implementing the Progressive Web App standard that is a necessity in modern web development.