From 8573a65f940b15452f7acf4c26a5a958ad396067 Mon Sep 17 00:00:00 2001
From: gopro2027 <gopro2027@gmail.com>
Date: Sun, 22 Jun 2025 13:53:55 -0400
Subject: [PATCH] Updated documentation with info on generating manifests
 (#602)

* Updated documentation with info on generating manifests and version management

* Apply suggestions from code review

---------

Co-authored-by: Paulus Schoutsen <balloob@gmail.com>
---
 index.html | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/index.html b/index.html
index 445306e..ebb931a 100644
--- a/index.html
+++ b/index.html
@@ -552,6 +552,35 @@ button.overrides = {
 };</pre
       >
 
+      <h4>Generating a manifest dynamically &amp; version management</h4>
+      <p>
+        Alternatively to a static manifest JSON file, you can generate a Blob URL of a JSON object using <a href="https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL_static"><code>URL.createObjectURL</code></a> to use as the manifest url. This can be useful in situations where you have many firmware bin files, e.g. previous software versions, where you don't want to have a different static manifest json file for each bin. If you are hosting on github.io, this can be paired nicely with <a href="https://docs.github.com/en/rest/repos/contents?apiVersion=2022-11-28#get-contents">github's REST API</a> to view all the bin files inside a folder.
+      </p>
+      <pre>
+const manifest = {
+    "name": name,
+    "version": version,
+    "funding_url": funding_url,
+    "new_install_prompt_erase": true,
+    "builds": [
+        {
+            "chipFamily": "ESP32",
+            "improv": false,
+            "parts": [
+                { "path": dependenciesDir+"bootloader.bin", "offset": 4096 },
+                { "path": dependenciesDir+"partitions.bin", "offset": 32768 },
+                { "path": dependenciesDir+"boot_app0.bin", "offset": 57344 },
+                { "path": firmwareFile, "offset": 65536 }
+            ]
+        }
+    ]
+}
+
+const json = JSON.stringify(manifest);
+const blob = new Blob([json], {type: "application/json"});
+document.querySelector("esp-web-install-button").manifest = URL.createObjectURL(blob);
+      </pre>
+
       <h3 id="customize">Customizing the look and feel</h3>
       <p>
         You can change the colors of the default UI elements with CSS custom