Progressive Web Application
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 19
- Forks
- 7
- Avg merge
- 59m
- Merged PRs (30d)
- 16
Description
You are an expert Next.js and PWA developer.
I have an existing Next.js application (using App Router, Next.js 14+). Convert it into a fully functional Progressive Web App (PWA) that can be installed/downloaded as a native-like app on Android (via Chrome) with the following requirements:
Core PWA Features Required:
-
Web App Manifest (
manifest.json)- Proper
name,short_name,description - Multiple icon sizes (192x192, 512x512, maskable icons)
start_url,display: standalone,theme_color,background_colororientation: portraitoranyas needed- Categories and screenshots if possible
- Proper
-
Service Worker
- Workbox or custom service worker for caching (pages, assets, API responses)
- Offline support (show cached content or offline page)
- Background sync / push notification readiness (even if not implementing push yet)
- Proper caching strategies (NetworkFirst for API, CacheFirst for static assets)
-
Next.js Configuration
- Use
next-pwaplugin if recommended, or manual setup withnext.config.js/next.config.mjs - Correct handling of App Router (
app/directory) - Environment variables and build optimizations for PWA
- HTTPS enforcement reminder / secure context
- Use
-
Installation Experience on Android
- Make the "Install" / "Add to home screen" prompt appear reliably in Chrome on Android
- Proper meta tags (
<meta name="theme-color">, apple-touch icons for broader compatibility) - Custom install button (optional but recommended) with
beforeinstallpromptevent
-
Best Practices
- Lighthouse PWA score ≥ 90
- Fast loading (Core Web Vitals optimized)
- Responsive design already assumed
- Update handling (new version notification)
- Fallback offline page
Deliverables:
- Full updated
next.config.js/next.config.mjs - Complete
public/manifest.json - Service worker file(s) location and code
- Any new components (e.g., InstallPrompt component)
- Updated
app/layout.tsxor_document.jswith all necessary<Head>/ meta tags - Instructions for:
- Running in development mode with PWA
- Building and testing the PWA
- How to test installability on Android (Chrome DevTools + Android device)
- Deploying to Vercel/Netlify (PWA-compatible hosting)
Assume the project uses TypeScript and Tailwind. Provide the complete code changes with clear file paths and diff-style explanations where helpful.
Start by asking me for any specific details about my app (name, icons, features, current folder structure) if needed, otherwise provide a complete ready-to-use implementation.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Review the existing Next.js App Router structure before scoping changes to next.config.js or next.config.mjs, public/manifest.json, the service worker, and app/layout.tsx. Establish the app-specific icons, metadata, caching behavior, offline fallback, and hosting constraints first; done requires a working Android-installable PWA, documented development and deployment steps, and verified offline and installability behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nextjs, react, tailwindcss, typescript
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100