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

【问题标题】：How to cache audio file for Service workers?如何为服务人员缓存音频文件？
【发布时间】：2018-08-25 23:14:05
【问题描述】：

我正在用 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 查看应用程序/缓存存储时，我发现一个具有正确路径/名称和内容类型的条目，但内容长度为 0 字节

【问题讨论】：

标签： javascript browser-cache service-worker

【解决方案1】：

请注意，您可能会从 SW.js 创建/使用单独的工作程序“audioWorker.js”来运行应用程序音频缓存，因为 IMO 更容易测试，并且 SW 生命周期非常复杂并且非常面向其自己的应用程序缓存应用程序使用的“真实”网址。

另请注意，与拦截对“获取”调用的正常 Service-Worker 实现中使用的允许协议不一致 - 浏览器在音频 blob 上使用的 blob 协议将被 browser.SW 实现作为无效 URL 拒绝。您不能简单地将您的 blob url 提供给正常的 SW 生命周期，因为它的 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);
          })
      });
    }

【讨论】：

【解决方案2】：

您可以使用 sql lite 在浏览器中存储数据，有很多工具可以帮助您在开发中做到这一点，我自己使用这个工具，https://sqlitebrowser.org/ 用于调试、测试和从浏览器读取数据，您也可以使用数据系列并将其发布到客户端。您可以参考此链接，也可以参考如何在浏览器中使用 sql lite，您是否将音频文件存储为二进制文件？ , 一般来说，sql lite 很好，但您必须注意存储敏感数据而不对其进行加密，否则它将受到损害，您也可以使用 Indexed Database API v 2.0。

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

【讨论】：

感谢您的快速重播。我已经编辑了我的问题，以便更好地解释我的想法