Manifest test maybe (#555)

Author: AlexJSully

README.md

@@ -29,7 +29,7 @@ The app will be available at <http://localhost:3000/>.
 
 | Chrome | Firefox | Edge | Safari | Opera | Tor | Mobile |
 | ------ | ------- | ---- | ------ | ----- | --- | ------ |
-| ✔     | ✔      | ✔   | ✔     | ✔    | ✔  | ✔     |
+| ✔      | ✔       | ✔    | ✔      | ✔     | ✔   | ✔      |
 
 ## Known Issues
 

docs/architecture/index.md

@@ -10,7 +10,7 @@ This document provides a high-level overview of the architecture for AlexJSully'
 - **Testing:** Cypress (E2E), Jest (unit)
 - **Error Tracking:** Sentry
 - **Backend/Data:** Firebase
-- **PWA Support:** next-pwa
+- **PWA Support:** Native Next.js
 
 ## 📂 Directory Structure
 
@@ -40,7 +40,8 @@ flowchart TD
     React_Components -->|UI| MUI
     NextJS_App -->|API| Firebase
     NextJS_App -->|Error| Sentry
-    NextJS_App -->|Service Worker| PWA
+    NextJS_App -->|Metadata| PWA_Manifest
+    PWA_Manifest -->|Install| User_Device
 ```
 
 ## 🧩 Subsystems

docs/architecture/pwa.md

@@ -1,62 +1,98 @@
 # Service Workers & PWA Documentation
 
-This document explains how Progressive Web App (PWA) features and service workers are implemented in the AlexJSully Portfolio project.
+This document explains how Progressive Web App (PWA) features are implemented in the AlexJSully Portfolio project using native Next.js capabilities.
 
-## 📦 Purpose
+## Purpose
 
-PWA support enables offline access, faster load times, and installable experiences for users.
+PWA support enables:
 
-## 🏗️ Structure
+- **Installability**: Users can install the website as a standalone app.
+- **Offline Capabilities**: Basic offline support via browser caching and service workers (if configured).
+- **Native-like Experience**: Standalone display mode and custom icons.
 
-## 🔍 Usage Example
+## Architecture
 
-## 🚀 Features
+The PWA implementation relies on Next.js's built-in metadata and route handlers, specifically `manifest.ts`.
 
-- **Offline caching:** Assets, pages, and API responses are cached for offline use.
-- **Service worker:** Handles background sync, cache updates, and push notifications.
-- **Web App Manifest:** Enables installability and controls app appearance on devices.
-- **Responsive design:** Optimized for mobile and desktop.
+```mermaid
+flowchart TD
+    Browser[User Browser]
+    Manifest["src/app/manifest.ts"]
+    Icons["public/icon/"]
+    NextJS[Next.js Server]
 
-## ⚙️ Technical Implementation
+    Browser -- Requests Manifest --> NextJS
+    NextJS -- Generates JSON --> Manifest
+    Manifest -- References --> Icons
+    Browser -- Downloads --> Icons
+    Browser -- Install Prompt --> User
+```
 
-### next-pwa Configuration
+## Features
+
+- **Dynamic Manifest**: Generated programmatically via `src/app/manifest.ts`.
+- **Responsive Icons**: Multiple icon sizes and maskable icons for different devices.
+- **Theming**: Custom theme and background colors defined in the manifest.
+- **Display Modes**: Supports `standalone`, `minimal-ui`, and `window-controls-overlay`.
+
+## Technical Implementation
+
+### Manifest Generation (`src/app/manifest.ts`)
+
+Instead of a static `manifest.json`, we use a TypeScript file to generate the manifest dynamically. This allows for type safety and easier maintenance.
+
+```typescript
+// src/app/manifest.ts
+import type { MetadataRoute } from 'next';
+
+export default function manifest(): MetadataRoute.Manifest {
+	return {
+		name: "Alexander Sullivan's Portfolio",
+		short_name: "Alexander Sullivan's Portfolio",
+		// ... other properties
+		icons: [
+			{
+				src: '/icon/android-chrome-192x192.png',
+				sizes: '192x192',
+				type: 'image/png',
+			},
+			// ... other icons
+		],
+	};
+}
+```
 
-- The `next-pwa` plugin is configured in `next.config.js`:
-    - Specifies service worker location, caching strategies, and runtime behaviors.
-    - Example config:
+### Service Worker Lifecycle
 
-```js
-// next.config.js
-const withPWA = require('next-pwa');
-module.exports = withPWA({
-	pwa: {
-		dest: 'public',
-		register: true,
-		skipWaiting: true,
-		disable: process.env.NODE_ENV === 'development',
-	},
-});
-```
+While `next-pwa` previously handled service worker generation, native Next.js apps can use manual service worker registration or rely on standard browser caching headers.
 
-### Manifest & Icons
+```mermaid
+sequenceDiagram
+    participant User
+    participant Browser
+    participant Network
+    participant Cache
 
-- `public/manifest.json` defines app name, icons, theme color, and display mode.
-- Icons for various devices are in `public/icon/`.
+    User->>Browser: Visits Site
+    Browser->>Network: Request Resources
+    Network-->>Browser: Return Resources
+    Browser->>Cache: Cache Static Assets (via Headers)
 
-### Integration Flow
+    opt Offline Mode
+        User->>Browser: Visits Site (Offline)
+        Browser->>Cache: Check Cache
+        Cache-->>Browser: Return Cached Assets
+    end
+```
 
-1. User visits site; service worker is registered.
-2. Assets and pages are cached according to config.
-3. Manifest enables "Add to Home Screen" prompt.
-4. Updates are pushed via service worker when available.
+## Customization
 
-## 🛠️ Customization & Extensibility
+To modify PWA settings:
 
-- Modify caching strategies in `next.config.js` for custom needs.
-- Add push notification support via service worker.
-- Update manifest for branding and install experience.
+1. **Manifest**: Edit `src/app/manifest.ts` to change app name, colors, or icons.
+2. **Icons**: Add or replace images in `public/icon/` and update the manifest accordingly.
 
-## 🔗 Related Docs
+## Related Docs
 
 - [Architecture Overview](./index.md)
-- [Usage Guides](../usage/index.md)
+- [Next.js Manifest Documentation](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/manifest)

next.config.js

@@ -3,15 +3,7 @@ const { withSentryConfig } = require('@sentry/nextjs');
 
 const isDevelopment = process.env.NEXT_PUBLIC_ENVIRONMENT === 'development';
 
-const withPWA = require('next-pwa')({
-	buildExcludes: ['app-build-manifest.json'],
-	dest: 'public',
-	disable: isDevelopment,
-	register: true,
-	skipWaiting: true,
-});
-
-const nextConfig = withPWA({
+const nextConfig = {
 	images: {
 		remotePatterns: [
 			{
@@ -63,7 +55,7 @@ const nextConfig = withPWA({
 			},
 		},
 	},
-});
+};
 
 const sentryWebpackPluginOptions = {
 	// Suppresses source map uploading logs during build