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

155 lines
4.3 KiB
Markdown

# Nginx Reverse Proxy Configuration for Talk2Me
## Nginx Configuration
Add the following to your Nginx configuration for the domain `talk2me.dr74.net`:
```nginx
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:
```bash
# 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**:
```bash
curl -I https://talk2me.dr74.net
```
2. **Verify Service Worker**:
```bash
curl https://talk2me.dr74.net/service-worker.js
```
3. **Check Manifest**:
```bash
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