A Caching Method in PWA - progressive-web-apps

Question

const cacheName = "the-cache-version-1";
self.addEventListener('install', (e) => {
console.log('[Service Worker] Install');
e.waitUntil((async () => {
//~ const cache = await caches.open(cacheName);
//~ console.log('[Service Worker] Caching all: app shell and content');
//~ await cache.addAll(contentToCache);
})());
});
self.addEventListener('fetch', (e) => {
e.respondWith((async () => {
const r = await caches.match(e.request);
console.log(`[Service Worker] Fetched resource ${e.request.url}`);
if (r) { return r; }
const response = await fetch(e.request);
const cache = await caches.open(cacheName);
console.log(`[Service Worker] Caching new resource: ${e.request.url}`);
cache.put(e.request, response.clone());
return response;
})());
});
Dear PWA Practitioners,
I'm learning PWA, at the caching part currently.
What is the purpose of defining cache items in install, where they can be done inside the fetch event as sampled in the above code?
It even looked more efficient because it only caches what's needed (I'm reading samples where - for example - all different sizes of icons are cached in the install part).
Thank you for the enlightenment!