In addition to a telescope issue, we were also tasked to contribute to another open source project in github. One that we previously worked on was also suggested. Now I would have taken the initiative to find another repo, and in fact I did find an interesting react app issue to work on, however due to time constraints from leaving this last minute, (consequences of bad time management, you'll suffer now AND later) I decided to revisit a repo I had worked on instead, and see if any issues exist that I may make a meaningful contribution on.
So I went back to Survol, a chrome extension I had worked on a month ago during hacktoberfest and found a good issue. Cache the changelog on onboarding page #141 So opening the settings/onboarding page for this chrome app will open a new tab with options to tweak settings and a change log on the right side documenting the additions to each version revision of the extension. This info is used through fetching the Github API. Everytime you open the settings page however, the extension makes that fetch call, in order to omit this repetition, the maintainer has requested that someone make an edit to cache the changelog so that it doesn't repeatedly fetch for the same data.
I haven't worked with caching before so I wanted to give this a shot. I read up how caching works on plain javascript and looked at the docs to see how it works. Cache is an interface with methods that mostly work with promises.
const cacheName = 'userSettings'
const url = '/api/get/userSettings'
caches.open(cacheName).then( cache => {
cache.add(url).then( () => {
console.log("Data cached ")
});
});
Caches.open will create the cache if it doesn't exist, it will also return a promise that you can access cache data with after. Cache.add will accept a url that it essentially fetches, which will then be stored in the cache provided that it is a valid route.
caches.open(cacheName).then(cache => {
cache.match(url).then(settings => {
console.log(settings);
}
});
Cache.match will return a promise that resolves to the data fetched with the matched url. There's a few more methods I left out such as Cache.put which basically serves the same functionality as the previously mentioned methods but with more flexibility in terms of fetching the request and setting it in the cache. But I tried to keep it simple and used only the methods that were necessary.
Also, I'm slowly getting better at using the chrome dev tools and the more I learn how to use the tools given in it, the more I realize how great the chrome dev tools are for developers, before coding I couldn't even imagine using these tools, I'd only ever accidentally open it by pressing f12, but knowing what's going on in the network tab, debugging with the source tab, and checking caches in the application tab were just some of the little bits of ways that I learned to use it.
So I got the onboarding page to cache the changelog only having to fetch it once, and after that you can go off the grid or forget to pay the internet bill or whatever and still be able to view the changelog whenever you'd like.
Thanks for reading
Comments
Post a Comment