Editorial: Add feature and protocol detection examples

index.html

@@ -190,6 +190,21 @@ <h2>
         The following examples illustrate how the Digital Credentials API can
         be used to request and issue digital credentials.
       </p>
+      <h3>
+        Feature Detection
+      </h3>
+      <p>
+        Before using the Digital Credentials API, it's important to check if
+        the user agent supports the necessary features. This can be done
+        using the following code:
+      </p>
+      <pre class="example js" title="Checking for API support">
+        if (typeof DigitalCredential !== "undefined") {
+          // Digital Credentials API is supported
+        } else {
+          // Digital Credentials API is not supported
+        }
+      </pre>
       <h3>
         Requesting a digital credential
       </h3>
@@ -207,6 +222,12 @@ <h3>
         &lt;script&gt;
           const button = document.querySelector("button");
           button.addEventListener("click", async () =&gt; {
+            // Check for DC API and protocol support
+            if (!window.DigitalCredential?.userAgentAllowsProtocol("example-protocol")) {
+              // DC API not supported. Fall back to a different verification method.
+              showTraditionalVerificationForm();
+              return;
+            }
             try {
               const credential = await navigator.credentials.get({
                 digital: {
@@ -217,7 +238,7 @@ <h3>
                 }
               });
 
-              // Post it back to the server for decryption and verification
+              // Post it back to the verifier server for decryption and verification
               const response = await fetch("/verify-credential", {
                 method: "POST",
                 headers: {
@@ -263,6 +284,12 @@ <h3>
         &lt;script&gt;
           const button = document.querySelector("button");
           button.addEventListener("click", async () =&gt; {
+            // Check for DC API and protocol support
+            if (!window.DigitalCredential?.userAgentAllowsProtocol("example-issuance-protocol")) {
+              // DC API not supported. Fall back to a different issuance method.
+              showTraditionalIssuanceForm();
+              return;
+            }
             try {
               const credential = await navigator.credentials.create({
                 digital: {
@@ -315,6 +342,42 @@ <h3>
                 allow="digital-credentials-create"&gt;
         &lt;/iframe&gt;
       </pre>
+      <h3>
+        Using the `userAgentAllowsProtocol()` static method
+      </h3>
+      <p>
+        The `userAgentAllowsProtocol()` static method can be used to check if
+        the user agent (browser) allows a specific protocol for digital
+        credential issuance or presentation. This is useful for feature
+        detection and ensuring that the appropriate methods are used based on
+        the capabilities of the user's browser.
+      </p>
+      <pre class="example javascript" title=
+      "Using the userAgentAllowsProtocol() static method">
+        if (DigitalCredential.userAgentAllowsProtocol("example-issuance-protocol")) {
+          // DC API supported. Proceed with issuance or presentation.
+        } else {
+          // DC API not supported. Fall back to a different issuance method.
+          // For example, use a traditional HTML form-based approach.
+          showTraditionalIssuanceForm();
+        }
+      </pre>
+      <p>
+        Alternatively, one can check for support of multiple protocols:
+      </p>
+      <pre class="example javascript" title=
+      "Using the userAgentAllowsProtocol() static method">
+        const protocols = [
+          "example-issuance-protocol",
+          "another-issuance-protocol"
+        ];
+        const supportedProtocols = protocols.filter(DigitalCredential.userAgentAllowsProtocol);
+        if (supportedProtocols.length &gt; 0) {
+          // At least one protocol is supported. Proceed with issuance.
+        } else {
+          // No DC API supported. Fall back to a different issuance method.
+        }
+      </pre>
     </section><!--
     // MARK: Scope
     -->