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

Question

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

程序流程：

1. 录制音频
2. 在Blob中捕获数据
3. 在服务器上保存数据
4. 听录音

当然，如果您在线上，一切都很好。
我希望在远程保存文件之前，可以在本地使用该文件进行侦听，然后尽快将其备份到服务器上。
这是我的例程：

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查看应用程序/缓存存储区时，发现条目具有正确的路径/名称和content-Type，但content-Length为0字节

Answer 1

您可以使用sql lite将数据存储在浏览器中，有很多工具可以帮助您进行开发，例如，我使用自己的工具https://sqlitebrowser.org/进行调试，测试和读取数据在浏览器中，您可以使用数据系列并将其发布到客户端。 您可能会参考此链接，也参考如何在浏览器中使用sql lite，您是否将音频文件存储为二进制文件？ 通常，sql lite很好，但是您必须注意存储敏感数据而不进行其他加密，否则会受到威胁，您也可以使用Indexed Database API v 2.0。

这是更多有关此信息的链接。 https://www.w3.org/TR/IndexedDB/

Answer 2

请注意，您可能会从SW.js创建/使用单独的辅助程序'audioWorker.js'来运行应用程序音频缓存，因为IMO更易于测试，并且SW生命周期相当复杂，并且完全面向自己的“真实”应用程序缓存'应用程式使用的网址。

还要注意，与正常的Service-Worker实现中使用的允许协议不一致，该协议会拦截对“提取”的调用-浏览器在您的音频Blob上使用的Blob协议将被browser.SW实现拒绝为无效Urls。 您不能简单地将blob网址提供给正常的软件生命周期，因为其网址以“ 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);
          })
      });
    }