The Types of Caching

In applications, there are generally two types of content:

• Static assets: These include HTML pages, stylesheets, JS scripts, images, and fonts. Requests for these assets are made automatically by the browser to render our app.
• Dynamic content: This is what we fetch ourselves by making requests to APIs. This is the content that puts life into the static assets. Mainly, this is the data created or consumed by the app users.

App shell

An app shell is the app’s core static part that doesn’t change so often. It is the skeleton of a web application—for example, HTML pages like the index page, the about page, and the contact page. Specific HTML components like navbars, footer, menus, forms, etc., can also be considered part of an app shell.

The other static assets are required for the functionality of the index and other static pages. For example, assets like app.css, and app.js that we import mainly in our index.html file and other static pages. These assets might change frequently but not every second. Also, these are not any user-created content.

Note: Dynamic content is not included in the app shell.

Types of Caching

There are three types of caching techniques based on what and when we’re caching:

• Pre-caching or static caching
• Dynamic caching
• Cache on demand

Pre-caching or static caching

In this caching, we pre-cache the app shell or static assets in the install event of the service worker to at least open our app offline. By caching the app shell, we can show the home page and other static pages (like about and contact) to the users.

For the functionality that requires an internet connection or content that is not cached, we can provide a custom fallback message to the user that the internet is necessary to access those things.

Dynamic caching

By pre-caching the static content (the app shell), our app will load offline, but to make the app usable to some extent, we need to cache the dynamic content. For example, we can enhance the user experience in the offline mode by caching and showing articles that the users read online.

Therefore, dynamic caching helps us in the following ways:

• It prevents from caching everything.
• It only caches the assets that are requested by user likes, posts, and images.

Dynamic caching is implemented in the service worker’s fetch event while the request is made.

Cache on demand

In this caching, we provide the user with a “Download” or “Save” button to cache the content for offline use. Here the users themselves choose the content according to their offline preferences. In this caching, we use the Cache API in the main JavaScript thread’s context.