PWA Improvements

docs/source/conf.py

@@ -72,7 +72,7 @@
 # so a file named "default.css" will overwrite the builtin "default.css".
 # html_static_path = ['_static']
 
-html_logo = os.path.join(root_dir, 'sunshine.png')
+html_logo = os.path.join(root_dir, 'src_assets', 'common', 'assets', 'web', 'images', 'sunshine.svg')
 
 # The theme to use for HTML and HTML Help pages.  See the documentation for
 # a list of builtin themes.

src/confighttp.cpp

@@ -230,44 +230,23 @@ void getTroubleshootingPage(resp_https_t response, req_https_t request) {
   response->write(header + content);
 }
 
-void getFaviconImage(resp_https_t response, req_https_t request) {
-  // todo - combine function with getSunshineLogoImage and possibly getNodeModules
-  // todo - use mime_types map
-  print_req(request);
-
-  std::ifstream in(WEB_DIR "images/favicon.ico", std::ios::binary);
-  SimpleWeb::CaseInsensitiveMultimap headers;
-  headers.emplace("Content-Type", "image/x-icon");
-  response->write(SimpleWeb::StatusCode::success_ok, in, headers);
-}
-
-void getSunshineLogoImage(resp_https_t response, req_https_t request) {
-  // todo - combine function with getFaviconImage and possibly getNodeModules
-  // todo - use mime_types map
-  print_req(request);
-
-  std::ifstream in(WEB_DIR "images/logo-sunshine-45.png", std::ios::binary);
-  SimpleWeb::CaseInsensitiveMultimap headers;
-  headers.emplace("Content-Type", "image/png");
-  response->write(SimpleWeb::StatusCode::success_ok, in, headers);
-}
-
 bool isChildPath(fs::path const &base, fs::path const &query) {
   auto relPath = fs::relative(base, query);
   return *(relPath.begin()) != fs::path("..");
 }
 
-void getNodeModules(resp_https_t response, req_https_t request) {
+void getServerAsset(resp_https_t response, req_https_t request) {
   print_req(request);
   fs::path webDirPath(WEB_DIR);
   fs::path nodeModulesPath(webDirPath / "node_modules");
+  fs::path imagesPath(webDirPath / "images");
 
   // .relative_path is needed to shed any leading slash that might exist in the request path
   auto filePath = fs::weakly_canonical(webDirPath / fs::path(request->path).relative_path());
 
-  // Don't do anything if file does not exist or is outside the node_modules directory
-  if(!isChildPath(filePath, nodeModulesPath)) {
-    BOOST_LOG(warning) << "Someone requested a path " << filePath << " that is outside the node_modules folder";
+  // Don't do anything if file does not exist or is outside the web directory
+  if(!isChildPath(filePath, nodeModulesPath) && !isChildPath(filePath, imagesPath)) {
+    BOOST_LOG(warning) << "Someone requested a path " << filePath << " that is outside the web directory";
     response->write(SimpleWeb::StatusCode::client_error_bad_request, "Bad Request");
   }
   else if(!fs::exists(filePath)) {
@@ -706,33 +685,31 @@ void start() {
   auto port_https = map_port(PORT_HTTPS);
 
   https_server_t server { config::nvhttp.cert, config::nvhttp.pkey };
-  server.default_resource["GET"]                           = not_found;
-  server.resource["^/$"]["GET"]                            = getIndexPage;
-  server.resource["^/pin$"]["GET"]                         = getPinPage;
-  server.resource["^/apps$"]["GET"]                        = getAppsPage;
-  server.resource["^/clients$"]["GET"]                     = getClientsPage;
-  server.resource["^/config$"]["GET"]                      = getConfigPage;
-  server.resource["^/password$"]["GET"]                    = getPasswordPage;
-  server.resource["^/welcome$"]["GET"]                     = getWelcomePage;
-  server.resource["^/troubleshooting$"]["GET"]             = getTroubleshootingPage;
-  server.resource["^/api/pin$"]["POST"]                    = savePin;
-  server.resource["^/api/apps$"]["GET"]                    = getApps;
-  server.resource["^/api/logs$"]["GET"]                    = getLogs;
-  server.resource["^/api/apps$"]["POST"]                   = saveApp;
-  server.resource["^/api/config$"]["GET"]                  = getConfig;
-  server.resource["^/api/config$"]["POST"]                 = saveConfig;
-  server.resource["^/api/restart$"]["POST"]                = restart;
-  server.resource["^/api/password$"]["POST"]               = savePassword;
-  server.resource["^/api/apps/([0-9]+)$"]["DELETE"]        = deleteApp;
-  server.resource["^/api/clients/unpair$"]["POST"]         = unpairAll;
-  server.resource["^/api/apps/close$"]["POST"]             = closeApp;
-  server.resource["^/api/covers/upload$"]["POST"]          = uploadCover;
-  server.resource["^/images/favicon.ico$"]["GET"]          = getFaviconImage;
-  server.resource["^/images/logo-sunshine-45.png$"]["GET"] = getSunshineLogoImage;
-  server.resource["^/node_modules\\/.+$"]["GET"]           = getNodeModules;
-  server.config.reuse_address                              = true;
-  server.config.address                                    = "0.0.0.0"s;
-  server.config.port                                       = port_https;
+  server.default_resource["GET"]                            = not_found;
+  server.resource["^/$"]["GET"]                             = getIndexPage;
+  server.resource["^/pin$"]["GET"]                          = getPinPage;
+  server.resource["^/apps$"]["GET"]                         = getAppsPage;
+  server.resource["^/clients$"]["GET"]                      = getClientsPage;
+  server.resource["^/config$"]["GET"]                       = getConfigPage;
+  server.resource["^/password$"]["GET"]                     = getPasswordPage;
+  server.resource["^/welcome$"]["GET"]                      = getWelcomePage;
+  server.resource["^/troubleshooting$"]["GET"]              = getTroubleshootingPage;
+  server.resource["^/api/pin$"]["POST"]                     = savePin;
+  server.resource["^/api/apps$"]["GET"]                     = getApps;
+  server.resource["^/api/logs$"]["GET"]                     = getLogs;
+  server.resource["^/api/apps$"]["POST"]                    = saveApp;
+  server.resource["^/api/config$"]["GET"]                   = getConfig;
+  server.resource["^/api/config$"]["POST"]                  = saveConfig;
+  server.resource["^/api/restart$"]["POST"]                 = restart;
+  server.resource["^/api/password$"]["POST"]                = savePassword;
+  server.resource["^/api/apps/([0-9]+)$"]["DELETE"]         = deleteApp;
+  server.resource["^/api/clients/unpair$"]["POST"]          = unpairAll;
+  server.resource["^/api/apps/close$"]["POST"]              = closeApp;
+  server.resource["^/api/covers/upload$"]["POST"]           = uploadCover;
+  server.resource["^/(node_modules)|(images)\\/.+$"]["GET"] = getServerAsset;
+  server.config.reuse_address                               = true;
+  server.config.address                                     = "0.0.0.0"s;
+  server.config.port                                        = port_https;
 
   auto accept_and_run = [&](auto *server) {
     try {

src_assets/common/assets/web/header-no-nav.html

@@ -4,7 +4,22 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
     <title>Sunshine</title>
+    <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="194x194" href="/images/favicon-194x194.png">
+    <link rel="icon" type="image/png" sizes="192x192" href="/images/android-chrome-192x192.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
+    <link rel="manifest" href="/images/site.webmanifest">
+    <link rel="mask-icon" href="/images/safari-pinned-tab.svg" color="#f89a1c">
+    <link rel="shortcut icon" href="/images/favicon.ico">
+    <meta name="apple-mobile-web-app-title" content="Sunshine">
+    <meta name="application-name" content="Sunshine">
+    <meta name="msapplication-TileColor" content="#303436">
+    <meta name="msapplication-TileImage" content="/images/mstile-144x144.png">
+    <meta name="msapplication-config" content="/images/browserconfig.xml">
+    <meta name="theme-color" content="#ffc400">
     <link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
     <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="/node_modules/vue/dist/vue.min.js"></script>

src_assets/common/assets/web/header.html

@@ -4,8 +4,23 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
     <title>Sunshine</title>
     <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
+    <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="194x194" href="/images/favicon-194x194.png">
+    <link rel="icon" type="image/png" sizes="192x192" href="/images/android-chrome-192x192.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
+    <link rel="manifest" href="/images/site.webmanifest">
+    <link rel="mask-icon" href="/images/safari-pinned-tab.svg" color="#f89a1c">
+    <link rel="shortcut icon" href="/images/favicon.ico">
+    <meta name="apple-mobile-web-app-title" content="Sunshine">
+    <meta name="application-name" content="Sunshine">
+    <meta name="msapplication-TileColor" content="#303436">
+    <meta name="msapplication-TileImage" content="/images/mstile-144x144.png">
+    <meta name="msapplication-config" content="/images/browserconfig.xml">
+    <meta name="theme-color" content="#ffc400">
     <link href="/node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
     <link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
     <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
@@ -19,7 +34,7 @@
     >
       <div class="container-fluid">
         <a class="navbar-brand" href="/" title="Sunshine">
-          <img src="/images/logo-sunshine-45.png" height="45" alt="Sunshine">
+          <img src="/images/sunshine.svg" height="45" alt="Sunshine">
         </a>
         <button
           class="navbar-toggler"

src_assets/common/assets/web/images/browserconfig.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square70x70logo src="/images/mstile-70x70.png"/>
+            <square150x150logo src="/images/mstile-150x150.png"/>
+            <square310x310logo src="/images/mstile-310x310.png"/>
+            <wide310x150logo src="/images/mstile-310x150.png"/>
+            <TileColor>#303436</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

src_assets/common/assets/web/images/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "Sunshine",
+    "short_name": "Sunshine",
+    "icons": [
+        {
+            "src": "/images/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/images/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffc400",
+    "background_color": "#ffc400",
+    "display": "standalone"
+}