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/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);