HTML緩存清單和動態加載的圖像

Question

我有一個具有離線功能的網絡應用程序。 我設法使清單能夠正常運行所有必需的資產; CSS，JS和圖像。

不過我用的角度，從生成的用戶列表，圖像服務器，以獲得，以類似的方式：

$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的保留這個列表即使用戶處於離線狀態， 但是我想將這些圖片包含在我的離線緩存中...... 任何想法如何實現這一目標？

BONUS：

未來還可能會有視頻文件。在這種情況下做什麼？

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替換）的包裝。

如果您在使用offline-fetch配置爲使用localForage要求你的圖片，它會在檢測到應用程序離線但將意味着通過加載JS您的圖像，而不是的img src屬性需要從磁盤服務他們的照顧。