[PWA] 18. Clean the photo cache

Posted 2020-07-10 Answer1215

We cannot let photo always keep caching new data without clean the old data. If message is not display on the page anymore, we want to clean it. And also every 5 mins we want to clean the photo data.

 

export default function IndexController(container) {
    this._container = container;
    this._postsView = new PostsView(this._container);
    this._toastsView = new ToastsView(this._container);
    this._lostConnectionToast = null;
    this._dbPromise = openDatabase();
    this._registerServiceWorker();
    this._cleanImageCache();

    var indexController = this;

    setInterval(function () {
        indexController._cleanImageCache();
    }, 1000 * 60 * 5);

    this._showCachedMessages().then(function () {
        indexController._openSocket();
    });
}

 

_leanImageCache():

• First, go to idb, get all the writtrs from the db and get the photos which we want to keep
• Then open the photo cache and check the url exists in the list, if not then delete it.

IndexController.prototype._cleanImageCache = function () {
    return this._dbPromise.then(function (db) {
        if (!db) return;

        // TODO: open the ‘wittr‘ object store, get all the messages,
        // gather all the photo urls.
        //
        // Open the ‘wittr-content-imgs‘ cache, and delete any entry
        // that you no longer need.
        var photosToKeep = [];
        var tx = db.transaction(‘wittrs‘);
        return tx.objectStore(‘wittrs‘).getAll()
            .then(function(messages){
                messages.forEach(function(message){
                    if(message.photo){
                        photosToKeep.push(message.photo);
                    }
                });

                return caches.open(‘wittr-content-imgs‘);
            })
            .then(function(cache){
                return cache.keys().then(function(requests){
                    requests.forEach(function(request){
                        var url = new URL(request.url);
                        if(!photosToKeep.includes(url.pathname)){
                            cache.delete(request);
                        }
                    })
                })
            });
    });
};