PendingBeacon on top of fetchLater

pending-beacon.js

class UserlandPendingBeacon {
  #abortController = null;

  // Let's imagine it's a list of plain objects.
  #pendingEntries = [];
  
  // URL, headers, defer options etc
  #requestInit;

  constructor(requestInit) {
    this.#requestInit = requestInit;
    this.#pendingEntries = [];
  }

  // This will abort an ongoing fetch, and will schedule a new deferred fetch
  send(entries) { 
     if (this.#abortController)
        this.#abortController.abort();

    this.#pendingEntries = [...this.#pendingEntries, ...entries];

    this.#abortController = new AbortController();
    fetchLater({signal: this.#abortController.signal, body: JSON.stringify(this.#pendingEntries), ...this.#requestInit})
       .then(() => {
          this.#abortController = null;
          this.#pendingEntries = [];
       });
    
  }
}