API’s scan be link firstly with XMLHttpRequest() method but the usage requires laborious code depending on the case. So, it came fetch (), more flexible and easier to manage, that needs only the URL of the specific API.
Abort controller come up to solve the aborting fetch situation. It is a new technology that consist in an constructor that link to the request through the abort.signal, so when it is wished the petition can be aborted. It is really helpful in cases of downloading images or videos and these has heavy byte weight, so the client can abort the operation manually.
Blob () object is a like-file based on blob, that contains all kind of data. This can be read if it is converted so its methods can be use. It is commonly used to save images inside or to build drag and drop events. As parameter it receives the object target, this can be a JSON file, JS file, HTML, etc as second parameter is the specification of the type of object introduced.
URL.createObjectURL() was born to link the DOM element to the blob or file object we want to extract information from, for example an image or video. Inside the syntaxis It must be indicated the object targeted and this method will relate the DOM element with the file-object or blob-object.
Conclusion: to request data from APIs we can use XMLHttpRequest() or fetch(), but it is recommendable fetch(), after the data in the case of images can be contained in a blob-object so when we need it we can link the DOM element to the blob-file through URL.createObjectURL() and make this process faster than requesting and load the image often.
It can happen it is wished as the page is loaded and scrolled, the elements must appear in the window with animation for example. Nowadays, to do so it is necessary to read the intersection between the element container, the window, and the element or elements contained, like an image or video for example.
IntersectioObserver receive two parameters, a call back that will contain the elements and the observer; and an object that will configurate the root (Element container of the intersection), the rootMargin (margin of that element container), threshold (limit size of the element contain).
The call-back will compare the threshold it has the element contain with the element container with the intersection Ratio that calculate the intersection at that moment between both.
Conclusion: IntersectionContainer will allow us to read the interactions in the screen and apply methods to create asynchronous actions like for example the auto pause and auto play of a video watching the percentage visible of this.
Other useful method from the browser API is VisiblitiyChange() that permit to see if the window is visible or hidden, a simple case is when the client change tabs.
This useful reader can help to save energy and synchronise videos being more friendly with the user. As It is said before this method has two status: visible and hidden and these can be reading by the event “visibilitychange”
Conclusion: this method allows us to see the visible status of the page and with the information take some actions like pausing or playing a video, to save energy or to create a friendly UX experience.
Service workers have to be activated through javascript with “navigator.serviceWorker.register(‘/sw.js’)” . After this the service Worker will be able to listen the interactions from and toward the website, among these events we found: install, activate, push, fetch, sync and message.
Service Workers are very useful because there are always listening even offline. It has it own data base so in those offline cases when the website is making a petition and this is found in the cache of the service Worker, then this can return it; or if there is connection again it can update the data in the cache.
Conclusion: Service Workers are listeners of the interactions from and toward the website. It has it own data base, so in can make faster the request of information or as a back up in offline cases. They must be activate to count on them in the Dev Tools.
