HTMLキャッシュのマニフェストと動的に読み込まれた画像

Question

私はオフライン機能を備えたWebアプリケーションを持っています。 私はマニフェストをすべての必要な資産で適切に機能させることができました。 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を使用し、 しかし、私は私のオフラインキャッシュに含まれているこれらの写真を持っていたいと思います... これを実現する方法はありますか？

ボーナス：

将来はビデオファイルもあります。その場合はどうすればいいですか？

Answer 1

これは多くのオフラインの課題の1つです。あなたのオプションは以下のとおりです。

1）をmanifest.appcacheする画像のパスを追加します。

動的にオフラインにしたい画像への参照を挿入し、あなたのmanifest.appcacheを生成します。 appcache-nannyを使用して更新を確認することができます。 localStorageで

2）お店のイメージ：

これは、いくつかの画像に対して大丈夫、それはビデオを除外して、デバイス/ブラウザによっては10メガバイトまで2.5メガバイトから心のlocalStorage容量範囲に保つかもしれません。オフラインフェッチと

3）使用localForage：

localForageは50メガバイト、クライアント側のストレージにあなたを与えることができるのIndexedDB/WebSQLのラッパーです。 offline-fetchは、fetch（XMLHttpRequestの置き換え）のラッパーです。

あなたがlocalForageを使用するように設定offline-fetchを使用して画像を要求した場合、それはアプリがオフラインしかしあるJSを経由して、あなたのイメージのロードを意味し、src属性をのimgないと検出したとき、それはディスクからそれらを提供するの世話をします。