As web developers we write a lot of code to detect changes in our web app and do manipulations based on those changes. Today, the web has lots of APIs for "observing" your web app for many types of changes and letting you perform actions based on them.
Here's a quick round up-
1. Observing the DOM through event listeners
The most classic way to detect changes by using addEventListener
. This can be used to listen to native as well and custom events.
window.addEventListener('scroll', e => { ... }); // user scrolls the page.
el.addEventListener('focus', e => { ... }); // el is focused.
img.addEventListener('load', e => { ... }); // img is done loading.
el.addEventListener('custom-event', e => { ... }); // catch custom event fired on el.
2. Check for DOM tree modifications
The MutationObserver interface provides the ability to watch for changes being made to the DOM tree.
var target = document.querySelector('#div_id');
var observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
console.log(mutation.type);
});
});
var config = {
attributes: true,
childList: true,
characterData: true
}
observer.observe(target, config);
3. Check when an element comes into view
The Intersection Observer API provides an easy way to watch and register callbacks to trigger when elements on a page come into view.
const images = document.querySelectorAll('.animate');
observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.intersectionRatio > 0) {
console.log('in the view');
} else {
console.log('out of view');
}
});
});
images.forEach(image => {
observer.observe(image);
});
Using this API we can trigger animations, lazy load images etc., when they come into view.
4. Check when the elements in DOM are re-sized
The ResizeObserver allows for elements to be notified when their size changes.
const myObserver = new ResizeObserver(entries => {
entries.forEach(entry => {
console.log('width', entry.contentRect.width);
console.log('height', entry.contentRect.height);
});
});
const el = document.querySelector('.some-element');
myObserver.observe(el);
With each entry, we get an object with properties - contentRect
and target
. The target is the DOM element itself, and contentRect is an object with the following properties: width
, height
, x
, y
, top
, bottom
, left
and right
.
5. Check if your web app is on full-screen mode
Using the Fullscreen API makes this possible.
var el = document.getElementById("myvideo");
if (el.requestFullscreen) {
el.requestFullscreen();
}
Not just detection of full-screen mode but this API also allows the turning off and on of full-screen mode.
6. Check if the tab is in focus
document.addEventListener('visibilitychange', e => {
if(document.hidden) {
// .... do something
} else {
// .... dome something else
}
});
I am still including this in the list even if this is not a new API but rather a technique. One use case can be to draw user attention back to the abandoned tab.
7. Check for device orientation changes
The Screen Orientation API makes this possible.
window.addEventListener('orientationchange', e => {
console.log(screen.orientation.angle, screen.orientatio.type)
});
We can also check to see if the current orientation matches to a particular orientation.
const media = window.matchMedia('(orientation: portrait)');
media.addListener(mql => console.log(mql.matches));
8. Check for network status and changes
The Network Information API provides information about user's network connection. Using this information itβs possible to conditionally load images, videos, fonts and other resources.
navigator.connection.addEventListener('change', e => {
console.log(navigator.connection.effectiveType, navigator.connection.downlink);
});
Apart from properties effectiveType
and downlink
mentioned above, it also provides downlinkMax
, rtt
, saveData
, type
.
9. Check status of the device battery
This is possible using the Battery Status API.
navigator.getBattery().then(battery => {
console.log(
battery.level * 100 + '%',
battery.charging,
battery.chargingTime,
battery.dischargingTime
);
});
10. Check when your web app uses a deprecated API or hits a browser intervention
The Reporting API makes it possible
const observer = new ReportingObserver((reports, observer) => {
reports.map(report => {
console.log(report);
// ..... send report to analytics etc..
});
}, {buffered: true});
observer.observe();
I believe, currently, the ReportingObserver
has only been shipped in latest Chrome.
11. Check the performance of you web app
The PerformanceObserver interface is used to observe performance measurement events and be notified of new performance entries as they are recorded in the browser's performance timeline.
const observer = new window.PerformanceObserver(list => {
list.getEntries().forEach(({name, startTime}) => {
console.log({name, startTime});
});
});
observer.observe({
entryTypes: [{'paint', 'resource', 'mark', 'measure'}]
});
It's really amazing that the web has so many great APIs at our disposal. Using these we can create web apps with better performance and greater user experience.
Note: Always check the browser support before using the modern APIs.
Top comments (2)
Great great article, thanks
You're welcome :)