Developing a Custom Offline Queue for HTTP Requests

Develop an HTTP interceptor that queues outgoing requests when offline and processes them when connectivity is restored.

// Checks if the navigator is online
function isOnline() {
    return navigator.onLine;
}

Function to check if the browser has internet connectivity.

// Queue to hold the HTTP requests
const requestQueue = [];

// Function to add the request to the queue
function enqueueRequest(request) {
    requestQueue.push(request);
}

A queue to store offline requests and a function to add a request to the queue.

// Function to process the queue
function processQueue() {
    while (requestQueue.length > 0 && isOnline()) {
        const request = requestQueue.shift();
        // Perform the HTTP request
        makeHttpRequest(request);
    }
}

Function to process the queued requests once connectivity is restored.

// Function to make the HTTP request
function makeHttpRequest(request) {
    // Mocking the HTTP request with a console log
    console.log('Making HTTP Request:', request);
    // Here you would have the actual fetch/ajax/xhr call
}

// Add an event listener to listen for when the connection state changes
window.addEventListener('online', processQueue);

A mock function to simulate making an HTTP request and an event listener to process the queue once online.

// HTTP Interceptor to decide what to do with outgoing requests
function httpInterceptor(request) {
    if (isOnline()) {
        makeHttpRequest(request);
    } else {
        enqueueRequest(request);
    }
}

The HTTP interceptor function to call for each outgoing request to determine whether to send it immediately or queue it.