Clarify WebTransport datagram writable support

docs: update WebTransport datagram writable example

Author: KirtiRamchandani

files/en-us/web/api/webtransport/datagrams/index.md

@@ -20,13 +20,20 @@ A {{domxref("WebTransportDatagramDuplexStream")}} object.
 
 ### Writing an outgoing datagram
 
-The {{domxref("WebTransportDatagramDuplexStream.writable")}} property returns a {{domxref("WritableStream")}} object that you can write data to using a writer, for transmission to the server:
+Use the `createWritable()` method if it is supported. Otherwise, fall back to the {{domxref("WebTransportDatagramDuplexStream/writable", "writable")}} property {{deprecated_inline}} {{non-standard_inline}}, which returns a {{domxref("WritableStream")}} object that you can write data to using a writer, for transmission to the server:
 
 ```js
-const writer = transport.datagrams.writable.getWriter();
+const writableStream =
+  typeof transport.datagrams.createWritable === "function"
+    ? transport.datagrams.createWritable()
+    : transport.datagrams.writable; // Deprecated and non-standard.
+
+const writer = writableStream.getWriter();
 const data1 = new Uint8Array([65, 66, 67]);
 const data2 = new Uint8Array([68, 69, 70]);
+await writer.ready;
 writer.write(data1);
+await writer.ready;
 writer.write(data2);
 ```
 

files/en-us/web/api/webtransportdatagramduplexstream/index.md

@@ -36,13 +36,21 @@ This is accessed via the {{domxref("WebTransport.datagrams")}} property.
 
 ### Writing outgoing datagrams
 
-The {{domxref("WebTransportDatagramDuplexStream.writable", "writable")}} property returns a {{domxref("WritableStream")}} object that you can write data to using a writer, for transmission to the server:
+This code uses the `createWritable()` method, if it is supported, to get a {{domxref("WebTransportDatagramsWritable")}} instance that can be used for writing data to the transport.
+Otherwise, it falls back to the {{domxref("WebTransportDatagramDuplexStream/writable", "writable")}} property {{deprecated_inline}} {{non-standard_inline}}, which returns a {{domxref("WritableStream")}} object that you can use instead:
 
 ```js
-const writer = transport.datagrams.writable.getWriter();
+const writableStream =
+  typeof transport.datagrams.createWritable === "function"
+    ? transport.datagrams.createWritable()
+    : transport.datagrams.writable; // Deprecated and non-standard.
+
+const writer = writableStream.getWriter();
 const data1 = new Uint8Array([65, 66, 67]);
 const data2 = new Uint8Array([68, 69, 70]);
+await writer.ready;
 writer.write(data1);
+await writer.ready;
 writer.write(data2);
 ```