Serving Content

Hosting Your PWA

Your PWA can be hosted on any static file server. Popular options include:

• GitHub Pages: Free for open-source projects
• Netlify: Free tier with HTTPS, deploy from Git
• Vercel: Optimized for frontend frameworks
• Firebase Hosting: Google's CDN-backed hosting
• Azure Static Web Apps: Integrated with Azure services
• Any HTTPS server: Nginx, Apache, Caddy

HTTPS Configuration

Service Workers require HTTPS. Here's how to set it up on common platforms:

# Nginx HTTPS configuration
server {
    listen 443 ssl;
    server_name my-pwa.example.com;

    ssl_certificate /etc/letsencrypt/live/my-pwa/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/my-pwa/privkey.pem;

    root /var/www/my-pwa;
    index index.html;

    # Important: Serve Service Worker with correct headers
    location /sw.js {
        add_header Service-Worker-Allowed /;
        add_header Cache-Control "no-cache";
        add_header Content-Type "application/javascript";
    }

    # Cache static assets
    location /static/ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

CDN and Delivery

Content Delivery Networks (CDNs) can significantly improve load times for users around the world. When using a CDN with a PWA:

• Ensure the Service Worker is served from the same origin as the page
• Use Cache-Control headers properly
• Cross-origin resources should not be cached by SW unless CORS is properly configured

Security Considerations

• Content Security Policy (CSP): Add CSP headers to prevent XSS
• Subresource Integrity (SRI): Ensure CDN assets haven't been tampered with
• HTTPS: Redirect HTTP to HTTPS
• HSTS: Use Strict-Transport-Security header

# Security headers for PWA
add_header Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline';";
add_header Strict-Transport-Security "max-age=63072000; includeSubDomains; preload";
add_header X-Content-Type-Options "nosniff";
add_header X-Frame-Options "DENY";