我可以从 HTML5 应用缓存中加载网络资源吗？

Question

我能够完美地缓存本地文件（图像、js 等）。

理想情况下，我希望能够指向远程资源，例如存储在 Azure 上的 blob 存储中的 .mp4，并对其进行缓存。那可能吗？

我在我的日志中没有看到任何错误，但我也没有看到它正在被下载，因为它在我的 Chrome -> 资源面板下的应用缓存中不可用。

我的清单：

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:
*

这就是我记录正在发生的事情的方式：

// 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);

Answer 1

我解决了。花了点时间到处打猎，但你走了：

您可以通过 Web 作业之类的方式将缓存控制应用于容器中的所有 blob。 This Stack Overflow post 有一个很好的例子来说明如何做到这一点，它包括两个步骤：

1. 从同一数据中心的工作角色运行操作。只要 Azure 服务在同一个关联组中，它们之间的速度就会非常快。此外，没有数据传输费用。
2. 并行运行操作。 .net v4 中的任务并行库 (TPL) 使这变得非常容易。这是为容器中的每个 blob 并行设置缓存控制标头的代码。 此外，您可以使用 CloudBerry Explorer 等支持 Cache-Control 的工具

我只想在少数几个视频上进行测试，以节省自己必须创建脚本的时间，所以这里一步一步来。我只是登录到我的 Azure 门户，转到我正在服务的 .mp4 的 blob 存储容器，并且必须单独编辑它们。我单击每个视频，编辑属性，然后设置 Cache-Control 属性的值。 （例如 public, max-age=300000），其中 max-age 指定表示将被视为新鲜的最长时间。

Alexander Brisebois 在他的博客上对缓存控制可用的不同属性进行了很好的概述。