I have a vision. In my dream, I see my Angular application swiftly rendering data for users with minimal delay. I envision users being able to utilize my application seamlessly even without an internet connection.
To achieve this, I am implementing two tiers of caching - memory and disk. Memory is stored as a global variable accessible via a Service within the application. The second tier, "disk", is stored in chrome.storage.sync.
Currently, my application attempts to retrieve data from memory, then from disk, and if necessary, sends a slow network request to fetch the latest data. Upon retrieval, the information is updated in both memory and disk caches.
I wonder if this approach is the most effective. I struggle with the idea of standardizing or automating this process so that it doesn't require manual intervention for each data type. Although it functions well, it involves a significant amount of code.
// Load from Memory NOW
if(Cache.get("receiptList")) {
$scope.receipts = Cache.get("receiptList");
console.log("Mem Cache hit");
} else {
console.log("Mem Cache miss");
}
// Asynchronously load from disk soon
chrome.storage.sync.get('receiptList', function(value) {
// The $apply is only necessary to execute the function inside Angular scope
if(value) {
$scope.$apply(function() {
console.log("Disk cache hit");
console.log(value.receiptList);
$scope.receipts = value.receiptList;
});
} else {
console.log("Disk cache miss.");
}
});
// Asynchronously load from network later and save
Receipt.query({}, function(result) {
Cache.put("receiptList",result);
chrome.storage.sync.set({'receiptList':result});
$scope.receipts = result;
console.log("Caches set from network.");
});