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: モバイルでダッシュボードテキストリンクを非表示
52 lines
1.1 KiB
TypeScript
52 lines
1.1 KiB
TypeScript
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',
|
|
},
|
|
],
|
|
};
|
|
}
|