Can I load a network resource from HTML5 app cache?

Question

I am able to cache local files (images, js, etc.) perfectly fine.

Ideally I'd like to be able to point to a remote resource, such as a .mp4 stored in blob storage on Azure, and cache that. Is that possible?

I am not seeing any errors in my log, but I am also not seeing that it is being downloaded, as it is not available in my app cache under the Chrome -> Resources panel.

My manifest:

CACHE MANIFEST
# Init 11-24-15
index.html

### Images
img/Night-Trap-32x-Front.jpg
/img/icons/Bathroom.jpg
/img/icons/Bedroom.jpg
/img/icons/Driveway.jpg
/img/icons/Entry-Way.jpg
/img/icons/Hall-1.jpg
/img/icons/Hall-2.jpg
/img/icons/Kitchen.jpg
/img/icons/Living-Room.jpg
/img/icons/trap-icon.gif

img//stills/BATHROOM_1.jpg
img//stills/BEDROOM_1.jpg
img/stills/DRIVEWAY_1.jpg
img/stills/ENTRY-WAY_1.jpg
img/stills/HALL-ONE_1.jpg
img/stills/HALL-TWO_1.jpg
img/stills/KITCHEN_1.jpg
img/stills/LIVING-ROOM_1.jpg

### JS
js/vendor/bootstrap.min.js
bower_components/video.js/dist/video.js
js/vendor/mainloop/mainloop.js
bower_components/object.observe/dist/object-observe-lite.min.js
js/appCacheValidation.js


 # THESE DO NOT SEEM TO BE CACHED
 https://nighttrapblob.blob.core.windows.net/ntvids/hallOne/00000021.mp4
 https://nighttrapblob.blob.core.windows.net/ntvids/hallOne/00130422.mp4
 https://nighttrapblob.blob.core.windows.net/ntvids/hallOne/01152221.mp4
 https://nighttrapblob.blob.core.windows.net/ntvids/hallOne/02500221.mp4           
 https://nighttrapblob.blob.core.windows.net/ntvids/bedroom/00000081.mp4

NETWORK:
*

And this is how I keep a log of what is happening:

// App cache validation
var appCache = window.applicationCache;

if (appCache === null || undefined) {
    console.log("App cache does not exist");
}

appCache.addEventListener('checking', function(event) {
    console.log("Checking for updates.");
}, false);

appCache.addEventListener('error', function(event) {
    if (navigator.onLine === true) { //If the user is connected to the internet.
        //alert("Error - Please contact the website administrator if this problem consists.");
        console.log("Error - Please contact the website administrator if this problem consists.");
    } else {
        //alert("You aren't connected to the internet. Some things might not be available.");
        console.log("You aren't connected to the internet. Some things might not be available.");
    }
}, false);

appCache.addEventListener('downloading', function(event) {
    console.log("Started Download.");
}, false);


appCache.addEventListener('progress', function(event) {
    console.log(event.loaded + " of " + event.total + " downloaded.");
}, false);

appCache.addEventListener('cached', function(event) {
    console.log("Cached assets -- Done.");
}, false);

appCache.addEventListener('updateready', function() {
    console.log("New resources are available for download -- update ready");
}, false );

appCache.addEventListener('obsolete', function(event) {
    console.log("Obsolete - no resources are cached, and previous cache(s) are now deleted.");
}, false);

score 0 · Answer 1 · answered Nov 25 '15 at 16:02

I solved it. Took a bit of hunting around, but here you go:

You can apply cache-control to all blobs in a container through something like a web job. This Stack Overflow post has a great example of how to do exactly that, and consists of two steps:

Running the operation from a worker role in the same data center. The speed between Azure services is great as long as they are in the same affinity group. Plus there are no data transfer costs.
Running the operation in parallel. The Task Parallel Library (TPL) in .net v4 makes this really easy. Here is the code to set the cache-control header for every blob in a container in parallel. Moreover, you could use a tool such as CloudBerry Explorer, which supports Cache-Control

I only wanted to test this out on a handful of videos, to safe myself the time of having to create a script, so one step at a time here. I simply logged into my Azure portal, went to my blob storage container for the .mp4s I am serving, and had to edit them individually. I clicked on each video, edit properties, and then set the value for the Cache-Control attribute. (e.g. public, max-age=300000), where max-age specifies the maximum amount of time that a representation will be considered fresh.

Alexander Brisebois has a great overview of the different attributes available to cache-control on his blog.

Can I load a network resource from HTML5 app cache?

1 Answers1