a845f51a35
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: モバイルでダッシュボードテキストリンクを非表示
62 lines
1.5 KiB
TypeScript
62 lines
1.5 KiB
TypeScript
import type { Metadata, Viewport } from 'next';
|
|
import { cookies } from 'next/headers';
|
|
import './globals.css';
|
|
import { I18nProvider } from '@/lib/i18n/I18nProvider';
|
|
import { ServiceWorkerRegister } from '@/components/pwa/ServiceWorkerRegister';
|
|
import type { Locale, Theme } from '@/lib/types';
|
|
|
|
export const metadata: Metadata = {
|
|
title: 'Groupware',
|
|
description: 'Project-based team collaboration tool',
|
|
applicationName: 'Groupware',
|
|
appleWebApp: {
|
|
capable: true,
|
|
statusBarStyle: 'default',
|
|
title: 'Groupware',
|
|
},
|
|
icons: {
|
|
icon: '/icon.svg',
|
|
apple: '/icon-192.png',
|
|
},
|
|
};
|
|
|
|
export const viewport: Viewport = {
|
|
width: 'device-width',
|
|
initialScale: 1,
|
|
viewportFit: 'cover',
|
|
themeColor: '#2563eb',
|
|
};
|
|
|
|
function resolveTheme(v: string | undefined): Theme {
|
|
return v === 'light' ? 'light' : 'dark'; // 既定は dark
|
|
}
|
|
|
|
function resolveLocale(v: string | undefined): Locale {
|
|
return v === 'ja' ? 'ja' : 'en'; // 既定は en
|
|
}
|
|
|
|
export default async function RootLayout({
|
|
children,
|
|
}: {
|
|
children: React.ReactNode;
|
|
}) {
|
|
const cookieStore = await cookies();
|
|
const theme = resolveTheme(cookieStore.get('theme')?.value);
|
|
const locale = resolveLocale(cookieStore.get('locale')?.value);
|
|
|
|
return (
|
|
<html
|
|
lang={locale}
|
|
className={theme === 'dark' ? 'dark' : ''}
|
|
style={{ colorScheme: theme }}
|
|
>
|
|
<body>
|
|
<I18nProvider initialLocale={locale} initialTheme={theme}>
|
|
{children}
|
|
</I18nProvider>
|
|
<ServiceWorkerRegister />
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|