Google Workbox – Preload vs Prefetch Audio

I wanted to preload audio for a page, I am using preload as oppose to prefetch. Many resources on the topic.

If you have Google Workbox running as well then note, you need to use crossorigin=anonymous even if same domain, to ensure caching if you using runtimeCaching as I am.

Links

https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content

https://developers.google.com/web/updates/2016/03/link-rel-preload

https://en.wikipedia.org/wiki/Link_prefetching

https://developers.google.com/web/fundamentals/media/fast-playback-with-video-preload#link_preload

This link explains the as=”audio”

Cache API

I also looked into this API thinking on componentDidMount I could load all the MP3s directly into cache, the issue is this is not supported by all browsers. Preload is not as well but it is more supported.

I may relook at this in the future, maybe it is a better solution.

https://alligator.io/js/cache-api/