Feature: High resolution Icon and PWA (Progressive Web App) functionality

Fix: #1289

platformio.ini

@@ -22,7 +22,6 @@ framework = arduino
 platform = espressif32@6.3.2
 
 build_flags =
-    -DCOMPONENT_EMBED_FILES=webapp_dist/index.html.gz:webapp_dist/zones.json.gz:webapp_dist/favicon.ico:webapp_dist/favicon.png:webapp_dist/js/app.js.gz
     -DPIOENV=\"$PIOENV\"
     -Wall -Wextra -Werror
     -std=c++17
@@ -45,6 +44,14 @@ extra_scripts =
 
 board_build.partitions = partitions_custom.csv
 board_build.filesystem = littlefs
+board_build.embed_files =
+    webapp_dist/index.html.gz
+    webapp_dist/zones.json.gz
+    webapp_dist/favicon.ico
+    webapp_dist/favicon.png
+    webapp_dist/js/app.js.gz
+    webapp_dist/site.webmanifest
+
 monitor_filters = esp32_exception_decoder, time, log2file, colorize
 monitor_speed = 115200
 upload_protocol = esptool

src/WebApi_webapp.cpp

@@ -1,6 +1,6 @@
 // SPDX-License-Identifier: GPL-2.0-or-later
 /*
- * Copyright (C) 2022 Thomas Basler and others
+ * Copyright (C) 2022-2023 Thomas Basler and others
  */
 #include "WebApi_webapp.h"
 
@@ -9,12 +9,14 @@ extern const uint8_t file_favicon_ico_start[] asm("_binary_webapp_dist_favicon_i
 extern const uint8_t file_favicon_png_start[] asm("_binary_webapp_dist_favicon_png_start");
 extern const uint8_t file_zones_json_start[] asm("_binary_webapp_dist_zones_json_gz_start");
 extern const uint8_t file_app_js_start[] asm("_binary_webapp_dist_js_app_js_gz_start");
+extern const uint8_t file_site_webmanifest_start[] asm("_binary_webapp_dist_site_webmanifest_start");
 
 extern const uint8_t file_index_html_end[] asm("_binary_webapp_dist_index_html_gz_end");
 extern const uint8_t file_favicon_ico_end[] asm("_binary_webapp_dist_favicon_ico_end");
 extern const uint8_t file_favicon_png_end[] asm("_binary_webapp_dist_favicon_png_end");
 extern const uint8_t file_zones_json_end[] asm("_binary_webapp_dist_zones_json_gz_end");
 extern const uint8_t file_app_js_end[] asm("_binary_webapp_dist_js_app_js_gz_end");
+extern const uint8_t file_site_webmanifest_end[] asm("_binary_webapp_dist_site_webmanifest_end");
 
 void WebApiWebappClass::init(AsyncWebServer* server)
 {
@@ -54,6 +56,11 @@ void WebApiWebappClass::init(AsyncWebServer* server)
         request->send(response);
     });
 
+    _server->on("/site.webmanifest", HTTP_GET, [](AsyncWebServerRequest* request) {
+        AsyncWebServerResponse* response = request->beginResponse_P(200, "application/json", file_site_webmanifest_start, file_site_webmanifest_end - file_site_webmanifest_start);
+        request->send(response);
+    });
+
     _server->on("/js/app.js", HTTP_GET, [](AsyncWebServerRequest* request) {
 #ifdef AUTO_GIT_HASH
         // check client If-None-Match header vs ETag/AUTO_GIT_HASH

webapp/index.html

@@ -5,6 +5,7 @@
     <link rel="icon" href="/favicon.ico" />
     <link rel="shortcut icon" type="image/png" href="/favicon.png">
     <link rel="apple-touch-icon" href="/favicon.png">
+    <link rel="manifest" href='/site.webmanifest' />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>OpenDTU</title>
   </head>

webapp/public/site.webmanifest

@@ -0,0 +1,13 @@
+{
+    "name": "OpenDTU",
+    "short_name": "OpenDTU",
+    "display": "standalone",
+    "orientation": "portrait",
+    "icons": [
+        {
+            "src": "/favicon.png",
+            "sizes": "144x144",
+            "type": "image/png"
+        }
+    ]
+}