Skip to content

feat: PWA Offline Support Implemented#914

Open
BhelPuriPanda wants to merge 9 commits into
magic-peach:mainfrom
BhelPuriPanda:feat/pwa-support
Open

feat: PWA Offline Support Implemented#914
BhelPuriPanda wants to merge 9 commits into
magic-peach:mainfrom
BhelPuriPanda:feat/pwa-support

Conversation

@BhelPuriPanda
Copy link
Copy Markdown
Contributor

@BhelPuriPanda BhelPuriPanda commented May 22, 2026 •
edited
Loading

Add Progressive Web App (PWA) support

This PR adds full Progressive Web App support to Reframe while maintaining compatibility with output: "export" static builds.

Features Added

Web App Manifest

  • Added public/manifest.json
  • Configured standalone display mode
  • Added theme/background colors
  • Added installable app icons (192x192, 512x512)
  • Added screenshots for install previews

Service Worker

Added a custom public/sw.js service worker with:

  • precaching for core app shell assets
  • network-first caching for navigational HTML requests
  • cache-first caching for static assets (JS, CSS, WASM, media)
  • runtime caching for FFmpeg WASM assets loaded from jsdelivr CDN
  • offline fallback support for / and /index.html

Install UX

  • Added InstallButton.tsx
  • Implemented deferred beforeinstallprompt handling
  • Added manual install flow through a header install button
  • Automatically hides install UI after successful installation

Header/Layout Fixes

  • Moved the "Star on GitHub" button into the sticky header
  • Fixed overlap issues affecting the install button and theme toggle
  • Registered manifest/theme metadata through the Next.js Metadata API

Verification

Build Verification

bun run build

Build/export completes successfully with no regressions.

Manual Testing

Verified:

  • service worker registration
  • manifest detection
  • installability on Chrome/Edge
  • offline app shell loading
  • FFmpeg asset caching
  • standalone app launch behavior

Offline Verification

After first load, the application continues to function offline, including cached FFmpeg WASM resources required for browser-side video processing.

Screenshot 2026-05-22 134802 Screenshot 2026-05-22 134732
Reframe.Browser-based.Video.Editor.-.Reframe.Resize.trim.and.export.videos.in.your.browser.2026-05-22.14-03-21.mp4

A screen recording demonstrating installation flow and offline functionality is included with this PR.

Closes #663

@vercel
Copy link
Copy Markdown

vercel Bot commented May 22, 2026

@BhelPuriPanda is attempting to deploy a commit to the magic-peach1's projects Team on Vercel.

A member of the Team first needs to authorize it.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 22, 2026

👋 Thanks for your PR, @BhelPuriPanda!

Welcome to Reframe — a browser-based video editor built for everyone 🎬

What happens next

  1. 🤖 Automated checks — build & TypeScript typecheck will run automatically
  2. ✅ Vercel preview — a preview deployment will be created (requires maintainer authorization for fork PRs)
  3. 👀 Code review — a maintainer will review your changes
  4. 🚀 Merge — once approved, your PR will be merged!

Quick checklist

  • PR title follows Conventional Commits (e.g. feat: add dark mode)
  • Linked the issue this PR closes (e.g. Closes #123)
  • Tested the changes locally (bun run dev)
  • Build passes (bun run build)

Useful links

Happy coding! 🎉

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 22, 2026 •
edited
Loading

✅ PR Format Check Passed — @BhelPuriPanda

Basic format checks passed. A maintainer will review your code changes.

This does not mean the PR is approved — it just means the format is correct.

@github-actions github-actions Bot added level:advanced Advanced level - 55 pts type:bug Bug fix type:design UI/UX design type:testing Testing labels May 22, 2026
@BhelPuriPanda BhelPuriPanda changed the title feat:PWA Offline Support Implemented feat : PWA Offline Support Implemented May 22, 2026
@BhelPuriPanda
Copy link
Copy Markdown
Contributor Author

BhelPuriPanda commented May 22, 2026

Hi @magic-peach, kindly review my PR I have tested it locally, and it works fine, and all checks passed. For the install button, it is there for those who haven't installed yet. When installed, you only see the open in App in the URL bar, like in YouTube. I have shown in the recording that it works offline as well.

@BhelPuriPanda BhelPuriPanda changed the title feat : PWA Offline Support Implemented feat: PWA Offline Support Implemented May 22, 2026
@BhelPuriPanda
Copy link
Copy Markdown
Contributor Author

BhelPuriPanda commented May 23, 2026

Hey @magic-peach, I'd be grateful if you review my PR, I have resolved all the conflicts

@magic-peach magic-peach added gssoc'26 GirlScript Summer of Code 2026 type:feature New feature type:devops CI/CD and DevOps and removed type:bug Bug fix type:design UI/UX design labels May 24, 2026
@magic-peach
Copy link
Copy Markdown
Owner

magic-peach commented May 24, 2026

@BhelPuriPanda The PWA implementation is well-thought-out and the CI passes, but there are several console.log statements that need to be removed before this can be merged:

In src/app/layout.tsx (inline script):

console.log('⚡ PWA beforeinstallprompt event captured in layout <head>');

In src/components/InstallButton.tsx:

console.log("ℹ️ PWA Install Button: App is marked as already installed.");
console.log("⚡ PWA Install Button: Found deferredPrompt pre-captured on window object!");
console.log("⚡ PWA Install Button: beforeinstallprompt event received in component!");
console.log("⚡ PWA Install Button: deferredpromptready event received from layout!");
console.log("🎉 Reframe app installed successfully!");
console.log("ℹ️ Service Worker: Already active and controlling this page.");
console.log("Service Worker registered successfully with scope:", reg.scope);

These are debug logs that should not be in production code. console.warn and console.error for genuine error cases (like in sw.js) are fine.

Steps to fix:

  1. Remove all console.log statements from InstallButton.tsx and the inline script in layout.tsx
  2. Keep console.warn and console.error for error handling only
  3. Push the fix

The overall PWA approach is solid — this just needs a cleanup pass!

@github-actions github-actions Bot added type:bug Bug fix type:design UI/UX design labels May 26, 2026
@BhelPuriPanda
Copy link
Copy Markdown
Contributor Author

BhelPuriPanda commented May 26, 2026

Hey @magic-peach, apologies for the late response. I have cleared all the Console logs and also patched some lint and typecheck errors. Thanks for reviewing my PR.

@BhelPuriPanda
Copy link
Copy Markdown
Contributor Author

BhelPuriPanda commented Jun 6, 2026

Hi @magic-peach its been quite some time can you review the PR and Merge it ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

gssoc'26 GirlScript Summer of Code 2026 level:advanced Advanced level - 55 pts type:bug Bug fix type:design UI/UX design type:devops CI/CD and DevOps type:feature New feature type:testing Testing

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

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

2 participants

@BhelPuriPanda @magic-peach