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

Question

我有一个具有离线功能的网络应用。 我设法让清单正常运行所有必需的资产; css，js和images。

但是我使用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与offline-fetch一起使用：

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

如果您使用配置为使用offline-fetch的{​​{1}}请求您的图片，则会在检测到应用离线时从磁盘提供图片，但表示正在加载你的图像是通过JS而不是img localForage属性。