Progressive Web Application
まだ誰も着手していません。
評価
- 難易度
- 5/5
- 見積もり時間
- 1週間以上
- 初心者へのやさしさ
- 25/100
- issue の種類
- 機能追加
- 明瞭さ
- 説明が足りない
- 活発さ
- 静か
- 技術スタック
- nextjs, react, tailwindcss, typescript
調査の方向性
next.config.js または next.config.mjs、public/manifest.json、service worker、app/layout.tsx の変更範囲を決める前に、既存の Next.js App Router 構成を確認します。まず、アプリ固有のアイコン、メタデータ、キャッシュ動作、オフラインフォールバック、ホスティング上の制約を明確にします。完了条件は、Android にインストール可能な動作する PWA、開発およびデプロイ手順の文書化、オフライン動作とインストール可能性の検証です。
索引モデルが issue の本文から書いたものです。
説明
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.
- 主要言語
- TypeScript
- スター
- 19
- フォーク
- 7
- 平均マージ
- 59分
- マージ済み PR（30日）
- 16
コントリビューションガイド
このリポジトリのコントリビューションガイドは索引されていません
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
QueueLab/QCX のほかの issue
-
Settings オープン
難易度 2/5 1〜3時間 初心者へのやさしさ 64/100
-
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
-
難易度 2/5 1〜3時間 初心者へのやさしさ 62/100
-
Collaboration オープン
難易度 5/5 1週間以上 初心者へのやさしさ 30/100
-
Image preview Gen UI オープン
難易度 3/5 1〜2日 初心者へのやさしさ 35/100
似ている issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 70/100
-
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100
mksglu/context-mode#1200 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100
jaegertracing/jaeger-ui#4506 ·
-
area:desktop area:ui bug platform:macos
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100
anthropics/claude-code#96687 ·
-
good first issue
難易度 1/5 1時間未満 初心者へのやさしさ 95/100
AOSSIE-Org/DebateAI#582 · コメント 2 件 ·