Javascript 如何为服务人员缓存音频文件？

我正在用HTML/Javascript编写一个web应用程序，用于录制音频并将其上传到服务器。现在，我想把它也放在缓存中，以便service.workers可以在脱机情况下使用它。最好的方法是什么

程序流程：

录音

在Blob中捕获数据

在服务器上保存数据

听录音

当然，如果你在线，一切都会很好。
在远程保存文件之前，我希望该文件在本地可供侦听，并尽快将其备份到服务器上。
这是我的例行公事：

function mettiincache(name, myBlob) {  
    var resp = new Response(myBlob)
    var CACHE_NAME = 'window-cache-v1';
    caches.open(CACHE_NAME).then(function (cache) {
    cache.put(name, resp)
    }).catch(function (error) {
    ChromeSamples.setStatus(error);
    });
}

---

当我使用Chrome DevTools查看应用程序/缓存存储时，我发现一个条目具有正确的路径/名称和内容类型，但内容长度为0字节，您可以使用sql lite在浏览器中存储数据，有很多工具可以帮助您在开发中实现这一点， 我自己使用这个工具调试、测试和读取浏览器中的数据， 您可以使用数据系列并将其发布到客户端。 您可以参考此链接，也可以参考如何在浏览器中使用sql lite，是否将音频文件存储为二进制文件， 一般来说，sql lite是好的，但您必须注意存储敏感数据而不加密它，否则会受到损害，您也可以使用索引数据库API v 2.0

这里有一个链接，可以获取更多信息。

---

请注意，您可以从SW.js中创建/使用一个单独的worker“audioWorker.js”来运行应用程序音频缓存，因为它更容易测试，而且软件生命周期非常复杂，并且非常面向应用程序使用的“真实”URL的应用程序缓存

还请注意，与拦截对“fetch”调用的正常Service Worker实现中使用的允许协议不一致。浏览器在音频blob上使用的blob协议将被browser.SW实现作为无效URL拒绝。您不能简单地将blob url提供给正常的软件生命周期，因为其url以“blob://”开头

如果您选择不将SW用于缓存，则audioBlob中的url是正常的。但是，您可能希望在其后面加上mimeType

url = URL.createObjectURL(audio);  // protocol of this is 'blob://'
wUrl = url +"?type=" + {$audio.blob.data.type};

console.log("SW CACH1 " +wUrl);
myCacheWorker.postMessage({ action: 'navigate', url: wUrl });

在cacheWorker的onMessage中，写入缓存：

onmessage = function( e ){
  switch( e.data.action ){
    case 'navigate':
        upcache(e.data.url).then(() => {
          postMessage({done: 'done'});
        });
        break;
}}

    //boiler plate cache write below from any example
    var upcache = function( url ){
      return caches.open($cname)
        .then((openCache) => {
          return fetch(fetchUrl).then(function(resp) {
            if (!resp.ok) {
              throw new TypeError('Bad response status');
            }
            return openCache.put(url, resp);
          })
      });
    }

---

谢谢你的快速重播。为了更好地解释我的想法，我编辑了我的问题