'What is the best way to cache XML data using TypeScript

I am trying to create an application that uses the BBC News RSS information and displays it on a webpage. With this I need the information to be cached and then refreshed every hour.

I have created a class called RSSFeed that is used to parse the RSS information using the fetch function:

     class RssFeed
    {
        
        async fetchRssFeedAPI() {
            console.log("WElcome to the RSS Feed for NMR Products and Services");

            const TESTINGURL = "http://feeds.bbci.co.uk/news/rss.xml";
            const STARTPOINTPUBDATA = 5; const ENDPOINTPUBDATE = 25;

           const response = await fetch(TESTINGURL)
           .then(this.handleResponse)
           .then(response => response.text())
           .then(str => new window.DOMParser().parseFromString(str, "text/xml"))
           .then(data => {

               console.log("API Data: ");
               console.log(data);
               
               this.displayRssData(data, STARTPOINTPUBDATA, ENDPOINTPUBDATE);
            });
    } 

    handleResponse(response: Response) {

        if (!response.ok)
           console.log(`Error occured: ${response.status} (${response.statusText}). Service currently unavailable`); 
        
        return response;
    }

     displayRssData(apiData: any, startPubData: number, endPubDta: number) { // Original - Working as expected

        console.log(apiData);
        
        const items = apiData.querySelectorAll("item");
        let html = "";

        items.forEach(el => {

            html += 
            ` <article>
            <img src="${el.querySelector("link").innerHTML}/image/large.png" alt="">
            <h2>
            <a href="${el.querySelector("link").innerHTML}" target="_blank" rel="noopener"> </a>
            ${el.querySelector("title").textContent}
            </h2>
            <br>
            <h3> ${el.querySelector("description").textContent} </h3>
            <p> ${el.querySelector("pubDate").innerHTML.substring(startPubData, endPubDta)} </p>
            </article> `
        });

        document.body.insertAdjacentHTML("beforeend", html);
     }

     testerFunction() {
        console.log("Hello from RssFeed Class"); // Working as expected
    }

 }
  
 const feed: RssFeed = new RssFeed();

Hopefully this class is not too complicated, but I am just using this class to retrieve and parse the XML within the fetchRssFeedAPI function.

The handleResponse function to make sure the response from the fetch is okay.

And then the displayRssData function that is being used to display the information in my HTML. This is being called in the fetchRssFeedAPI function.

Therefore I call fetchRssFeedAPI in my HTML when the body has loaded. This is also why I have an object of the RssFeed class called feed.

<!DOCTYPE html>
<html lang="en">
  
  <head>
    <meta charset="UTF-8">
    <title> NRM RSS Feed </title>
    <link rel="stylesheet" href="RssFeedStyling.css">
  </head>

  <body onload="feed.fetchRssFeedAPI()">
    <script src="RssFeed.js"></script>
  <script src="CacheRssFeedData.js"></script>
  </body>
  
</html>

Now is the part I am stuck on. I have another class that is called CachedRssFeedData.

 class CachedRssFeedData 
{

    refreshRequired(key: string): boolean {

        let now: number = Date.now();
        let age = 0;

        let timeStamp = localStorage.getItem(key + "Time");
        
        if(timeStamp)
            age = parseInt(timeStamp);
        
        console.log("Read " + key + " , at Time of: " + timeStamp);
        
        return age === 0 || age + (60 * 1000) < now;
    }

    saveTimeStamp(key: string) {

        let timeStamp: string = String(Date.now());
        localStorage.setItem(key, timeStamp)

        console.log("Saved: " + key + " , at Time of: " + timeStamp);
    }
    
    // Below Debug - Testing Functions

    testerFunction() {
        console.log("Hello from CachedRssFeedData Class"); // Working as expected
    }
}

const cachedData: CachedRssFeedData = new CachedRssFeedData();

I have the saveTimeStamp function that is going to save the timestamp when this is called. This is being saved in the web browser cache using the localStorage.setItem().

I then have my refreshRequired function. This is simply being used that every hour it will automatically tell the cache to refresh itself with the new hourly RSS information.

However, I am confused on the best approach or when to call this function to refresh the cache.

Thanks.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'What is the best way to cache XML data using TypeScript

Sources

Related Questions