Skip to content

feat(site): add PWA manifest and mobile meta tags for agents page#22650

Merged
kylecarbs merged 3 commits intomainfrom
kylecarbs/agents-pwa
Mar 5, 2026
Merged

feat(site): add PWA manifest and mobile meta tags for agents page#22650
kylecarbs merged 3 commits intomainfrom
kylecarbs/agents-pwa

Conversation

@kylecarbs
Copy link
Member

Adds progressive web app support for the agents page so it can be installed as a standalone app on mobile/desktop.

Changes

  • manifest.json — Web app manifest with display: standalone, start_url: /agents, Coder theme colors
  • PWA icons — 192x192, 512x512 PNGs + 180x180 apple-touch-icon, rendered from the existing favicon SVG
  • index.html — Added manifest link, apple-touch-icon, and mobile web app meta tags (apple-mobile-web-app-capable, mobile-web-app-capable, apple-mobile-web-app-status-bar-style, title)
  • Service workernotificationclick now focuses an existing agents tab or opens /agents in a new window

Testing

  1. Open /agents on a mobile device
  2. Use browser "Add to Home Screen" / "Install App"
  3. App should launch in standalone mode pointing at the agents page
  4. Push notifications should navigate to the agents page on click

- Add web app manifest (manifest.json) with standalone display targeting /agents
- Add PWA icons (192x192, 512x512) and apple-touch-icon (180x180)
- Add mobile viewport meta tags: apple-mobile-web-app-capable, mobile-web-app-capable, status-bar-style
- Update service worker notificationclick to focus/open the agents page
- Set apple-mobile-web-app-title to 'Agents' for home screen installs
@coder-tasks
Copy link
Contributor

coder-tasks bot commented Mar 5, 2026

Documentation Check

New Documentation Needed

  • docs/ai-coder/tasks.md - Add a note that the Tasks/Agents page (/agents) can be installed as a standalone Progressive Web App (PWA) on mobile and desktop devices via the browser's "Add to Home Screen" / "Install App" option. The PR also changes push notification behavior so that clicking a notification now opens or focuses the /agents page.

Automated review via Coder Tasks

@kylecarbs
Copy link
Member Author

@DanielleMaywood I'm gonna do a lot of manual testing here before merge.

Copy link
Contributor

@DanielleMaywood DanielleMaywood left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Other than an issue with the icon it seems to work on my iPhone

image.png

Move manifest link, apple-touch-icon, and mobile-web-app meta tags
out of the global index.html into a useAgentsPWA hook that injects
them only while the agents page is mounted. This prevents other
pages from being affected by standalone display mode or the 'Agents'
home screen title.

The hook also overrides the viewport to disable user zooming on the
agents page (maximum-scale=1, user-scalable=no) and restores the
original viewport on unmount.
Replace auto-generated PWA icons with the provided ones.
Apple touch icon gets 22px padding on a #17172E background
(~12.5% inset per Apple HIG safe area guidelines).
Copy link
Contributor

@DanielleMaywood DanielleMaywood left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could probably do this with JSX but it's fine for now

@kylecarbs kylecarbs merged commit f1b3eef into main Mar 5, 2026
25 checks passed
@kylecarbs kylecarbs deleted the kylecarbs/agents-pwa branch March 5, 2026 13:55
@github-actions github-actions bot locked and limited conversation to collaborators Mar 5, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants