streamflow/scripts/test-pwa.sh

#!/bin/bash

# StreamFlow - PWA Configuration & Testing Script
# Validates and tests PWA functionality

set -e

echo "🌐 StreamFlow PWA Configuration & Testing"
echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"

cd "$(dirname "$0")/.."
PROJECT_ROOT="$(pwd)"

# Colors
RED='\033[0;31m'
GREEN='\033[0;32m'
YELLOW='\033[1;33m'
NC='\033[0m' # No Color

echo ""
echo "🔍 Checking PWA requirements..."

# Check manifest.json
if [ -f "frontend/public/manifest.json" ]; then
    echo -e "${GREEN}✓${NC} manifest.json exists"
    
    # Validate JSON
    if command -v jq &> /dev/null; then
        if jq empty frontend/public/manifest.json 2>/dev/null; then
            echo -e "${GREEN}✓${NC} manifest.json is valid JSON"
        else
            echo -e "${RED}✗${NC} manifest.json has JSON errors"
        fi
    fi
else
    echo -e "${RED}✗${NC} manifest.json not found"
fi

# Check service worker
if [ -f "frontend/public/service-worker.js" ]; then
    echo -e "${GREEN}✓${NC} service-worker.js exists"
else
    echo -e "${RED}✗${NC} service-worker.js not found"
fi

# Check icons
REQUIRED_ICONS=(72 96 128 144 152 192 384 512)
MISSING_ICONS=()

for size in "${REQUIRED_ICONS[@]}"; do
    if [ -f "frontend/public/icons/icon-${size}x${size}.svg" ] || [ -f "frontend/public/icons/icon-${size}x${size}.png" ]; then
        echo -e "${GREEN}✓${NC} Icon ${size}x${size} exists"
    else
        echo -e "${YELLOW}⚠${NC} Icon ${size}x${size} missing"
        MISSING_ICONS+=($size)
    fi
done

# Check HTTPS requirement
echo ""
echo "📋 PWA Requirements Checklist:"
echo ""
echo "Required for PWA:"
echo "  [$([ -f frontend/public/manifest.json ] && echo '✓' || echo '✗')] manifest.json with name, icons, start_url"
echo "  [$([ -f frontend/public/service-worker.js ] && echo '✓' || echo '✗')] service-worker.js registered"
echo "  [$([ ${#MISSING_ICONS[@]} -eq 0 ] && echo '✓' || echo '✗')] Icons (at least 192x192 and 512x512)"
echo "  [?] HTTPS in production (localhost exempt for testing)"
echo "  [?] Valid SSL certificate (production only)"

echo ""
echo "Optional but recommended:"
echo "  [$([ -f frontend/public/favicon.ico ] && echo '✓' || echo '✗')] favicon.ico"
echo "  [$(grep -q 'apple-touch-icon' frontend/index.html 2>/dev/null && echo '✓' || echo '✗')] Apple touch icons"
echo "  [$(grep -q 'theme-color' frontend/index.html 2>/dev/null && echo '✓' || echo '✗')] Theme color meta tag"
echo "  [?] Background sync capability"
echo "  [?] Push notifications setup"

echo ""
echo "🧪 Testing PWA functionality..."

# Check if server is running
if curl -s http://localhost:12345 > /dev/null 2>&1; then
    echo -e "${GREEN}✓${NC} Server is running on port 12345"
    
    # Test manifest
    if curl -s http://localhost:12345/manifest.json > /dev/null 2>&1; then
        echo -e "${GREEN}✓${NC} Manifest is accessible"
    else
        echo -e "${RED}✗${NC} Manifest is not accessible"
    fi
    
    # Test service worker
    if curl -s http://localhost:12345/service-worker.js > /dev/null 2>&1; then
        echo -e "${GREEN}✓${NC} Service worker is accessible"
    else
        echo -e "${RED}✗${NC} Service worker is not accessible"
    fi
    
    # Test icons
    if curl -s http://localhost:12345/icons/icon-192x192.svg > /dev/null 2>&1 || \
       curl -s http://localhost:12345/icons/icon-192x192.png > /dev/null 2>&1; then
        echo -e "${GREEN}✓${NC} Icons are accessible"
    else
        echo -e "${YELLOW}⚠${NC} Some icons may not be accessible"
    fi
else
    echo -e "${YELLOW}⚠${NC} Server is not running. Start with: docker compose up -d"
fi

echo ""
echo "📱 Testing PWA on devices:"
echo ""
echo "Chrome (Desktop):"
echo "  1. Open http://localhost:12345 or https://your-domain.com"
echo "  2. Look for install icon in address bar"
echo "  3. Click to install as app"
echo ""
echo "Chrome (Android):"
echo "  1. Open the website in Chrome"
echo "  2. Tap menu (⋮) → 'Add to Home screen'"
echo "  3. App will install like native app"
echo ""
echo "Safari (iOS):"
echo "  1. Open the website in Safari"
echo "  2. Tap Share button"
echo "  3. Tap 'Add to Home Screen'"
echo ""
echo "Testing offline:"
echo "  1. Open PWA"
echo "  2. Open DevTools → Application → Service Workers"
echo "  3. Check 'Offline' checkbox"
echo "  4. Refresh page - static assets should load"
echo ""
echo "🔍 Lighthouse PWA Audit:"
echo "  npm install -g lighthouse"
echo "  lighthouse http://localhost:12345 --view --only-categories=pwa"
echo ""
echo "✅ PWA configuration check complete!"
echo ""
if [ ${#MISSING_ICONS[@]} -gt 0 ]; then
    echo -e "${YELLOW}⚠${NC} Missing icons: ${MISSING_ICONS[*]}"
    echo "   Run: ./scripts/generate-assets.sh"
fi