feat: PWA support — make Reframe installable as an offline-capable progressive web app

[magic-peach]

Reframe runs entirely in the browser with no server calls during video processing. This makes it a perfect candidate for a Progressive Web App that users can install to their home screen and use offline.

What to build

1. Add a public/manifest.json (or app/manifest.ts for Next.js App Router):

   • name, short_name, description
   • start_url: "/"
   • display: "standalone"
   • icons at 192x192 and 512x512 (create simple reframe logo icons)

2. Add a <link rel="manifest"> to src/app/layout.tsx

3. Register a service worker that caches the app shell for offline use (the FFmpeg.wasm assets can be cached after first load):

   • Use Next.js next-pwa or write a lightweight custom service worker
   • Cache strategy: network-first for HTML, cache-first for wasm/js assets

4. Add an "Install app" button that appears when the browser fires beforeinstallprompt

Important constraint

This project uses output: "export" (static export). Middleware, API routes, and server-side features are not available. The service worker must be a static file in public/.

Acceptance criteria

• App passes PWA audit in Chrome DevTools Lighthouse (≥ 90 PWA score)
• App can be installed to home screen on Chrome/Edge (desktop and Android)
• App shell loads offline after first visit
• No regressions to existing export functionality
• bun run build succeeds without errors

---

Screen Recording Required

Your PR for this issue must include a screen recording showing the feature working on your local machine (bun run dev → http://localhost:3000). PRs without a recording will not be merged.

See CONTRIBUTING.md for how to record.

[github-actions]

👋 Thanks for opening an issue, @magic-peach!

Our maintainers will review this shortly 🚀

Before you start working

• 📖 Read the CONTRIBUTING.md guide
• 💬 Wait for a maintainer to assign you the issue before starting work
• 🔍 Search for existing issues to avoid duplicates

For GSSoC'26 contributors

If you're contributing under GirlScript Summer of Code 2026, please mention it in your comment when requesting assignment:

"I'd like to work on this — contributing under GSSoC'26"

Architecture notes

Reframe is a static Next.js app with output: "export". Key points:

• All video processing uses FFmpeg.wasm (client-side, no server)
• headers() in next.config.ts won't work — use vercel.json instead
• not-found.tsx requires public/404.html + vercel.json routes config

Happy contributing! ⭐ Star the repo if you find it useful!

[github-actions]

Claude encountered an error —— View job

---

I'll analyze this and get back to you.

[Pranav-IIITM]

Hi, I am a GSSoC 2026 contributor and would like to work on this issue.

/assign under GSSoC

[github-actions]

Hey @Pranav-IIITM, you already have 5 issues assigned to you. Please complete or unassign one before picking up more. 🙏

[BhelPuriPanda]

Hi, I am a GSSoC 2026 contributor and would like to work on this issue.

/assign under GSSoC

[github-actions]

Hey @BhelPuriPanda, this issue has been assigned to you! 🎉 Please make progress within 5 days or it will be automatically unassigned due to inactivity.

[github-actions]

Hey @BhelPuriPanda, just a friendly reminder that this issue has had no activity for 2 days. Please leave an update or let us know if you need help! ⏰

[janmejay1438]

@BhelPuriPanda Sir, Are you still working on this issue. If not by any chance I would love to get assigned to it.

[BhelPuriPanda]

@janmejay1438 I'm almost done with the issue! Can you look for some other issues.