Frontend: Improve browser capabilities check #5047

Signed-off-by: Michael Mayer <michael@photoprism.app>

AGENTS.md

@@ -45,7 +45,8 @@ Learn more: https://agents.md/
 
 ### Web Templates & Shared Assets
 
-- HTML entrypoints live under `assets/templates/`; key files are `index.gohtml`, `app.gohtml`, `app.js.gohtml`, and `splash.gohtml`. The SPA loader logic resides in `assets/static/js/app-loader.js` and is included via `app.js.gohtml`; it performs capability checks (Promise, fetch, AbortController, `script.noModule`, etc.) before appending `window.__CONFIG__.jsUri`.
+- HTML entrypoints live under `assets/templates/`; key files are `index.gohtml`, `app.gohtml`, `app.js.gohtml`, and `splash.gohtml`. The browser check logic resides in `assets/static/js/browser-check.js` and is included via `app.js.gohtml`; it performs capability checks (Promise, fetch, AbortController, `script.noModule`, etc.) before the main bundle executes.
+- To preserve the fallback messaging, keep the `<script>` order in `app.js.gohtml` so `browser-check.js` loads before `{{ .config.JsUri }}`. Do not add `defer` or `async` to the bundle tag unless you reintroduce a guarded loader.
 - The same loader partial is reused in private packages (`pro/assets/templates/index.gohtml`, `plus/assets/templates/index.gohtml`). Whenever you touch `app.js.gohtml` or change how we load the bundle, mirror the update by running commands such as `cd pro && sed -n '1,160p' assets/templates/index.gohtml` (and similarly for `plus`) to confirm they include the shared partial instead of hard-coding `<script src="{{ .config.JsUri }}">`.
 - Splash styles are defined in `frontend/src/css/splash.css`. Add new splash elements (for example `.splash-warning`) there so both public and private editions remain visually consistent.
 - Browser baseline: PhotoPrism requires Safari 13 / iOS 13 or current Chrome, Edge, or Firefox. Update the message in `assets/templates/app.js.gohtml` (and the matching CSS) if support changes.

CODEMAP.md

@@ -44,7 +44,7 @@ High-Level Package Map (Go)
 
 Templates & Static Assets
 - Entry HTML lives in `assets/templates/index.gohtml`, which includes the splash markup from `app.gohtml` and the SPA loader from `app.js.gohtml`.
-- The loader script is implemented in `assets/static/js/app-loader.js` (included via `app.js.gohtml`) and performs capability checks (Promise, fetch, AbortController, `script.noModule`, etc.) before injecting `window.__CONFIG__.jsUri`. Update this file (and the partial) in lockstep with the templates in private repos (`pro/assets/templates/index.gohtml`, `plus/assets/templates/index.gohtml`) because they import the same partial.
+- The browser check logic resides in `assets/static/js/browser-check.js` and is included via `app.js.gohtml`; it performs capability checks (Promise, fetch, AbortController, `script.noModule`, etc.) before the main bundle runs. Update this file (and the partial) in lockstep with the templates in private repos (`pro/assets/templates/index.gohtml`, `plus/assets/templates/index.gohtml`) because they import the same partial, and keep the `<script>` order so the check is executed first.
 - `splash.gohtml` renders the loading screen text while the bundle loads; styles are in `frontend/src/css/splash.css`.
 - When adjusting browser support messaging, update both the loader partial and splash styles so the warning message stays consistent across editions.
 

assets/static/js/browser-check.js

@@ -56,29 +56,11 @@
     }
   }
 
-  function loadBundle(jsUri) {
-    var script = document.createElement('script');
-    script.src = jsUri;
-    script.defer = true;
-    document.body.appendChild(script);
-  }
-
-  var config = window.__CONFIG__ || {};
-  var jsUri = config.jsUri || config.JsUri;
-
   var support = supportsModernJs();
   window.__PHOTOPRISM_SUPPORTS__ = support.ok;
 
   if (!support.ok) {
     window.__PHOTOPRISM_SUPPORTS_REASON__ = support.reason;
-    showUnsupportedMessage('PhotoPrism requires Safari 13 (iOS 13) or a current version of Chrome, Edge, or Firefox. Please update your browser or switch to a supported device.');
-    return;
+    showUnsupportedMessage('PhotoPrism requires a current version of Chrome, Safari, Edge, or Firefox. Please update your browser or switch to a supported device.');
   }
-
-  if (!jsUri) {
-    console.warn('PhotoPrism: Unable to find bundle URL (jsUri) in configuration.');
-    return;
-  }
-
-  loadBundle(jsUri);
 })();

assets/templates/app.js.gohtml

@@ -1 +1,2 @@
-<script defer src="{{ .config.StaticUri }}/js/app-loader.js"></script>
+<script src="{{ .config.StaticUri }}/js/browser-check.js"></script>
+<script src="{{ .config.JsUri }}"></script>

frontend/CODEMAP.md

@@ -28,7 +28,7 @@ Directory Map (src)
 
 Startup Templates & Splash Screen
 - The HTML shell is rendered from `assets/templates/index.gohtml` (and `pro/assets/templates/index.gohtml` / `plus/...`). Each template includes `app.gohtml` for the splash markup and `app.js.gohtml` to inject the bundle.
-- The loader script lives in `assets/static/js/app-loader.js` (included via `app.js.gohtml`) and checks for modern browser features (Promise, fetch, AbortController, `script.noModule`, etc.) before loading `window.__CONFIG__.jsUri`. Update the same files in private repos whenever the loader logic changes.
+- The browser check logic resides in `assets/static/js/browser-check.js` and is included via `app.js.gohtml`; it performs capability checks (Promise, fetch, AbortController, `script.noModule`, etc.) before the main bundle executes. Update the same files in private repos whenever the loader logic changes, and keep the script order so the check runs first.
 - Splash styles, including the `.splash-warning` fallback banner, live in `frontend/src/css/splash.css`. Keep styling changes there so public and private editions stay aligned.
 - Baseline support: Safari 13 / iOS 13 or current Chrome, Edge, or Firefox. If the support matrix changes, revise the warning text in `app.js.gohtml` and the CSS message accordingly.
 

frontend/src/css/splash.css

@@ -224,9 +224,9 @@ a.logo-large {
 .splash-warning {
     display: block;
     font-weight: 600;
-    color: #bbbbb5;
+    color: #bbbaba;
     margin: 0 auto;
-    max-width: 520px;
+    max-width: 580px;
     line-height: 1.5;
 }