fix: Handle range requests for streamable resources

[toshify]

• I did all of the following:
  • search for a solution in the discussions
  • search for duplicate or closed issues
  • read the bug report contributing guidelines

Describe the bug

Sometimes when loading new content, Chrome will request only the first few bytes of mp3 files,
using a range request, and the server provides the range with a 206 response,
but then Chrome proceeds to complain that a range response cannot be cached.

Steps to reproduce

1. Visit liaizhongzi.com
2. Open Inspector (F12), go to Application, Storage, Clear site data
3. Go to Inpector > Network, then reload page
4. Wait for media resources to load
5. Observe error message in console after 10-20 sec

Expected behavior

No error.

Environment

• Device: PC
• OS: Ubuntu 20.04
• Browser Chromium
• Version 96

Additional context

registerServiceWorker.ts:10 Service worker has been registered.
registerServiceWorker.ts:16 New content is downloading.
StrategyHandler.js:314 Uncaught (in promise) TypeError: Failed to execute 'put' on 'Cache': Partial response (status code 206) is unsupported
    at U.cachePut (StrategyHandler.js:314)
    at async k._handleInstall (PrecacheStrategy.js:138)
    at async k._handle (PrecacheStrategy.js:70)
    at async k._getResponse (Strategy.js:144)
cachePut @ StrategyHandler.js:314

[toshify]

Workaround:
Reload page, wait 30-60 seconds, reload again,
or Inspector, Application, then Unregister all serviceworkers, then reload.

[toshify]

Relevant Workbox article: https://developer.chrome.com/docs/workbox/serving-cached-audio-and-video/

[toshify]

We are currently loading mp3 files as base64 encoded data, so Chrome and other browsers do not identify the mp3 files as streamable, and so that currently circumvents this problem. However, we may want to revert to using native mp3 at a later time, and may need to handle this at that point.