feat: smaller page size and fix CSS error in safari and support relat…

…ive path

frontend/README.md

@@ -11,9 +11,9 @@ You can modify and regenerate the page in three step. The execution of the follo
 ```shell
 cd .\frontend\
 pnpm i
-node .\finalize.mjs
+pnpm build
 ```
 
-The `finalize.mjs` will compress and html and generate a new `WebSerialWebPage.h` in `../src` floder automatically.
+The `finalize.js` will compress and html and generate a new `WebSerialWebPage.h` in `../src` floder automatically.
 
 Then you can rebuild your program, the new page ought be embedded in the firmware as expected.

frontend/finalize.js

@@ -0,0 +1,66 @@
+let path = require('path');
+let fs = require('fs');
+const {minify} = require('html-minifier-terser');
+let gzipAsync = require('@gfx/zopfli').gzipAsync;
+
+const SAVE_PATH = '../src';
+
+function chunkArray(myArray, chunk_size) {
+    let index = 0;
+    let arrayLength = myArray.length;
+    let tempArray = [];
+    for (index = 0; index < arrayLength; index += chunk_size) {
+        let myChunk = myArray.slice(index, index + chunk_size);
+        tempArray.push(myChunk);
+    }
+    return tempArray;
+}
+
+function addLineBreaks(buffer) {
+    let data = '';
+    let chunks = chunkArray(buffer, 30);
+    chunks.forEach((chunk, index) => {
+        data += chunk.join(',');
+        if (index + 1 !== chunks.length) {
+            data += ',\n';
+        }
+    });
+    return data;
+}
+
+(async function(){
+    const indexHtml = fs.readFileSync(path.resolve(__dirname, './index.html')).toString();
+    const indexHtmlMinify = await minify(indexHtml, {
+        collapseWhitespace: true,
+        removeComments: true,
+        removeAttributeQuotes: true,
+        removeRedundantAttributes: true,
+        removeScriptTypeAttributes: true,
+        removeStyleLinkTypeAttributes: true,
+        useShortDoctype: true,
+        minifyCSS: true,
+        minifyJS: true,
+        sortAttributes: true, // 不会改变生成的html长度 但会优化压缩后体积
+        sortClassName: true, // 不会改变生成的html长度 但会优化压缩后体积
+    });
+    console.log(`[finalize.js] Minified index.html | Original Size: ${(indexHtml.length / 1024).toFixed(2) }KB | Minified Size: ${(indexHtmlMinify.length / 1024).toFixed(2) }KB`);
+
+    try{
+        const GZIPPED_INDEX = await gzipAsync(indexHtmlMinify, { numiterations: 15 });
+
+        const FILE = 
+`#ifndef _webserial_webapge_h
+#define _webserial_webpage_h
+const uint32_t WEBSERIAL_HTML_SIZE = ${GZIPPED_INDEX.length};
+const uint8_t WEBSERIAL_HTML[] PROGMEM = { 
+${ addLineBreaks(GZIPPED_INDEX) }
+};
+#endif
+`;
+
+        fs.writeFileSync(path.resolve(__dirname, SAVE_PATH+'/WebSerialWebPage.h'), FILE);
+        console.log(`[finalize.js] Compressed Bundle into WebSerialWebPage.h header file | Total Size: ${(GZIPPED_INDEX.length / 1024).toFixed(2) }KB`)
+    }catch(err){
+        return console.error(err);
+    }
+  })();

frontend/index.html

@@ -87,13 +87,11 @@
             flex-direction: column;
             justify-content: center;
             align-items: center;
-            height: 100vh;
+            height: 100dvh;
         }
 
         .main .pannel {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
+            position: relative;
             border: #fff;
             border-style: solid;
             border-width: 0.5rem;
@@ -102,7 +100,6 @@
             max-width: 45rem;
             width: calc(100% - 1rem);
             font-size: medium;
-            margin: 0 10px 0;
         }
 
         .pannel button {
@@ -216,7 +213,7 @@ <h1 />
     </div>
 </body>
 <script>
-    let gateway = `ws://${window.location.hostname + window.location.port + window.location.pathname}/webserialws`;
+    let gateway = `ws://${window.location.host+window.location.pathname}ws`;
     let websocket;
     let textArea = document.getElementById("record");
     let enableFlowLock = false;

frontend/package.json

@@ -1,5 +1,9 @@
 {
+	"scripts": {
+		"build": "node finalize.js"
+	},
 	"dependencies": {
-		"@gfx/zopfli": "^1.0.15"
+		"@gfx/zopfli": "^1.0.15",
+		"html-minifier-terser": "^7.1.0"
 	}
 }

src/WebSerial.cpp

@@ -11,7 +11,10 @@ void WebSerialClass::begin(AsyncWebServer *server, const char *url) {
     request->send(response);
   });
 
-  _ws = new AsyncWebSocket("/webserialws");
+
+  String backendUrl = url;
+  backendUrl.concat("ws");
+  _ws = new AsyncWebSocket(backendUrl);
   _ws->onEvent([&](AsyncWebSocket *server, AsyncWebSocketClient *client,
                    AwsEventType type, void *arg, uint8_t *data,
                    size_t len) -> void {