Paul Bailey
8e7440166f
- Update docker-compose.yml to include VAPID environment variables - Create DOCKER_PUSH_NOTIFICATIONS_SETUP.md with Docker-specific instructions - Create PUSH_NOTIFICATIONS_DOCKER_CHECKLIST.md for easy setup tracking - Update .env.example with Docker command for generating VAPID keys Setup for Docker: 1. Generate VAPID keys (npx web-push generate-vapid-keys) 2. Add keys to .env file 3. Run: docker-compose exec app npx prisma db push 4. Rebuild: docker-compose up --build The web-push package is automatically installed during docker build. All notification functionality works the same in Docker as locally.
116 lines
2.9 KiB
Markdown
116 lines
2.9 KiB
Markdown
# Push Notifications Setup for Docker
|
|
|
|
## Quick Setup (3 Steps)
|
|
|
|
### Step 1: Generate VAPID Keys
|
|
|
|
Run this **on your host machine** (not in Docker):
|
|
|
|
```bash
|
|
npx web-push generate-vapid-keys
|
|
```
|
|
|
|
Or if you prefer, you can run it in a temporary container:
|
|
|
|
```bash
|
|
docker run --rm -it node:20-slim sh -c "npm install -g web-push && web-push generate-vapid-keys"
|
|
```
|
|
|
|
This will output:
|
|
```
|
|
=======================================
|
|
Public Key:
|
|
BNxxx...
|
|
|
|
Private Key:
|
|
xxx...
|
|
=======================================
|
|
```
|
|
|
|
### Step 2: Add Keys to .env File
|
|
|
|
Add these three lines to your `.env` file:
|
|
|
|
```env
|
|
VAPID_PUBLIC_KEY=BNxxx...
|
|
VAPID_PRIVATE_KEY=xxx...
|
|
VAPID_SUBJECT=mailto:your-email@example.com
|
|
```
|
|
|
|
⚠️ **Important**:
|
|
- Replace `BNxxx...` with your actual public key
|
|
- Replace `xxx...` with your actual private key
|
|
- Replace `your-email@example.com` with your actual email
|
|
- Keep the VAPID_PRIVATE_KEY secret!
|
|
|
|
### Step 3: Update Database Schema
|
|
|
|
Run this to add the PushSubscription table:
|
|
|
|
```bash
|
|
docker-compose exec app npx prisma db push
|
|
```
|
|
|
|
Or if your containers aren't running yet:
|
|
|
|
```bash
|
|
docker-compose up -d
|
|
docker-compose exec app npx prisma db push
|
|
```
|
|
|
|
### Step 4: Rebuild and Restart
|
|
|
|
```bash
|
|
docker-compose down
|
|
docker-compose up --build
|
|
```
|
|
|
|
## That's It!
|
|
|
|
Your app now has push notifications enabled! When users open the app:
|
|
- After 3 seconds, they'll see a notification prompt
|
|
- They can enable notifications with one click
|
|
- Notifications will be sent automatically for list events
|
|
|
|
## Verify It's Working
|
|
|
|
1. Open your app at `http://localhost:3500`
|
|
2. Log in
|
|
3. Wait 3 seconds for the notification prompt
|
|
4. Click "Enable Notifications"
|
|
5. Open another browser/incognito window
|
|
6. Log in as a different user
|
|
7. Add an item to a shared list
|
|
8. See the notification in the first browser!
|
|
|
|
## Troubleshooting
|
|
|
|
### "Push notifications not configured" error
|
|
- Make sure VAPID keys are in `.env`
|
|
- Make sure you rebuilt the containers: `docker-compose up --build`
|
|
- Check logs: `docker-compose logs app`
|
|
|
|
### Database table missing
|
|
- Run: `docker-compose exec app npx prisma db push`
|
|
- Check if it succeeded: `docker-compose exec app npx prisma studio`
|
|
|
|
### Environment variables not loading
|
|
- Make sure `.env` is in the same directory as `docker-compose.yml`
|
|
- Restart containers: `docker-compose restart`
|
|
- Check if variables are loaded: `docker-compose exec app env | grep VAPID`
|
|
|
|
## Docker-Specific Notes
|
|
|
|
- The `web-push` package is automatically installed during `docker-compose up --build`
|
|
- VAPID keys are loaded from your `.env` file into the container
|
|
- The database schema update must be run inside the container
|
|
- All notification functionality works the same in Docker as locally
|
|
|
|
## Production Deployment
|
|
|
|
For production:
|
|
1. Generate production VAPID keys (different from dev)
|
|
2. Add them to your production environment variables
|
|
3. Run `npx prisma db push` in production container
|
|
4. Ensure your production URL uses HTTPS (required for push notifications)
|