Skip to content
OpenPWA

WebTransport: HTTP/3 streams and datagrams from the browser

In one line: WebTransport transmits data between a client and a server over HTTP/3, offering reliable transport via streams and unreliable, UDP-like transport via datagrams over a single connection — positioned by MDN as a modern update to WebSocket.

Connecting

Section titled “Connecting”

Pass an HTTP/3 server’s URL to the WebTransport() constructor; the scheme must be https, and the port number must be given explicitly. Once the ready promise resolves, the connection can be used.

const url = "https://example.com:4433/webtransport";
const transport = new WebTransport(url);
await transport.ready;

Datagrams vs streams

Section titled “Datagrams vs streams”
  • Datagrams — the read-only datagrams property returns a WebTransportDatagramDuplexStream used to send and receive datagrams: unreliable transmission, where neither delivery nor arrival order is guaranteed. MDN notes this suits cases like regular game-state updates, where each message supersedes the last and order doesn’t matter.
  • Bidirectional streams — createBidirectionalStream() asynchronously opens a WebTransportBidirectionalStream, whose readable and writable properties return a WebTransportReceiveStream and a WebTransportSendStream for reading from and writing to the server.
  • Unidirectional streams — createUnidirectionalStream() asynchronously opens a WritableStream used to write to the server.
  • Server-opened streams — incomingBidirectionalStreams returns a ReadableStream of server-opened WebTransportBidirectionalStream objects.
async function setUpBidirectional(transport) {
  const stream = await transport.createBidirectionalStream();
  const readable = stream.readable; // WebTransportReceiveStream
  const writable = stream.writable; // WebTransportSendStream
  return { readable, writable };
}

Browser & ecosystem support

Section titled “Browser & ecosystem support”
Engine Where it ships
Chrome (desktop & Android) Since Chrome 97
Edge (desktop) Mirrors Chrome’s support
Firefox (desktop & Android) Since Firefox 114
Safari Since Safari 26.4

Data per the MDN browser-compat-data entry for the WebTransport interface, which records desktop Edge as mirroring Chrome’s support.

Feature detection

Section titled “Feature detection”
function connectTransport(url) {
  if (!("WebTransport" in window)) {
    // WebTransport is unsupported here — the caller decides what to do next
    // (e.g. open a WebSocket instead); this function does not create one.
    return null;
  }
  return new WebTransport(url);
}

Practical checklist

Section titled “Practical checklist”
  • Check "WebTransport" in window before constructing one — per the table above, older engine versions (and pre-26.4 Safari) don’t have it.
  • Await the ready promise before using the connection.
  • The URL scheme must be https and the port must be explicit — the constructor targets an HTTP/3 server.
  • Use datagrams only for data where losing or reordering a message is acceptable; use streams when delivery and order must be guaranteed.
  • Have a plan for engines without WebTransport support, since the table above shows it isn’t universal.

Where to go next

Section titled “Where to go next”