I created a fun progressive web app to play video tracks from our database and has a nifty download button on the tracks so they can be played offline. Trouble is that when the webapp is actually offline, the cached version of the track isn't being played.
I'll list the steps how its implemented and if someone could just take a look and spot the error that would be amazing.
- Using create react app script framework, or at least we did until switching to react-app-rewired (v 2.1.3)
- service worker is registered in index.tsx (we're using typescript), calling
serviceWorker.register(); - mp3s are served via cloudfront + S3 (this shouldn't matter) and played in webbrowser using a simple video tag
<video src={mp3url}></video> - download button basically runs
caches.open("my_custom_mp3_cache").then(cache => cache.add(mp3url)) - when the webapp is offline (via "Offline" checkbox in "service worker" tab of console), i expect the service worker to serve the track from the cache. This is bug, it currently doesnt.
Attached picture of request for the mp3 when app is offline. it should hit cache but doesnt: https://i.stack.imgur.com/uSUon.png
Included picture of the entry in the cache that should be hit/matched against: https://i.stack.imgur.com/If0NC.png
When testing this in console with caches.match("mp3url") it correctly returns the cached response.
Please let me know if anyone has any ideas. i'm quite stumped.
Few ideas from my side of why its not using the cached mp3:
- workbox create-react-scripts service worker either doesn't look inside my custom cache, it only looks inside its workbox-precache.
- workbox create-react-scripts service worker only matches against its list of pre-cached files from the build system and any dynamically added files to the cache are ignored
- when the video element requests the mp3, it sets different request headers to when my code adds it to the cache. Assuming caches.match checks headers, then the request headers don't match and its a miss.
