Setting Up Pusher for Web Push Notifications

Setting Up Pusher Services

Namviek uses two Pusher services that require configuration:

1. Pusher Channels - for real-time updates
2. Pusher Beams - for web push notifications

Step 1: Setup Pusher Channels

1. Go to Pusher.com and create an account
2. Click "Create app"
3. Fill in the app details:
   • Name your app
   • Select "Channels"
   • Choose cluster: ap1 (Asia Pacific)
   • Select tech stack: Node.js & Next.js
4. From your app dashboard, collect these values:
   • NEXT_PUBLIC_PUSHER_CHANNEL_APP_KEY: Find under "App Keys" as "key"
   • NEXT_PUBLIC_PUSHER_CHANNEL_APP_CLUSTER: Should be "ap1"
   • PUSHER_CHANNEL_APP_ID: Find under "App Keys" as "app_id"
   • PUSHER_CHANNEL_SECRET: Find under "App Keys" as "secret"

Step 2: Setup Pusher Beams

1. From Pusher dashboard, create another app
2. Select "Beams" this time
3. Configure your app:
   • Name it (e.g., "namviek-notifications")
   • Select instance location
4. From Beams dashboard, collect these values:
   • NEXT_PUBLIC_PUSHER_INSTANCE_ID: Found under "Instance ID"
   • PUSHER_INSTANCE_ID: Same as above
   • PUSHER_SECRET_KEY: Found under "Primary key"

Step 3: Update Environment Variables

Add these variables to your backend and frontend configurations:

// .env

// Pusher Channels Configuration
NEXT_PUBLIC_PUSHER_CHANNEL_APP_KEY=your_channel_app_key
NEXT_PUBLIC_PUSHER_CHANNEL_APP_CLUSTER=ap1
PUSHER_CHANNEL_APP_ID=your_channel_app_id
PUSHER_CHANNEL_SECRET=your_channel_secret

// Pusher Beams Configuration
NEXT_PUBLIC_PUSHER_INSTANCE_ID=your_beam_instance_id
PUSHER_INSTANCE_ID=your_beam_instance_id
PUSHER_SECRET_KEY=your_beam_secret_key

Important Notes

• Keep all secret keys secure and never expose them in client-side code
• The NEXT_PUBLIC_ prefixed variables are used in the frontend
• Non-prefixed variables are for backend use only
• Make sure to update these variables in both your development and production environments

Next Steps

1. Deploy your updated environment variables
2. Test notifications using the Pusher Debug Console
3. Configure web push notification permissions in your app