Progressive Web Application
Nessuno ha ancora preso questa issue.
Valutazione
- Difficoltà
- 5/5
- Tempo stimato
- Più di una settimana
- Idoneità per principianti
- 25/100
- Tipo di issue
- Funzionalità
- Chiarezza
- Da chiarire
- Stato di attività
- Tranquilla
- Stack tecnologico
- nextjs, react, tailwindcss, typescript
Direzione di ricerca
Esamina innanzitutto la struttura esistente di Next.js App Router prima di definire l’ambito delle modifiche a next.config.js o next.config.mjs, public/manifest.json, al service worker e ad app/layout.tsx. Stabilisci prima le icone specifiche dell’applicazione, i metadati, il comportamento della cache, il fallback offline e i vincoli di hosting; il lavoro è completato quando è disponibile una PWA funzionante installabile su Android, i passaggi di sviluppo e deployment sono documentati e il comportamento offline e l’installabilità sono stati verificati.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Descrizione
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.
- Lingua principale
- TypeScript
- Stelle
- 19
- Fork
- 7
- Merge medio
- 59m
- PR unite (30g)
- 16
Guida per i contributori
Nessuna guida per i contributori indicizzata per questo repository
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Altre issue di QueueLab/QCX
-
Settings Aperta
Difficoltà 2/5 1-3 ore Idoneità per principianti 64/100
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 68/100
-
Update Gemini 3.1 Pro Aperta
Difficoltà 2/5 1-3 ore Idoneità per principianti 62/100
-
Collaboration Aperta
Difficoltà 5/5 Più di una settimana Idoneità per principianti 30/100
-
Image preview Gen UI Aperta
Difficoltà 3/5 1-2 giorni Idoneità per principianti 35/100
Tutte le issue di QueueLab/QCX
Issue simili
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 70/100
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 75/100
mksglu/context-mode#1200 ·
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 75/100
jaegertracing/jaeger-ui#4506 ·
-
area:desktop area:ui bug platform:macos
Difficoltà 2/5 1-3 ore Idoneità per principianti 75/100
anthropics/claude-code#96687 ·
-
good first issue
Difficoltà 1/5 Meno di un'ora Idoneità per principianti 95/100
AOSSIE-Org/DebateAI#582 · 2 commenti ·