Caching webview content in Chrome app

Question

I am working on a Chrome app that switches between medias shown in a webview tag. The medias must be updated when they change on my web server and it must keep playing when the internet or the server go down. My solution was to play the media from a programmatically managed local cache.

I programmed the Chrome app to download the content with webkitRequestFileSystem into persistent local storage and I try to access the files from there. The content ends up with URLs like this filesystem:chrome-extension://kbjjicmijilgpdpkicpbnceofdpfbjcb/persistent/my_file.html.

No matter what I do, I cannot access the local files. Neither the webview nor navigating directly to the file displays it in Chrome. It only shows a ERR_FILE_NOT_FOUND error.

How should I go about showing this local content in my webview?

Here is my saveAsset() code (strongly inspired by 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();
}

And this is the code that sets the src attribute of the webview to that URL.

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

I would also take any suggestion for meeting my requirements with another local storage method or maybe an option to aggressively force caching in the webview so I could show an URL from the server without worrying about the connection's quality. — Kevin Coulombe, Apr 22 '15 at 01:09

score 1 · Answer 1 · answered Apr 22 '15 at 22:17

I never managed make the webview work with local content, but switching to an iframe does work perfectly. I have both cached and uncached content so it makes some confusing code, but I fixed my issue by using both a webview and an iframe and hiding the one which is not in use.

PS. For anyone trying to do this, the webview won't load its content correctly if it is hidden with display:none . I had to move it outside of the screen instead.

Caching webview content in Chrome app

1 Answers1