I'm caching 900 items in my PWA. Is there a better way for offline capability?

Question

I have a PWA with static content that must be 100% available offline. There are 400 HTML pages, and 450 PNG content images and the usual site assets. The total cache size is 21mb and content rarely changes, if ever. My service worker looks like this:

const all_assets = [...nnc, ...nc, ...checklist_content, ...info, ...fonts, ...other]

var cacheName = "ecl-cache-005"
self.addEventListener('install', function (event) {

    event.waitUntil((async () => {
        const cache = await caches.open(cacheName);
        await cache.addAll(all_assets);
    })());
});

self.addEventListener('activate', (e) => {
  e.waitUntil(caches.keys().then((keyList) => {
    return Promise.all(keyList.map((key) => {
      if (key === cacheName) { return; }
      return caches.delete(key);
    }))
  }));
});

self.addEventListener('fetch', function (event) {
    event.respondWith(
        // Try the cache
        caches.match(event.request).then(function (response) {
            // return it if there is a response,or else fetch again
            return response || fetch(event.request);
        })
    );
});

The app works as intended; however, the install event is very slow, I assume due to the enourmous URL request size in the service worker or the 19mb of images, or both. Is there a better way? Can I cache the images in a separate event after the install?

I've looked into Firestore and IndexedDB options, but they seem not to be compatible with image contents.