PWA Setup Instructions

Current Status

✅ PWA files created (manifest.json, sw.js, icon.svg) ✅ Server updated to serve PWA resources ✅ Service worker registration added to all pages ✅ Certbot installed ⏳ Waiting for DNS configuration ⏳ HTTPS certificate generation ⏳ HTTPS server deployment

Next Steps

1. Configure DNS (GoDaddy - You handle this)

Go to your GoDaddy DNS management and add an A record:

• Type: A
• Name: @ (for root domain) or subdomain name (like "blog")
• Value: Your EC2 public IP
• TTL: 600 (default)

To get your EC2 public IP:

curl -s http://checkip.amazonaws.com

Wait 5-10 minutes for DNS propagation after saving.

2. Generate SSL Certificate (Run after DNS is set up)

Once DNS is pointing to your EC2:

# Replace yourdomain.com with your actual domain
sudo certbot certonly --standalone -d yourdomain.com

# If you used a subdomain (e.g., blog.yourdomain.com):
sudo certbot certonly --standalone -d blog.yourdomain.com

Important: You'll need to temporarily stop the blog service for this:

sudo systemctl stop blog
# Run certbot command above
sudo systemctl start blog

Certbot will:

• Verify you control the domain
• Generate SSL certificates
• Save them to /etc/letsencrypt/live/yourdomain.com/

3. Update HTTPS Server File

Edit /home/ubuntu/yap/server-https.js and replace YOUR_DOMAIN with your actual domain name (appears twice around line 600).

4. Create HTTPS systemd Service

sudo nano /etc/systemd/system/blog-https.service

Paste this configuration:

[Unit]
Description=The Sys - Blog Server (HTTPS)
After=network.target

[Service]
Type=simple
User=ubuntu
WorkingDirectory=/home/ubuntu/yap
ExecStart=/usr/bin/node /home/ubuntu/yap/server-https.js
Restart=always
RestartSec=10
StandardOutput=append:/home/ubuntu/yap/server.log
StandardError=append:/home/ubuntu/yap/server.log

[Install]
WantedBy=multi-user.target

5. Switch to HTTPS

# Stop HTTP server
sudo systemctl stop blog
sudo systemctl disable blog

# Start HTTPS server
sudo systemctl enable blog-https
sudo systemctl start blog-https

# Check status
sudo systemctl status blog-https

6. Update EC2 Security Group

In AWS Console, add inbound rule for HTTPS:

• Type: HTTPS
• Port: 443
• Source: 0.0.0.0/0

You can remove port 3000 rule after testing HTTPS works.

Testing PWA Installation

Once HTTPS is running:

1. Visit your domain on work Mac
2. Open browser DevTools (F12) → Application tab
3. Check "Service Workers" - should show sw.js registered
4. Check "Manifest" - should show "The Sys." app details
5. Look for "Install" button in address bar (Safari) or menu (Chrome/Edge)
6. Click install - app should open in standalone window
7. Test offline: Turn off WiFi, reload - should still work

Certificate Renewal

Let's Encrypt certs expire every 90 days. Certbot auto-renews via systemd timer:

# Check renewal timer status
sudo systemctl status certbot.timer

# Test renewal (dry run)
sudo certbot renew --dry-run

Troubleshooting

DNS not resolving:

# Check DNS propagation
dig yourdomain.com
# Should show your EC2 IP in A record

Certbot fails:

• Ensure port 80 is open in EC2 security group
• Ensure blog service is stopped during certbot
• Ensure DNS is fully propagated

HTTPS server won't start:

# Check logs
sudo journalctl -u blog-https -n 50

# Common issue: wrong domain name in server-https.js
# Make sure YOUR_DOMAIN is replaced correctly

Service worker not registering:

• Check browser console for errors
• Service workers only work on HTTPS (or localhost)
• Clear browser cache and reload

What You Get

• Installable app: Works like native app on Mac/phone
• Offline support: All docs cached after first visit
• Fast loads: Service worker serves from cache
• Auto-updates: Service worker fetches new content in background
• Clean UI: No browser chrome when installed

Icon Customization (Optional)

Currently using simple SVG with "S" letter. To create proper PNG icons:

1. Create/find 512x512 PNG icon
2. Generate 192x192 version (can use ImageMagick or online tool)
3. Replace /home/ubuntu/yap/public/icon.svg references in server files
4. Upload actual PNG files as icon-192.png and icon-512.png

Or keep the SVG - most modern browsers support it for PWAs.