如何为服务工作者缓存音频文件？

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 查看 Application/cache 存储时，我发现一个条目具有正确的 path/name 和内容类型，但内容长度为 0 字节

Answer 1

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

这里是 link 以获取有关此的更多信息。 https://www.w3.org/TR/IndexedDB/

Answer 2

请注意，您可以为运行应用程序音频缓存创建/使用来自 SW.js 的单独工作器 'audioWorker.js'，因为 IMO 更容易测试并且涉及 SW 生命周期并且非常适合应用程序使用的 'real' urls 自己的应用程序缓存。

另请注意，与拦截对 'fetch' 的调用的正常 Service-Worker 实现中使用的允许协议不一致 - 浏览器在您的音频 blob 上使用的 blob 协议将被 [= 作为无效 Url 拒绝25=] 实施。您不能简单地将 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);
          })
      });
    }

如何为服务工作者缓存音频文件？

How to cache audio file for Service workers?

javascript

browser-cache

service-worker