talk2me/REVERSE_PROXY.md
Adolfo Delorenzo d818ec7d73 Major PWA and mobile UI improvements
- Fixed PWA installation on Android by correcting manifest.json icon configuration
- Made UI mobile-friendly with compact layout and sticky record button
- Implemented auto-translation after transcription stops
- Updated branding from 'Voice Translator' to 'Talk2Me' throughout
- Added reverse proxy support with ProxyFix middleware
- Created diagnostic tools for PWA troubleshooting
- Added proper HTTP headers for service worker and manifest
- Improved mobile CSS with responsive design
- Fixed JavaScript bundling with webpack configuration
- Updated service worker cache versioning
- Added comprehensive PWA documentation

These changes ensure the app works properly as a PWA on Android devices
and provides a better mobile user experience.
2025-06-03 12:28:09 -06:00

4.3 KiB

Nginx Reverse Proxy Configuration for Talk2Me

Nginx Configuration

Add the following to your Nginx configuration for the domain talk2me.dr74.net:

server {
    listen 443 ssl http2;
    server_name talk2me.dr74.net;
    
    # SSL configuration
    ssl_certificate /path/to/ssl/cert.pem;
    ssl_certificate_key /path/to/ssl/key.pem;
    
    # Security headers
    add_header X-Content-Type-Options nosniff;
    add_header X-Frame-Options SAMEORIGIN;
    add_header X-XSS-Protection "1; mode=block";
    add_header Referrer-Policy "no-referrer-when-downgrade";
    
    # Proxy settings
    location / {
        proxy_pass http://localhost:5000;  # Adjust port as needed
        proxy_http_version 1.1;
        
        # Important headers for PWA and WebSocket support
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Forwarded-Host $host;
        
        # WebSocket support
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        
        # Timeouts for long-running requests
        proxy_connect_timeout 60s;
        proxy_send_timeout 60s;
        proxy_read_timeout 60s;
        
        # Buffer settings
        proxy_buffering off;
        proxy_buffer_size 4k;
        proxy_buffers 8 4k;
        proxy_busy_buffers_size 8k;
        
        # Disable cache for dynamic content
        proxy_cache_bypass 1;
        proxy_no_cache 1;
    }
    
    # Static files with caching
    location /static/ {
        proxy_pass http://localhost:5000/static/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        
        # Cache static files
        expires 30d;
        add_header Cache-Control "public, immutable";
    }
    
    # Service worker needs special handling
    location /service-worker.js {
        proxy_pass http://localhost:5000/service-worker.js;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        
        # No cache for service worker
        add_header Cache-Control "no-cache, no-store, must-revalidate";
        add_header Pragma "no-cache";
        expires 0;
    }
    
    # Manifest file
    location /static/manifest.json {
        proxy_pass http://localhost:5000/static/manifest.json;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        
        # Allow manifest to be cached briefly
        expires 1h;
        add_header Cache-Control "public";
        add_header Content-Type "application/manifest+json";
    }
}

# Redirect HTTP to HTTPS
server {
    listen 80;
    server_name talk2me.dr74.net;
    return 301 https://$server_name$request_uri;
}

Flask Application Configuration

Set these environment variables for the Talk2Me application:

# Add to .env file or set as environment variables
FLASK_ENV=production
SESSION_COOKIE_SECURE=true
SESSION_COOKIE_SAMESITE=Lax
PREFERRED_URL_SCHEME=https

# If using a non-standard port
# SERVER_NAME=talk2me.dr74.net

Testing the Configuration

  1. Check SSL Certificate:

    curl -I https://talk2me.dr74.net
    
  2. Verify Service Worker:

    curl https://talk2me.dr74.net/service-worker.js
    
  3. Check Manifest:

    curl https://talk2me.dr74.net/static/manifest.json
    
  4. Test PWA Installation:

    • Visit https://talk2me.dr74.net in Chrome
    • Open Developer Tools (F12)
    • Go to Application tab
    • Check "Manifest" section for any errors
    • Check "Service Workers" section

Common Issues and Solutions

Issue: Icons not loading

  • Ensure static files are being served correctly
  • Check Nginx error logs: tail -f /var/log/nginx/error.log

Issue: Service Worker not registering

  • Verify HTTPS is working correctly
  • Check browser console for errors
  • Ensure service worker scope is correct

Issue: "Add to Home Screen" not appearing

  • Clear browser cache and data
  • Ensure all manifest requirements are met
  • Check Chrome's PWA criteria in DevTools Lighthouse

Issue: WebSocket connections failing

  • Verify Nginx has WebSocket headers configured
  • Check if firewall allows WebSocket connections