feat(app): add mobile PWA support#37739
Open
Harsha754-ml wants to merge 2 commits into
Open
Conversation
- Added vite-plugin-pwa with Workbox service worker - Enhanced web manifest with description, categories, orientation, maskable icons - Created offline fallback page - Added install prompt banner component - Configured caching strategies (stale-while-revalidate for API, cache-first for fonts)
github-actions
Bot
added
the
needs:compliance
github-actions
Bot
removed
the
needs:compliance
Contributor
|
Thanks for updating your PR! It now meets our contributing guidelines. 👍 |
Contributor
There was a problem hiding this comment.
Pull request overview
Adds Progressive Web App (PWA) support to packages/app by integrating vite-plugin-pwa (Workbox service worker), an offline fallback page, and a client-side “Add to Home Screen” install prompt banner to improve mobile installability and offline behavior.
Changes:
- Configure
vite-plugin-pwa+ Workbox runtime caching and navigation fallback. - Add an offline fallback page (
/offline.html) for offline navigation. - Add and render a
PwaInstallBannercomponent in the app UI.
Reviewed changes
Copilot reviewed 6 out of 7 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/app/vite.config.ts | Adds VitePWA/Workbox configuration, manifest metadata, offline navigation fallback, and runtime caching rules. |
| packages/app/src/components/pwa-install-banner.tsx | New Solid component that listens for install events and renders an install/dismiss banner. |
| packages/app/src/app.tsx | Integrates the PWA install banner into the app shell. |
| packages/app/public/offline.html | Adds a static offline fallback page used by Workbox navigation fallback. |
| packages/app/package.json | Adds vite-plugin-pwa dependency. |
| bun.lock | Lockfile updates for the new PWA/Workbox dependency graph. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> |
Comment on lines
+24
to
+26
| registerType: "autoUpdate", | ||
| includeAssets: ["favicon.svg", "favicon.ico", "apple-touch-icon-v3.png"], | ||
| manifest: { |
Comment on lines
+27
to
+32
| name: "OpenCode", | ||
| short_name: "OpenCode", | ||
| description: "AI-powered development tool", | ||
| theme_color: "#080808", | ||
| background_color: "#080808", | ||
| display: "standalone", |
| runtimeCaching: [ | ||
| { | ||
| urlPattern: /^https:\/\/.*\.opencode\.ai\/.*/i, | ||
| handler: "NetworkFirst", |
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Issue for this PR
Closes #
Type of change
What does this PR do?
Adds Progressive Web App (PWA) support to the web application, enabling mobile installation and offline capabilities.
The web app already had responsive design for mobile viewports and a minimal web manifest. This PR completes the PWA setup by adding a service worker with Workbox, an enhanced manifest, offline fallback, and an install prompt banner.
Key changes:
vite-plugin-pwagenerates a service worker that precaches app shell assets and uses runtime caching (stale-while-revalidate for API calls, cache-first for Google Fonts)purpose: "any maskable"so the app shows correctly in install promptsoffline.htmlpage shown when the server is unreachablePwaInstallBannercomponent detects the browser'sbeforeinstallpromptevent and shows an "Install" / "Not now" banner at the bottom-right on web platformsHow did you verify your code works?
bunx vite buildsucceeds and producessw.js,workbox-*.js,manifest.webmanifest, andoffline.htmlin the dist directorybun run lint) passes with no new warningsScreenshots / recordings
N/A — no visual changes to the existing UI; the install banner only appears when the browser supports PWA installation.
Checklist