Question

我正在开发一款Chrome应用，可在webview标记中显示的媒体之间进行切换。媒体在我的网络服务器上更改时必须更新，并且必须在互联网或服务器停机时继续播放。我的解决方案是从程序管理的本地缓存中播放媒体。

我将Chrome应用程序编程为将webkitRequestFileSystem的内容下载到持久性本地存储中，然后尝试从那里访问这些文件。内容最终会包含此filesystem:chrome-extension://kbjjicmijilgpdpkicpbnceofdpfbjcb/persistent/my_file.html之类的网址。

无论我做什么，我都无法访问本地文件。 webview和直接导航到该文件都不会在Chrome中显示它。它只显示ERR_FILE_NOT_FOUND错误。

我应该如何在网页浏览中显示本地内容？

以下是我的saveAsset()代码（受this answer强烈启发）：

function saveAsset(fs, url, filename, callback, failCallback) {
  // Set callback when not defined
  if (!callback) {
    callback = function(cached_url) {
      console.log('download ok: ' + cached_url);
    };
  }
  if (!failCallback) {
    failCallback = function() {
      console.log('download failed');
    };
  }

  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'arraybuffer';

  xhr.addEventListener('load', function() {

    fs.root.getFile(filename, {create: true, exclusive: false}, function(fileEntry) {
      fileEntry.createWriter(function(writer) {

         writer.onwrite = function(e) {
          callback(fileEntry.toURL());
        };

        writer.onerror = failCallback;

        console.log(xhr.response);
        var blob = new Blob([xhr.response], {type: ''});
        writer.write(blob);

      }, failCallback);
    }, failCallback);
  });

  xhr.addEventListener('error', failCallback);
  xhr.send();
}

这是将webview的src属性设置为该URL的代码。

window.webkitRequestFileSystem(window.PERSISTENT, 1024*1024, function (fs) {
    saveAsset(fs, url, filename, function(localUrl) {
        console.log(localUrl);
        $(contentSelector).attr("src", localUrl);
    });
});

Answer 1

我从未管理过让webview使用本地内容，但切换到iframe确实很有效。我有缓存和未缓存的内容，所以它会产生一些令人困惑的代码，但我通过使用webview和iframe修复了我的问题，并隐藏了一个未使用的内容。

PS。对于任何尝试执行此操作的人，如果使用display：none隐藏了webview，则webview将无法正确加载其内容。我不得不把它移到屏幕之外。

在Chrome应用中缓存webview内容

1 个答案: