feat: enforce PWA install wall on mobile login by ChitkulLakshya · Pull Request #116 · zync-meet/Zync

ChitkulLakshya · 2026-04-24T15:18:41Z

Summary

configure ZYNC PWA manifest via vite-plugin-pwa with standalone display mode and production icon paths
add installability meta tags for Android Chrome and iOS Safari in index.html
register the service worker in app bootstrap and enforce mobile install wall before Login with iOS/Android-specific install guidance

Test plan

Run npm run dev and open on desktop: Login remains accessible in browser
Open on mobile browser (not installed): install wall appears instead of login
On Android, tap Install App and confirm native install prompt appears
Launch installed app in standalone mode and verify Login becomes accessible
Confirm npm run typecheck (note: existing unrelated ProjectDetails.tsx path error still present)

feat(mobile): mobile UX and accessibility polish

Invalidate cached user and team data after membership changes so team updates propagate across settings and people views. Made-with: Cursor

Set up vite-plugin-pwa with standalone manifest settings for ZYNC and add the manifest artifact needed for installability. Made-with: Cursor

Add manifest, theme, and Apple web app head tags so Android and iOS recognize ZYNC as installable. Made-with: Cursor

Register the PWA service worker via virtual:pwa-register and include plugin client typings for TypeScript support. Made-with: Cursor

Block mobile browser sessions from reaching Login until ZYNC runs in standalone mode, with platform-specific install guidance for iOS and Android. Made-with: Cursor

vercel · 2026-04-24T15:18:46Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
zync	Ready	Preview, Comment	Apr 24, 2026 3:21pm

Raise workbox.maximumFileSizeToCacheInBytes to 4 MiB so service worker generation succeeds with the current Dashboard bundle size in CI. Made-with: Cursor

Copilot

Pull request overview

Adds PWA installability + a mobile-only “install wall” gating the Login page, and improves team-related cache/query refresh so membership changes propagate quickly.

Changes:

Configure vite-plugin-pwa (manifest, Workbox settings) and add PWA meta/manifest tags in index.html.
Register the service worker at app bootstrap and introduce an install-wall feature (hook + UI) enforced from Login.
Invalidate backend /users/me Redis cache on team membership mutations and add a Jest test for team deletion; refresh relevant React Query caches after team actions.

Reviewed changes

Copilot reviewed 13 out of 15 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
vite.config.ts	Adds `vite-plugin-pwa` config (manifest, SW/workbox, dev options).
src/vite-env.d.ts	Adds PWA client types for TS.
src/pages/Login.tsx	Enforces install wall before showing the login experience on mobile.
src/main.tsx	Registers the PWA service worker during app bootstrap.
src/features/install-wall/index.ts	Barrel exports for install-wall feature.
src/features/install-wall/hooks/useAppInstallStatus.ts	Detects mobile/iOS/Android + standalone mode to decide when to show wall.
src/features/install-wall/components/InstallPromptView.tsx	UI + Android `beforeinstallprompt` handling for installation guidance.
src/components/views/SettingsView.tsx	Invalidates team/user queries after team membership mutations.
src/components/views/PeopleView.tsx	Forces refetch behavior for team/user lists on mount.
public/manifest.json	Adds a static PWA manifest file.
index.html	Adds PWA meta tags + manifest/apple-touch-icon links.
backend/routes/teamRoutes.js	Invalidates `user:me:${uid}` cache on team create/join/leave/delete/remove-member; normalizes membership filtering.
backend/tests/teamRoutes.delete.test.js	Adds coverage for delete-team behavior + cache invalidation.
package.json	Adds `vite-plugin-pwa` dependency.
package-lock.json	Locks new PWA/workbox dependency tree.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-24T15:23:43Z

    }
  };

+  if (hasCheckedStatus && requiresInstallWall) {


On mobile, hasCheckedStatus starts false and is only set true in an effect, so the login UI can render briefly before the install wall replaces it (a visible flash, and it undermines the idea of an “install wall before login”). Consider computing the initial standalone status synchronously (e.g. in the useState initializer) and/or rendering a neutral loading state until the install check completes.

Suggested change

if (hasCheckedStatus && requiresInstallWall) {

if (!hasCheckedStatus) {

return (

<div className="min-h-screen flex items-center justify-center bg-background p-4">

<div className="text-sm text-muted-foreground">Loading...</div>

</div>

);

}

if (requiresInstallWall) {

Copilot · 2026-04-24T15:23:43Z

+  const isMobileDevice = MOBILE_UA_REGEX.test(userAgent);
+  const isIOS = /iPad|iPhone|iPod/i.test(userAgent);


The iOS/iPad detection based solely on navigator.userAgent is unreliable on modern iPadOS (Safari can report a macOS-like UA), which would cause iPads to bypass the install wall. Consider using a more robust check (e.g. navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1 for iPadOS, or feature-based detection) so iPads are treated as iOS devices consistently.

Suggested change

const isMobileDevice = MOBILE_UA_REGEX.test(userAgent);

const isIOS = /iPad|iPhone|iPod/i.test(userAgent);

const isIPadOS =

navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1;

const isMobileDevice = MOBILE_UA_REGEX.test(userAgent) || isIPadOS;

const isIOS = /iPad|iPhone|iPod/i.test(userAgent) || isIPadOS;

Copilot · 2026-04-24T15:23:44Z

        },
        enabled: !!currentUser && !isPreview,
+        staleTime: 0,
+        refetchOnMount: 'always',


With staleTime: 0, queries are always stale immediately, and the default refetchOnMount: true already refetches on mount when stale. Adding refetchOnMount: 'always' here is redundant and guarantees a network request even if you later increase staleTime. Consider removing one of these settings (or setting a small staleTime) and relying on targeted invalidateQueries when team membership changes.

Suggested change

refetchOnMount: 'always',

Copilot · 2026-04-24T15:23:44Z

        },
        enabled: !!teamInfo?.id && !isPreview,
+        staleTime: 0,
+        refetchOnMount: 'always',


Same as above: staleTime: 0 makes the query stale immediately, so refetchOnMount: 'always' is redundant and forces refetches on every mount. Consider simplifying the query options to avoid unnecessary network traffic.

Suggested change

refetchOnMount: 'always',

Copilot · 2026-04-24T15:23:44Z

+      includeAssets: ["pwa-192x192.png", "pwa-512x512.png", "pwa-maskable-512x512.png"],
+      manifestFilename: "manifest.json",
+      manifest: {
+        name: "ZYNC",
+        short_name: "ZYNC",
+        description: "ZYNC collaboration platform",
+        background_color: "#09090b",
+        theme_color: "#09090b",
+        display: "standalone",
+        start_url: "/",
+        scope: "/",
+        icons: [
+          {
+            src: "/pwa-192x192.png",
+            sizes: "192x192",
+            type: "image/png",
+          },
+          {
+            src: "/pwa-512x512.png",
+            sizes: "512x512",
+            type: "image/png",
+          },
+          {
+            src: "/pwa-maskable-512x512.png",
+            sizes: "512x512",
+            type: "image/png",
+            purpose: "maskable",
+          },


The PWA config references icon assets (includeAssets + manifest icons) that are not present in public/ (e.g. pwa-192x192.png). This will produce broken icon URLs in the generated manifest and can fail installability checks. Add the referenced icon files under public/ (or update the paths/names to match existing assets) so the manifest and <link rel="apple-touch-icon"> resolve correctly.

Copilot · 2026-04-24T15:23:44Z

+    react(),
+    VitePWA({
+      registerType: "autoUpdate",
+      injectRegister: "auto",


injectRegister: "auto" will inject service-worker registration into the built HTML, but src/main.tsx also calls registerSW(). That can lead to duplicate SW registrations / duplicated update handling. Choose one approach: either disable injection (injectRegister: null/false) and keep the explicit registerSW, or remove the manual registration and rely on injection.

Suggested change

injectRegister: "auto",

injectRegister: null,

Copilot · 2026-04-24T15:23:45Z

+{
+  "name": "ZYNC",
+  "short_name": "ZYNC",
+  "description": "ZYNC collaboration platform",
+  "background_color": "#09090b",
+  "theme_color": "#09090b",
+  "display": "standalone",
+  "start_url": "/",
+  "scope": "/",
+  "icons": [
+    {
+      "src": "/pwa-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/pwa-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    },
+    {
+      "src": "/pwa-maskable-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ]
+}


manifest.json is defined twice: as a static file in public/manifest.json and also generated by vite-plugin-pwa (manifestFilename: "manifest.json" + manifest). This duplication risks the build output depending on copy/generation order and makes future changes easy to desync. Keep a single source of truth: either remove public/manifest.json and let the plugin generate it, or remove the plugin manifest config and serve the static manifest.

Suggested change

{

"name": "ZYNC",

"short_name": "ZYNC",

"description": "ZYNC collaboration platform",

"background_color": "#09090b",

"theme_color": "#09090b",

"display": "standalone",

"start_url": "/",

"scope": "/",

"icons": [

{

"src": "/pwa-192x192.png",

"sizes": "192x192",

"type": "image/png"

},

{

"src": "/pwa-512x512.png",

"sizes": "512x512",

"type": "image/png"

},

{

"src": "/pwa-maskable-512x512.png",

"sizes": "512x512",

"type": "image/png",

"purpose": "maskable"

}

]

}

Copilot · 2026-04-24T15:23:45Z

+import { registerSW } from "virtual:pwa-register";
+
+registerSW({ immediate: true });



This explicit registerSW() call likely duplicates the registration injected by vite-plugin-pwa when injectRegister: "auto" is enabled in vite.config.ts, leading to double registration/update handlers. Consider removing this call if you keep injected registration, or disable injection and keep this call (but not both).

Suggested change

import { registerSW } from "virtual:pwa-register";

registerSW({ immediate: true });

ChitkulLakshya added 7 commits April 21, 2026 13:43

Merge pull request #115 from zync-meet/mobile

349430c

feat(mobile): mobile UX and accessibility polish

Merge branch 'main' of https://github.com/zync-meet/Zync into mobile

42d7101

fix(team): fix firebase team membership sync

894bcb7

Invalidate cached user and team data after membership changes so team updates propagate across settings and people views. Made-with: Cursor

feat(pwa): configure vite plugin and manifest

48d383a

Set up vite-plugin-pwa with standalone manifest settings for ZYNC and add the manifest artifact needed for installability. Made-with: Cursor

feat(pwa): add mobile install meta tags

68766c3

Add manifest, theme, and Apple web app head tags so Android and iOS recognize ZYNC as installable. Made-with: Cursor

feat(pwa): register service worker on app load

bb5ae7a

Register the PWA service worker via virtual:pwa-register and include plugin client typings for TypeScript support. Made-with: Cursor

feat(auth): enforce mobile install wall before login

377601c

Block mobile browser sessions from reaching Login until ZYNC runs in standalone mode, with platform-specific install guidance for iOS and Android. Made-with: Cursor

Copilot AI review requested due to automatic review settings April 24, 2026 15:18

github-actions Bot added area:dependencies dependencies:lockfile area:backend area:tests area:backend-routes area:frontend area:frontend-components area:config area:frontend-pages area:assets labels Apr 24, 2026

Copilot started reviewing on behalf of ChitkulLakshya April 24, 2026 15:19 View session

vercel Bot had a problem deploying to Preview April 24, 2026 15:19 Failure

fix(pwa): increase workbox precache size limit

f1570fe

Raise workbox.maximumFileSizeToCacheInBytes to 4 MiB so service worker generation succeeds with the current Dashboard bundle size in CI. Made-with: Cursor

vercel Bot deployed to Preview April 24, 2026 15:21 View deployment

ChitkulLakshya merged commit ade04b0 into mobile Apr 24, 2026
4 checks passed

Copilot AI reviewed Apr 24, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: enforce PWA install wall on mobile login#116

feat: enforce PWA install wall on mobile login#116
ChitkulLakshya merged 8 commits into
mobilefrom
PWA

ChitkulLakshya commented Apr 24, 2026

Uh oh!

vercel Bot commented Apr 24, 2026 •

edited

Loading

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 24, 2026

Uh oh!

Copilot AI Apr 24, 2026

Uh oh!

Copilot AI Apr 24, 2026

Uh oh!

Copilot AI Apr 24, 2026

Uh oh!

Copilot AI Apr 24, 2026

Uh oh!

Copilot AI Apr 24, 2026

Uh oh!

Copilot AI Apr 24, 2026

Uh oh!

Copilot AI Apr 24, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

-  if (hasCheckedStatus && requiresInstallWall) {
+  if (!hasCheckedStatus) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-background p-4">
+        <div className="text-sm text-muted-foreground">Loading...</div>
+      </div>
+    );
+  }
+  if (requiresInstallWall) {

		const isMobileDevice = MOBILE_UA_REGEX.test(userAgent);
		const isIOS = /iPad\|iPhone\|iPod/i.test(userAgent);

-  const isMobileDevice = MOBILE_UA_REGEX.test(userAgent);
-  const isIOS = /iPad|iPhone|iPod/i.test(userAgent);
+  const isIPadOS =
+    navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1;
+  const isMobileDevice = MOBILE_UA_REGEX.test(userAgent) || isIPadOS;
+  const isIOS = /iPad|iPhone|iPod/i.test(userAgent) || isIPadOS;

		import { registerSW } from "virtual:pwa-register";

		registerSW({ immediate: true });

Conversation

ChitkulLakshya commented Apr 24, 2026

Summary

Test plan

Uh oh!

vercel Bot commented Apr 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 24, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 24, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 24, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 24, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 24, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 24, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 24, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 24, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

vercel Bot commented Apr 24, 2026 •

edited

Loading