In this page we intend to explain the general architecture of the project so that we can understand how the pieces fit together.

Main objectives of the architecture are:


Components of the architecture

Current architecture is composed of two pieces to accomplish the first two bullets on the previous list.

Now that we understand the components, let's move in to understanding how they interact in different scenarios and what goes on at a high level.

First visit to a page

A user in a browser visits for the first time a page served by this architecture.

First visit flow diagram

If the browser client is capable enough, we'll serve the JavaScript assets that will allow it to become a web app, so that navigation and caching happen in the client and you don't have to reload the full page every time you click a link.

If the browser is service-worker capable, it is initialized, and it will intercept network requests and cache them.

More concretely:

This will mean that from that point on you are able to open the site without internet connection and it will work.

Second (and rest of) visit(s) to the page

A user in a browser visits the page again (directly or from other referrer like google).

Second visit flow diagram

The user will see immediatly the chrome of the website, and the content will appear either instantly if it was already on the cache, or requested to the API.

This means the only request to the server is for the API, all the static assets are cached in the client, and the user gets something on the screen instantly.

In the background, a check for the service worker will be made and if there is any difference a new version of the app will be downloaded in the background.