diff --git a/site/src/pages/AgentsPage/AgentsPage.tsx b/site/src/pages/AgentsPage/AgentsPage.tsx index 47c98d2e6a..494ac5da22 100644 --- a/site/src/pages/AgentsPage/AgentsPage.tsx +++ b/site/src/pages/AgentsPage/AgentsPage.tsx @@ -58,6 +58,7 @@ import { hasConfiguredModelsInCatalog, } from "./modelOptions"; import { useAgentsPageKeybindings } from "./useAgentsPageKeybindings"; +import { useAgentsPWA } from "./useAgentsPWA"; import { WebPushButton } from "./WebPushButton"; /** @internal Exported for testing. */ @@ -104,6 +105,7 @@ export interface AgentsOutletContext { } const AgentsPage: FC = () => { + useAgentsPWA(); const queryClient = useQueryClient(); const navigate = useNavigate(); const { agentId } = useParams(); diff --git a/site/src/pages/AgentsPage/useAgentsPWA.ts b/site/src/pages/AgentsPage/useAgentsPWA.ts new file mode 100644 index 0000000000..c0a78a3734 --- /dev/null +++ b/site/src/pages/AgentsPage/useAgentsPWA.ts @@ -0,0 +1,70 @@ +import { useEffect } from "react"; + +/** + * Injects PWA-related tags while the Agents page is mounted + * (manifest, apple-touch-icon, mobile-web-app metas) and tweaks the + * viewport to prevent zooming. Everything is cleaned up on unmount. + */ +export function useAgentsPWA() { + useEffect(() => { + // -- Injected elements -------------------------------------------------- + const manifest = document.createElement("link"); + manifest.rel = "manifest"; + manifest.href = "/manifest.json"; + + const appleTouchIcon = document.createElement("link"); + appleTouchIcon.rel = "apple-touch-icon"; + appleTouchIcon.href = "/apple-touch-icon.png"; + + const mobileWebAppCapable = document.createElement("meta"); + mobileWebAppCapable.name = "mobile-web-app-capable"; + mobileWebAppCapable.content = "yes"; + + const appleMobileWebAppCapable = document.createElement("meta"); + appleMobileWebAppCapable.name = "apple-mobile-web-app-capable"; + appleMobileWebAppCapable.content = "yes"; + + const appleMobileWebAppStatusBarStyle = document.createElement("meta"); + appleMobileWebAppStatusBarStyle.name = + "apple-mobile-web-app-status-bar-style"; + appleMobileWebAppStatusBarStyle.content = "black-translucent"; + + const appleMobileWebAppTitle = document.createElement("meta"); + appleMobileWebAppTitle.name = "apple-mobile-web-app-title"; + appleMobileWebAppTitle.content = "Agents"; + + const injected = [ + manifest, + appleTouchIcon, + mobileWebAppCapable, + appleMobileWebAppCapable, + appleMobileWebAppStatusBarStyle, + appleMobileWebAppTitle, + ]; + + for (const el of injected) { + document.head.appendChild(el); + } + + // -- Viewport override -------------------------------------------------- + const viewport = document.querySelector( + 'meta[name="viewport"]', + ); + const prevViewportContent = viewport?.content ?? ""; + + if (viewport) { + viewport.content = + "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"; + } + + // -- Cleanup ------------------------------------------------------------ + return () => { + for (const el of injected) { + el.remove(); + } + if (viewport) { + viewport.content = prevViewportContent; + } + }; + }, []); +} diff --git a/site/src/serviceWorker.ts b/site/src/serviceWorker.ts index ad613d2421..f61bdfc90d 100644 --- a/site/src/serviceWorker.ts +++ b/site/src/serviceWorker.ts @@ -33,7 +33,19 @@ self.addEventListener("push", (event) => { ); }); -// Handle notification click +// Handle notification click — navigate to the agents page self.addEventListener("notificationclick", (event) => { event.notification.close(); + event.waitUntil( + self.clients + .matchAll({ type: "window", includeUncontrolled: true }) + .then((clientList) => { + for (const client of clientList) { + if (client.url.includes("/agents") && "focus" in client) { + return client.focus(); + } + } + return self.clients.openWindow("/agents"); + }), + ); }); diff --git a/site/static/apple-touch-icon.png b/site/static/apple-touch-icon.png new file mode 100644 index 0000000000..6c1a836f53 Binary files /dev/null and b/site/static/apple-touch-icon.png differ diff --git a/site/static/manifest.json b/site/static/manifest.json new file mode 100644 index 0000000000..06d27e1323 --- /dev/null +++ b/site/static/manifest.json @@ -0,0 +1,24 @@ +{ + "name": "Coder Agents", + "short_name": "Agents", + "description": "AI coding agents powered by Coder", + "start_url": "/agents", + "scope": "/", + "display": "standalone", + "background_color": "#17172E", + "theme_color": "#17172E", + "icons": [ + { + "src": "/pwa-icon-192.png", + "sizes": "192x192", + "type": "image/png", + "purpose": "any" + }, + { + "src": "/pwa-icon-512.png", + "sizes": "512x512", + "type": "image/png", + "purpose": "any maskable" + } + ] +} diff --git a/site/static/pwa-icon-192.png b/site/static/pwa-icon-192.png new file mode 100644 index 0000000000..e444f6c232 Binary files /dev/null and b/site/static/pwa-icon-192.png differ diff --git a/site/static/pwa-icon-512.png b/site/static/pwa-icon-512.png new file mode 100644 index 0000000000..14370847be Binary files /dev/null and b/site/static/pwa-icon-512.png differ