#!/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