Option to fetch and cache as user navigates the app

[ferretwithaberet]

Introduction
I am quite new to configuring workbox, and this might already be possible by making a custom service worker but this may be useful for other projects too and it would be nice to be easily configurable. Keep in mind that my knowledge of service workers is limited and a lot of stuff I will mention will only be my assumptions of how they work based on what I saw while trying to configure Vite PWA for my project.

Problem
My app size is ~40MB, I do not want to force mobile users to first download the whole app using precaching to be able to use it, rather I want them to navigate the app and cache the parts of the app that they use. So, instead of a single long wait, I want the first time they "discover" the app to be slow, but then the performance improves because the files were cached the first time the user visited the pages.

Solution

1. Service worker keeps a list of all the existing asset names (similar to the precache manifest).
2. When a request for an asset in the above list is made, the cache is checked and if the file is not in the cache, the request goes through and the response gets cached.
3. When a new service worker version (with a new list of assets) is pushed, during the install of the new service worker, the new service worker will check all the entries in the cache, if they are not in the new asset list, then they get removed so they can get refetched the next time the user goes to the page that uses said assets.

Additional notes
I am sorry if this is already possible or if this was already requested, I did not find anything related and nor do I have enough experience or enough knowledge of the glossary around service workers to know how to properly search for duplicate issues.