Question

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

Answer 1

您可以使用sql lite将数据存储在浏览器中，其中有很多工具可以帮助您进行开发，我自己https://sqlitebrowser.org/在使用该工具进行调试，测试和从浏览器读取数据，您可以使用Data系列并将其发布到客户端。您可能会参考此链接，也参考如何在浏览器中使用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);
          })
      });
    }

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

2 个答案: