🚀 [CRITICAL] Fix PWA compliance issues for web app store submission

GitHub Issue: PWA Compliance and Web App Store Readiness

Title

🚀 [CRITICAL] Fix PWA compliance issues for web app store submission

Priority

HIGH - Blocking web app store submission and production PWA features

Description

The Claude Code web application has several critical PWA compliance issues that prevent successful submission to web app stores (Chrome Web Store, Microsoft Store) and degrade the user experience. These issues must be resolved for production deployment.

Current Issues Identified

1. Next.js Metadata Configuration Warnings

⚠ Unsupported metadata themeColor is configured in metadata export in /. Please move it to viewport export instead.
⚠ Unsupported metadata viewport is configured in metadata export in /. Please move it to viewport export instead.

2. Missing PWA Assets

• [ ] App icons (192x192, 512x512 PNG files)
• [ ] Apple touch icons
• [ ] Favicon variations
• [ ] Screenshots for app stores
• [ ] Service worker for offline functionality

3. PWA Manifest Issues

• [ ] Missing icon files referenced in manifest.json
• [ ] No service worker registration
• [ ] Missing offline fallback pages

Implementation Requirements

A. Fix Next.js 14 Metadata Configuration

Update /web-app/src/app/layout.tsx:

// BEFORE (deprecated)
export const metadata: Metadata = {
  themeColor: '#0ea5e9',
  viewport: {
    width: 'device-width',
    initialScale: 1,
    maximumScale: 1,
    userScalable: false,
  },
  // ... other metadata
};

// AFTER (Next.js 14+ compliant)
export const metadata: Metadata = {
  title: 'Claude Code - AI-Powered Development Environment',
  description: 'Intelligent coding assistant powered by Claude AI',
  manifest: '/manifest.json',
  // Remove themeColor and viewport from here
};

export const viewport: Viewport = {
  width: 'device-width',
  initialScale: 1,
  maximumScale: 1,
  userScalable: false,
  themeColor: '#0ea5e9',
};

B. Generate PWA Assets

Create the following files in /web-app/public/:

# Required PWA icons
/icon-192x192.png      # 192x192 PNG, maskable + any purpose
/icon-512x512.png      # 512x512 PNG, maskable + any purpose
/apple-touch-icon.png  # 180x180 PNG for iOS
/favicon.ico           # 32x32 ICO format
/favicon-16x16.png     # 16x16 PNG
/favicon-32x32.png     # 32x32 PNG

# App store screenshots
/screenshot-wide.png   # 1280x720 desktop screenshot
/screenshot-narrow.png # 720x1280 mobile screenshot

C. Implement Service Worker

Create /web-app/public/sw.js:

const CACHE_NAME = 'claude-code-v1';
const urlsToCache = [
  '/',
  '/manifest.json',
  '/icon-192x192.png',
  '/icon-512x512.png'
];

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then((cache) => cache.addAll(urlsToCache))
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then((response) => {
        return response || fetch(event.request);
      })
  );
});

D. Update Next.js Configuration

Modify /web-app/next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  // ... existing config
  
  async headers() {
    return [
      {
        source: '/sw.js',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=0, must-revalidate',
          },
          {
            key: 'Service-Worker-Allowed',
            value: '/',
          },
        ],
      },
      {
        source: '/manifest.json',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=86400, s-maxage=86400',
          },
        ],
      },
    ];
  },
};

E. Register Service Worker

Add to main layout or app component:

useEffect(() => {
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js')
      .then((registration) => {
        console.log('SW registered: ', registration);
      })
      .catch((registrationError) => {
        console.log('SW registration failed: ', registrationError);
      });
  }
}, []);

Success Criteria

• [ ] Build process completes without metadata warnings
• [ ] All referenced PWA assets exist and are properly sized
• [ ] Service worker registers successfully
• [ ] PWA installability criteria met (Chrome DevTools Lighthouse)
• [ ] Web app store compliance requirements satisfied
• [ ] Lighthouse PWA score > 90

Testing Requirements

1. Local Testing:

``bash
cd web-app
npm run build
npm run start
# Open Chrome DevTools > Application > Service Workers
# Verify registration and caching
``

1. PWA Validation:

• Chrome DevTools > Lighthouse > PWA audit
• Edge DevTools > PWA installation test
• Safari Web Inspector > Service Worker status

1. Store Readiness:

• Chrome Web Store Developer Dashboard validation
• Microsoft Store PWA Builder check

Timeline

Estimated Completion: 4-6 hours

• Asset generation: 2 hours
• Code implementation: 2 hours
• Testing and validation: 2 hours

Dependencies

• Image editing software for icon generation (Figma, Photoshop, or CLI tools)
• Chrome/Edge browsers for PWA testing
• Access to web app store developer accounts for validation

Related Files

• /web-app/src/app/layout.tsx
• /web-app/public/manifest.json
• /web-app/next.config.js
• /web-app/public/ (new PWA assets)

Impact

HIGH BUSINESS IMPACT - This issue blocks:

• Web app store submissions (Chrome Web Store, Microsoft Store)
• Optimal PWA user experience (offline functionality, installation)
• Production deployment quality standards
• Mobile web performance and engagement