Mintplex-Labs/anything-llm
1
0
Fork 0
mirror of https://github.com/Mintplex-Labs/anything-llm.git synced 2026-07-19 22:23:50 -04:00
Code Issues 328 Packages Projects Releases 10 Wiki Activity

[PR #4595] [CLOSED] feat: add full PWA support for desktop and mobile #4681

New Issue
Closed
opened 2026-02-22 18:36:19 -05:00 by yindo · 0 comments
yindo commented 2026-02-22 18:36:19 -05:00
Owner
Copy Link
Copy Source

📋 Pull Request Information

Original PR: https://github.com/Mintplex-Labs/anything-llm/pull/4595
Author: @christiandesantis
Created: 10/30/2025
Status: ❌ Closed

Base: master ← Head: 4592-feat-pwa-support

📝 Commits (10+)

  • 6da382c feat: add web app manifest and mobile PWA meta tags
  • e4c3b8a feat: serve dynamic manifest.json with custom branding for pwa
  • d59e150 feat: add ios status bar theming for pwa
  • 28177b0 fix: prevent overscroll behavior for mobile
  • 2ad9701 fix: prevent ios safari auto-zoom on chat input
  • d67f0f0 fix: remove theme-color meta tags conflicting with ios status bar
  • dbf0cc3 fix: add missing apple-mobile-web-app-capable meta tag for ios pwa
  • 1b424b2 fix: move catch-all route after manifest endpoint to prevent interception
  • 0dae7cd feat: add pwa detection helper and conditional styling for standalone mode
  • b4a39d8 Merge branch 'master' into 4592-feat-pwa-support

📊 Changes

6 files changed (+199 additions, -22 deletions)

View changed files

📝 frontend/index.html (+6 -1)
📝 frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx (+9 -3)
📝 frontend/src/index.css (+12 -0)
➕ frontend/src/utils/pwa.js (+15 -0)
📝 server/index.js (+67 -5)
📝 server/utils/boot/MetaGenerator.js (+90 -13)

📄 Description

Pull Request Type

  • ✨ feat
  • 🐛 fix
  • ♻️ refactor
  • 💄 style
  • 🔨 chore
  • 📝 docs

Relevant Issues

resolves #4592

What is in this change?

This PR implements comprehensive Progressive Web App (PWA) support, enabling users to install AnythingLLM as a standalone application on their devices with a native app-like experience.

Core PWA Infrastructure

  • Dynamic manifest endpoint (/manifest.json) that respects custom branding settings
    • Uses custom app name and icon from SystemSettings
    • Falls back to AnythingLLM defaults when no custom branding is set
    • Properly configured for standalone display mode with portrait orientation
    • Icons configured with "any maskable" purpose for adaptive display
  • Essential PWA meta tags added to MetaGenerator:
    • mobile-web-app-capable for Android PWA support
    • apple-mobile-web-app-capable for iOS standalone mode (critical for launching outside Safari)
    • apple-mobile-web-app-status-bar-style: black-translucent for iOS status bar theming
    • Manifest link tag pointing to dynamic endpoint
  • Route ordering fix to ensure manifest endpoint is reachable
    • Moved catch-all / route after specific routes (/robots.txt, /manifest.json)
    • Previously, catch-all was intercepting all requests including manifest

iOS-Specific Enhancements

  • Status bar theming using body background-color approach with black-translucent style
    • white background for light mode
    • #0e0f0f background for dark mode (matches app header)
    • Uses @media (prefers-color-scheme: dark) for automatic switching
    • Transparent status bar shows page background color through
    • Note: Attempted theme-color meta tags were removed as they conflicted with this approach
  • Fixed Safari auto-zoom issue by setting minimum 16px font-size on chat textarea
    • iOS Safari auto-zooms inputs with font-size < 16px
    • Applied !text-[16px] on mobile, md:${textSizeClass} on desktop
    • Preserves user's text size preference on desktop
    • Prevents disruptive zoom behavior without breaking accessibility (no maximum-scale used)
  • Standalone mode detection with conditional UI enhancements for installed PWA
    • Created utils/pwa.js helper that checks multiple detection methods
    • Detects via display-mode: standalone media query, navigator.standalone (iOS), and Android TWA

Mobile UX Improvements

  • Disabled over-scroll behavior on mobile devices
    • Applied overscroll-behavior: none to html element for screens ≤ 600px
    • Prevents rubber-band scrolling effect for more native app feel
  • Enhanced chat input spacing with PWA-aware bottom padding
    • Base mobile spacing: pb-4 (16px)
    • PWA standalone mode: pb-5 (20px) for extra clearance from screen edge
    • Desktop unchanged: md:pb-0
  • Increased border radius on chat input container when in standalone PWA mode
    • Normal mobile: rounded-2xl (16px)
    • PWA standalone: rounded-3xl (24px) for more modern app-like aesthetic
    • Desktop always uses rounded-2xl

Custom Branding Integration

  • Preserved PWA meta tags when custom branding is applied
    • Previously, custom branding overwrote all meta tags, removing PWA tags
    • Fixed MetaGenerator to use .map() approach that selectively overrides only specific tags:
      • Overrides: <title>, meta title, og:title, twitter:title, favicon, apple-touch-icon
      • Preserves: All PWA-related meta tags, social media meta tags, other default tags
  • Custom favicon and app name properly applied to both HTML meta tags and PWA manifest
    • MetaGenerator handles HTML meta tags
    • Dynamic manifest endpoint handles PWA manifest with same custom values

Developer Validations

  • I ran yarn lint from the root of the repo & committed changes
  • Relevant documentation has been updated
  • I have tested my code functionality
  • Docker build succeeds locally

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/Mintplex-Labs/anything-llm/pull/4595 **Author:** [@christiandesantis](https://github.com/christiandesantis) **Created:** 10/30/2025 **Status:** ❌ Closed **Base:** `master` ← **Head:** `4592-feat-pwa-support` --- ### 📝 Commits (10+) - [`6da382c`](https://github.com/Mintplex-Labs/anything-llm/commit/6da382cfedf754d29769765bad7772b7cb742dd2) feat: add web app manifest and mobile PWA meta tags - [`e4c3b8a`](https://github.com/Mintplex-Labs/anything-llm/commit/e4c3b8a1c7c0b87b1465395c17add3c54105d295) feat: serve dynamic manifest.json with custom branding for pwa - [`d59e150`](https://github.com/Mintplex-Labs/anything-llm/commit/d59e1500794e3aeada07303518c3716211d01495) feat: add ios status bar theming for pwa - [`28177b0`](https://github.com/Mintplex-Labs/anything-llm/commit/28177b067cead9f05e39c806876c4deddf7dcb90) fix: prevent overscroll behavior for mobile - [`2ad9701`](https://github.com/Mintplex-Labs/anything-llm/commit/2ad9701998d5301b7a60c72576a9dfe64f57d45d) fix: prevent ios safari auto-zoom on chat input - [`d67f0f0`](https://github.com/Mintplex-Labs/anything-llm/commit/d67f0f0d2c1b886ee63b957b257d77b25af8474a) fix: remove theme-color meta tags conflicting with ios status bar - [`dbf0cc3`](https://github.com/Mintplex-Labs/anything-llm/commit/dbf0cc356eb3404973731c3d045b5aa96ecefe54) fix: add missing apple-mobile-web-app-capable meta tag for ios pwa - [`1b424b2`](https://github.com/Mintplex-Labs/anything-llm/commit/1b424b236bf31e2e88f5e93138ad58ddd22c0445) fix: move catch-all route after manifest endpoint to prevent interception - [`0dae7cd`](https://github.com/Mintplex-Labs/anything-llm/commit/0dae7cd03f6cb7c3ccdfe43dacfd2fa5ab5f3ee7) feat: add pwa detection helper and conditional styling for standalone mode - [`b4a39d8`](https://github.com/Mintplex-Labs/anything-llm/commit/b4a39d8d1f25ddef8d99b9f6d420131b611774be) Merge branch 'master' into 4592-feat-pwa-support ### 📊 Changes **6 files changed** (+199 additions, -22 deletions) <details> <summary>View changed files</summary> 📝 `frontend/index.html` (+6 -1) 📝 `frontend/src/components/WorkspaceChat/ChatContainer/PromptInput/index.jsx` (+9 -3) 📝 `frontend/src/index.css` (+12 -0) ➕ `frontend/src/utils/pwa.js` (+15 -0) 📝 `server/index.js` (+67 -5) 📝 `server/utils/boot/MetaGenerator.js` (+90 -13) </details> ### 📄 Description ### Pull Request Type - [x] ✨ feat - [ ] 🐛 fix - [ ] ♻️ refactor - [x] 💄 style - [ ] 🔨 chore - [ ] 📝 docs ### Relevant Issues resolves #4592 ### What is in this change? This PR implements comprehensive Progressive Web App (PWA) support, enabling users to install AnythingLLM as a standalone application on their devices with a native app-like experience. #### Core PWA Infrastructure - **Dynamic manifest endpoint** (`/manifest.json`) that respects custom branding settings - Uses custom app name and icon from SystemSettings - Falls back to AnythingLLM defaults when no custom branding is set - Properly configured for standalone display mode with portrait orientation - Icons configured with `"any maskable"` purpose for adaptive display - **Essential PWA meta tags** added to MetaGenerator: - `mobile-web-app-capable` for Android PWA support - `apple-mobile-web-app-capable` for iOS standalone mode (critical for launching outside Safari) - `apple-mobile-web-app-status-bar-style: black-translucent` for iOS status bar theming - Manifest link tag pointing to dynamic endpoint - **Route ordering fix** to ensure manifest endpoint is reachable - Moved catch-all `/` route after specific routes (`/robots.txt`, `/manifest.json`) - Previously, catch-all was intercepting all requests including manifest #### iOS-Specific Enhancements - **Status bar theming** using body background-color approach with `black-translucent` style - `white` background for light mode - `#0e0f0f` background for dark mode (matches app header) - Uses `@media (prefers-color-scheme: dark)` for automatic switching - Transparent status bar shows page background color through - Note: Attempted `theme-color` meta tags were removed as they conflicted with this approach - **Fixed Safari auto-zoom issue** by setting minimum 16px font-size on chat textarea - iOS Safari auto-zooms inputs with font-size < 16px - Applied `!text-[16px]` on mobile, `md:${textSizeClass}` on desktop - Preserves user's text size preference on desktop - Prevents disruptive zoom behavior without breaking accessibility (no `maximum-scale` used) - **Standalone mode detection** with conditional UI enhancements for installed PWA - Created `utils/pwa.js` helper that checks multiple detection methods - Detects via `display-mode: standalone` media query, `navigator.standalone` (iOS), and Android TWA #### Mobile UX Improvements - **Disabled over-scroll behavior** on mobile devices - Applied `overscroll-behavior: none` to `html` element for screens ≤ 600px - Prevents rubber-band scrolling effect for more native app feel - **Enhanced chat input spacing** with PWA-aware bottom padding - Base mobile spacing: `pb-4` (16px) - PWA standalone mode: `pb-5` (20px) for extra clearance from screen edge - Desktop unchanged: `md:pb-0` - **Increased border radius** on chat input container when in standalone PWA mode - Normal mobile: `rounded-2xl` (16px) - PWA standalone: `rounded-3xl` (24px) for more modern app-like aesthetic - Desktop always uses `rounded-2xl` #### Custom Branding Integration - **Preserved PWA meta tags** when custom branding is applied - Previously, custom branding overwrote all meta tags, removing PWA tags - Fixed MetaGenerator to use `.map()` approach that selectively overrides only specific tags: - Overrides: `<title>`, meta title, og:title, twitter:title, favicon, apple-touch-icon - Preserves: All PWA-related meta tags, social media meta tags, other default tags - **Custom favicon and app name** properly applied to both HTML meta tags and PWA manifest - MetaGenerator handles HTML meta tags - Dynamic manifest endpoint handles PWA manifest with same custom values ### Developer Validations <!-- All of the applicable items should be checked. --> - [x] I ran `yarn lint` from the root of the repo & committed changes - [ ] Relevant documentation has been updated - [x] I have tested my code functionality - [x] Docker build succeeds locally --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
yindo added the pull-request label 2026-02-22 18:36:19 -05:00
yindo closed this issue 2026-02-22 18:36:19 -05:00
yindo changed title from [PR #4595] feat: add full PWA support for desktop and mobile to [PR #4595] [CLOSED] feat: add full PWA support for desktop and mobile 2026-06-05 15:19:48 -04:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Desktop
Docker
Integration Request
Integration Request
OS: Linux
OS: Mobile
OS: Windows
UI/UX
blocked
bug
bug
core-team-only
documentation
duplicate
embed-widget
enhancement
feature request
github_actions
good first issue
investigating
needs info / can't replicate
possible bug
pull-request
Mirrored from GitHub Pull Request
 question
stage: specifications
wontfix
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: Mintplex-Labs/anything-llm#4681
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?