The Challenge for Developers: 🤔

Historically, developers encountered difficulties ensuring complete and secure data transmission to servers during page navigation or exit. However, fetchLater() aims to overcome these issues by allowing for safe and reliable request dispatch, even after a user has left the page.

Current Testing Phase:

The fetchLater() API is currently undergoing real-user testing, available from Chrome version 121 (January 2024) to version 126 (July 2024).

Reflecting on Previous Methods: 🔄

Previously, developers utilized events such as pagehide, visibilitychange, unload, and beforeunload to manage data submissions. While tools like navigator.sendBeacon() and fetch() with the keepalive option provided some help, they were often unreliable, resulting in nearly 10% of data not reaching the server.

Code Example:

window.addEventListener('pagehide', (event) => {

sendDataToServer();

});

window.addEventListener('visibilitychange', (event) => {

if (document.visibilityState === 'hidden') {

sendDataToServer();

}

});

addEventListener("unload", (event) => {

sendDataToServer();

})

addEventListener("beforeunload", (event) => {

sendDataToServer();

})

The navigator.sendBeacon() function allows for asynchronous data transmission to the server, ensuring that data is sent even if the page is unloading or not currently visible, which is crucial for reliable server communication.

Code Snippet for Data Sending:

function sendDataToServer() {

var data = new Blob(['some data'], {type: 'application/json'});

navigator.sendBeacon(url, data);

}

The Innovation of fetchLater(): ✨

fetchLater() enables the browser to guarantee future request delivery, even if a user has closed the page or moved to another site.

Syntax and Parameters:

const fetchLaterResult = fetchLater(request, options);

The request can be a string URL or a Request instance, while options extends the capabilities of fetch(), including a timeout setting called activateAfter.

Using fetchLater(): 🔧

The simplest implementation involves just specifying a URL:

fetchLater('/endpoint/');

You can also include multiple options, such as custom headers or POST body data:

fetchLater('/endpoint/', {

method: 'GET',

cache: 'no-store',

mode: 'same-origin',

headers: {Authorization: 'SUPER_SECRET'},

});

Understanding the Options Parameter:

With the activateAfter option, requests can be automatically triggered after a defined timeout or when the page unloads, allowing for refined data analysis.

For example, in a scenario where users keep an application open throughout the day 🏢, setting a one-hour timeout ⏰ would allow for detailed data analysis while ensuring successful data transmission even if users exit the app 📤 at any point. You could subsequently set up another fetchLater() request for the next hour to ensure continuous data collection and transmission 🔄.

const hourInMilliseconds = 60 * 60 * 1000; // One hour in milliseconds

fetchLater('/endpoint/', {activateAfter: hourInMilliseconds});

Experimenting with fetchLater()

At present, fetchLater() is still in the experimental stage 🧪. To use the fetchLater() API, you can enable it by activating the Experimental Web Platform features flag at chrome://flags/#enable-experimental-web-platform-features.

In Summary 🚀

Thank you for engaging with the In Plain English community! Before you leave, remember to clap and follow the writer ️👏️️. Join us on X, LinkedIn, YouTube, Discord, and subscribe to our newsletter. Explore more of our content at Stackademic, CoFeed, Venture, and Cubed. Find additional resources at PlainEnglish.io.