HTML cache manifest and dynamically loaded images

I have a web app with offline functionality.
I managed to get the manifest working properly with all the required assets; css, js and images.

However I use angular to get from the server a list of user generated images, in a similar manner:

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

I use the localStorage to keep the list even if the user is offline,
however I would like to have these pictures included in my offline cache…
Any idea how to achieve this?

BONUS:

In the future there may also be video files. What to do in that case?

Source: AngularJS

from Angular Questions https://angularquestions.com/2017/10/21/html-cache-manifest-and-dynamically-loaded-images/
via @lzomedia #developer #freelance #web #lzomedia.com