Manifeste de cache HTML et images chargées dynamiquement

Question

J'ai une application Web avec fonctionnalité hors ligne. J'ai réussi à faire fonctionner correctement le manifeste avec tous les actifs requis; css, js et images.

Cependant, j'utilise angulaire pour obtenir du serveur une liste d'utilisateurs a généré des images, de la même manière:

$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() 

J'utilise le localStorage de garder la liste même si l'utilisateur est hors ligne, mais je voudrais avoir ces images inclus dans ma cache hors ligne ... Une idée de comment y parvenir?

BONUS:

À l'avenir, il peut aussi y avoir des fichiers vidéo. Que faire dans ce cas?

Answer 1

Ceci est l'un des nombreux défis hors ligne. Vos options sont:

1) Ajouter chemins images à manifest.appcache:

vos manifest.appcache produire de façon dynamique, insérer des références aux images que vous souhaitez en mode hors connexion. Vous pouvez utiliser le appcache-nanny pour rechercher les mises à jour.

2) Stocker des images dans localStorage:

Cela pourrait être acceptable pour quelques images, mais gardez à l'esprit leur capacité varie localStorage de 2.5MB à 10mb en fonction du périphérique/navigateur, de sorte que les règles en vidéo .

3) Utilisation localForage avec hors-fetch:

localForage est un wrapper autour IndexedDB/websql qui pourrait vous donner jusqu'à 50 Mo de stockage côté client. offline-fetch est une enveloppe autour de fetch(le remplacement XMLHttpRequest).

Si vous demandez à vos images à l'aide offline-fetch configuré pour utiliser localForage, il prendra soin de les servir à partir du disque lorsqu'il détecte l'application est en mode hors connexion mais signifierait charger vos images via JS et non img src attribut.