feat(pwa): installable PWA + mobile responsive chrome

PWA対応とモバイルUX改善。

- app/manifest.ts: Nextファイルベースでマニフェスト生成(name/short_name/display:standalone/icons 192+512 any+maskable + svg)
- public/icon.svg + 生成PNG(192/512): scripts/generate-icons.mjs で sharp を用いてSVGをラスタライズ
- public/sw.js: アプリシェルのプリキャッシュ、ナビゲーションはネットワーク優先(オフラインはキャッシュ/'/'にフォールバック)、静的アセットはキャッシュ優先。API/非GET/クロスオリジンはキャッシュせず、res.ok&&basic でエラー/リダイレクト結果を弾く
- components/pwa/ServiceWorkerRegister: 本番のみ /sw.js を登録(開発HMRとの衝突回避)
- app/layout.tsx: export const viewport(device-width, cover, themeColor) + metadata.icons/appleWebApp
- middleware: sw.js/manifest/icon を認証ガードから除外(ログイン前でも取得可能)
- ProjectNav: 横スクロールStrip(折り返さない)、Header: モバイルでダッシュボードテキストリンクを非表示
This commit is contained in:
Ken Yasue
2026-06-25 12:01:01 +02:00
parent 9d7a23ea94
commit a845f51a35
13 changed files with 296 additions and 6 deletions

51
app/manifest.ts Normal file
View File

@ -0,0 +1,51 @@
import type { MetadataRoute } from 'next';
/**
* PWA マニフェスト。Next.js が /manifest.webmanifest を生成し、
* <link rel="manifest"> を自動で <head> に出力する。
*/
export default function manifest(): MetadataRoute.Manifest {
return {
name: 'Groupware',
short_name: 'Groupware',
description: 'Project-based team collaboration tool',
start_url: '/',
scope: '/',
display: 'standalone',
orientation: 'any',
background_color: '#111827',
theme_color: '#2563eb',
lang: 'en',
icons: [
{
src: '/icon-192.png',
sizes: '192x192',
type: 'image/png',
purpose: 'any',
},
{
src: '/icon-192.png',
sizes: '192x192',
type: 'image/png',
purpose: 'maskable',
},
{
src: '/icon-512.png',
sizes: '512x512',
type: 'image/png',
purpose: 'any',
},
{
src: '/icon-512.png',
sizes: '512x512',
type: 'image/png',
purpose: 'maskable',
},
{
src: '/icon.svg',
sizes: 'any',
type: 'image/svg+xml',
},
],
};
}