Web: installable as an app, with Install in the File menu (#1233)

The web build ships a manifest so the browser can install it as an app, and offers Install in the File menu while the browser allows it.

apps/solidcraft-web/Cargo.toml

@@ -29,5 +29,5 @@ web-sys = { version = "0.3", features = [
     "Window", "Document", "Element", "HtmlElement", "HtmlCanvasElement", "Location", "Navigator", "StorageManager",
     "FileSystemHandle", "FileSystemDirectoryHandle", "FileSystemFileHandle", "FileSystemGetFileOptions", "FileSystemWritableFileStream",
     "WritableStream", "File", "FileList", "Blob", "BlobPropertyBag", "Url", "HtmlAnchorElement", "HtmlInputElement", "Storage",
-    "BeforeUnloadEvent", "Event", "EventTarget", "Response",
+    "BeforeUnloadEvent", "Event", "EventTarget", "Response", "MediaQueryList",
 ] }

apps/solidcraft-web/index.html

@@ -23,6 +23,15 @@
   <link data-trunk rel="copy-file" href="../../assets/fonts/biz-udp-gothic/BIZUDPGothic-Regular.ttf" data-target-path="fonts" />
   <link data-trunk rel="copy-file" href="../../assets/fonts/biz-udp-gothic/OFL.txt" data-target-path="fonts" />
   <link data-trunk rel="css" href="../../assets/styles/web/loading.css" />
+  <!-- Installable as an app (manifest.webmanifest); the icons are the Linux exports of the app mark. -->
+  <meta name="theme-color" content="#343840">
+  <link rel="manifest" href="manifest.webmanifest">
+  <link rel="icon" type="image/png" sizes="32x32" href="icons/32x32/ai.storyteller.solidcraft.png">
+  <link rel="apple-touch-icon" href="icons/256x256/ai.storyteller.solidcraft.png">
+  <link data-trunk rel="copy-file" href="manifest.webmanifest" />
+  <link data-trunk rel="copy-file" href="../../assets/icons/app/linux/exports/hicolor/32x32/apps/ai.storyteller.solidcraft.png" data-target-path="icons/32x32" />
+  <link data-trunk rel="copy-file" href="../../assets/icons/app/linux/exports/hicolor/256x256/apps/ai.storyteller.solidcraft.png" data-target-path="icons/256x256" />
+  <link data-trunk rel="copy-file" href="../../assets/icons/app/linux/exports/hicolor/512x512/apps/ai.storyteller.solidcraft.png" data-target-path="icons/512x512" />
 </head>
 <body>
   <canvas id="solidcraft_canvas"></canvas>
@@ -32,6 +41,10 @@
     if ("serviceWorker" in navigator) {
       addEventListener("load", () => navigator.serviceWorker.register("sw.js").catch(() => {}));
     }
+    // Install as an app: the browser's offer can come before the app runs, so it is kept here for
+    // the app's File ▸ Install app… item (src/install.rs). Installed, the browser makes no more offers.
+    addEventListener("beforeinstallprompt", (e) => { e.preventDefault(); window.solidcraftInstall = e; });
+    addEventListener("appinstalled", () => { window.solidcraftInstall = null; });
   </script>
 </body>
 </html>

apps/solidcraft-web/manifest.webmanifest

@@ -0,0 +1,16 @@
+{
+  "name": "SolidCraft",
+  "short_name": "SolidCraft",
+  "description": "Open-source parametric CAD built in Rust.",
+  "start_url": "./",
+  "scope": "./",
+  "display": "standalone",
+  "background_color": "#e8ebf0",
+  "theme_color": "#343840",
+  "categories": ["productivity", "utilities"],
+  "icons": [
+    { "src": "icons/32x32/ai.storyteller.solidcraft.png", "sizes": "32x32", "type": "image/png" },
+    { "src": "icons/256x256/ai.storyteller.solidcraft.png", "sizes": "256x256", "type": "image/png" },
+    { "src": "icons/512x512/ai.storyteller.solidcraft.png", "sizes": "512x512", "type": "image/png" }
+  ]
+}

apps/solidcraft-web/src/install.rs

@@ -0,0 +1,67 @@
+//! Install as an app (`solidcraft_ui_egui::install`). The browser offers it with a
+//! `beforeinstallprompt` event, which can come before this code runs: index.html keeps the event
+//! as `window.solidcraftInstall` (and drops it once the app is installed). The offer is good for
+//! one prompt; a browser that is still willing makes a new one later. Safari makes no offer: it
+//! gets its steps, unless the app is already running installed.
+
+use solidcraft_ui_egui::install::{InstallApp, Offer, safari_steps};
+use wasm_bindgen::{JsCast as _, JsValue};
+
+/// Where index.html keeps the browser's offer.
+const OFFER: &str = "solidcraftInstall";
+
+/// The browser's offer, kept by index.html (None: none, or it was used).
+fn offer() -> Option<js_sys::Object> {
+    let window = web_sys::window()?;
+    js_sys::Reflect::get(&window, &OFFER.into()).ok()?.dyn_into().ok()
+}
+
+/// Show the browser's install prompt (from the File menu click, so the page may).
+fn prompt() {
+    let Some(offer) = offer() else { return };
+    if let Some(window) = web_sys::window() {
+        let _ = js_sys::Reflect::set(&window, &OFFER.into(), &JsValue::NULL);
+    }
+    let shown = js_sys::Reflect::get(&offer, &"prompt".into())
+        .and_then(|f| f.dyn_into::<js_sys::Function>().map_err(JsValue::from))
+        .and_then(|f| f.call0(&offer))
+        .and_then(|p| p.dyn_into::<js_sys::Promise>().map_err(JsValue::from));
+    match shown {
+        // Accepted or dismissed, the browser handles it; a refusal is only logged.
+        Ok(p) => wasm_bindgen_futures::spawn_local(async move {
+            if let Err(e) = wasm_bindgen_futures::JsFuture::from(p).await {
+                log::warn!("install prompt: {e:?}");
+            }
+        }),
+        Err(e) => log::warn!("install prompt: {e:?}"),
+    }
+}
+
+/// The page runs as the installed app (its own window, or from the Home Screen on iOS).
+fn running_installed(window: &web_sys::Window) -> bool {
+    let standalone = window.match_media("(display-mode: standalone)").ok().flatten().is_some_and(|m| m.matches());
+    let home_screen = js_sys::Reflect::get(&window.navigator(), &"standalone".into()).ok().and_then(|v| v.as_bool()).unwrap_or(false);
+    standalone || home_screen
+}
+
+/// The host service for File ▸ Install app…; the UI is drawn again whenever the browser
+/// makes or withdraws its offer (even with nothing else happening).
+pub fn service(ctx: &egui::Context) -> InstallApp {
+    // Safari's steps, decided once: the browser and the way the page runs don't change.
+    let steps = web_sys::window().filter(|w| !running_installed(w)).and_then(|w| {
+        let nav = w.navigator();
+        let vendor = js_sys::Reflect::get(&nav, &"vendor".into()).ok().and_then(|v| v.as_string()).unwrap_or_default();
+        safari_steps(&nav.user_agent().unwrap_or_default(), &vendor, nav.max_touch_points())
+    });
+    if let Some(window) = web_sys::window() {
+        for event in ["beforeinstallprompt", "appinstalled"] {
+            let ctx = ctx.clone();
+            let redraw = wasm_bindgen::closure::Closure::<dyn FnMut()>::new(move || ctx.request_repaint());
+            let _ = window.add_event_listener_with_callback(event, redraw.as_ref().unchecked_ref());
+            // The listener lives as long as the page.
+            redraw.forget();
+        }
+    }
+    let offered = move || if offer().is_some() { Some(Offer::Prompt) } else { steps.map(Offer::Steps) };
+    InstallApp { offer: Box::new(offered), prompt: Box::new(prompt) }
+}

apps/solidcraft-web/src/main.rs

@@ -2,12 +2,14 @@
 //!
 //! Runs the same [`solidcraft_ui_egui::SolveApp`] as the desktop app through eframe's web runner
 //! (wgpu: WebGPU where available, WebGL2 otherwise). Build with `trunk build --release` from this
-//! directory (output in `dist/web`). URL flags: `?webgl` forces WebGL2, `?sample` opens the
-//! sample part.
+//! directory (output in `dist/web`). URL flags: `?webgl` forces WebGL2 (remembered until
+//! `?webgpu`), `?sample` opens the sample part.
 #![deny(clippy::unwrap_used, clippy::expect_used, clippy::panic, clippy::unimplemented, clippy::todo, clippy::unreachable)]
 
 #[cfg(target_arch = "wasm32")]
 mod files;
+#[cfg(target_arch = "wasm32")]
+mod install;
 
 #[cfg(target_arch = "wasm32")]
 mod web {
@@ -398,6 +400,29 @@ mod web {
         web_sys::window().and_then(|w| w.location().search().ok()).unwrap_or_default()
     }
 
+    /// Where `?webgl` is remembered. The installed app starts from its manifest's start URL, which
+    /// has no query, so the choice has to outlive the page it was made on.
+    const WEBGL_KEY: &str = "solidcraft.webgl";
+
+    /// Render with WebGL2: asked for now (`?webgl`, remembered) or before (until `?webgpu`).
+    fn webgl() -> bool {
+        let storage = web_sys::window().and_then(|w| w.local_storage().ok().flatten());
+        let q = query();
+        if q.contains("webgl") {
+            if let Some(s) = &storage {
+                let _ = s.set_item(WEBGL_KEY, "1");
+            }
+            return true;
+        }
+        if q.contains("webgpu") {
+            if let Some(s) = &storage {
+                let _ = s.remove_item(WEBGL_KEY);
+            }
+            return false;
+        }
+        storage.and_then(|s| s.get_item(WEBGL_KEY).ok().flatten()).is_some()
+    }
+
     /// Fetch font bytes asynchronously through the browser.
     async fn fetch_font_bytes(url: &str) -> Result<Vec<u8>, String> {
         let window = web_sys::window().ok_or("no window")?;
@@ -422,7 +447,7 @@ mod web {
                 return;
             };
             let mut options = eframe::WebOptions { depth_buffer: DEPTH_BITS, ..Default::default() };
-            if query().contains("webgl")
+            if webgl()
                 && let eframe::egui_wgpu::WgpuSetup::CreateNew(create) = &mut options.wgpu_options.wgpu_setup
             {
                 create.instance_descriptor.backends = eframe::wgpu::Backends::GL;
@@ -447,6 +472,7 @@ mod web {
                                 let design = exts.contains(&solidcraft_engine::io::DESIGN_EXT);
                                 Box::pin(std::future::ready(Some(format!("{}{name}", if design { files::OPFS } else { files::DOWNLOADS }))))
                             })),
+                            install_app: Some(crate::install::service(&cc.egui_ctx)),
                             ..Default::default()
                         };
                         let mut app = SolveApp::new(Session::default(), services);

apps/solidcraft/src/main.rs

@@ -157,6 +157,8 @@ fn services(cc: &eframe::CreationContext<'_>) -> Services {
         graphics_path: graphics_path().map(|p| p.to_string_lossy().to_string()),
         http_get: Some(std::sync::Arc::new(http_get)),
         http_download: Some(std::sync::Arc::new(http_download)),
+        // Already an installed app: only the browser build offers to install.
+        install_app: None,
         show_in_folder: Some(Box::new(|path| {
             let folder = std::path::Path::new(path).parent().unwrap_or_else(|| std::path::Path::new("."));
             let mut command = std::process::Command::new(if cfg!(target_os = "windows") {