HTML 缓存清单和动态加载的图像

Question

我有一个具有离线功能的网络应用程序。 我设法使清单与所有必需的资产一起正常工作； css、js和图片。

但是我使用 angular 从服务器获取用户生成的图像列表，方式类似：

$scope.images = angular.fromJson(localStorage.getItem('images')) || []

$http
.get('/my-rest-endpoint')
.then(function(res){
    $scope.images = res.data
    localStorage.setItem('images', angular.toJson(res.data))
}).catch()

即使用户离线，我也使用 localStorage 来保留列表， 但是我希望将这些图片包含在我的离线缓存中... 知道如何实现这一目标吗？

奖金：

将来可能还会有视频文件。遇到这种情况怎么办？

Answer 1

这是众多离线挑战之一。您的选择是：

1) 将图片路径添加到 manifest.appcache：

动态生成您的manifest.appcache，插入对您要离线的图像的引用。您可以使用appcache-nanny 来检查更新。

2) 将图片存储在 localStorage：

这对于一些图像可能没问题，但请记住，localStorage 容量范围为 2.5mb 到 10mb，具体取决于设备/浏览器，因此排除了视频。

3) 将 localForage 与离线提取一起使用：

localForage 是 IndexedDB/WebSQL 的包装器，可以为您提供高达 50mb 的客户端存储空间。 offline-fetch 是 fetch 的包装器（XMLHttpRequest 替换）。

如果您使用配置为使用localForage 的offline-fetch 请求图像，它会在检测到应用离线时从磁盘提供图像但意味着通过JS 加载图像而不是 img src 属性。