Paul Bailey
3f1abd527e
- Create NotificationPrompt component that appears 3 seconds after app loads - Add to main layout so it shows on all pages (for logged-in users) - Prompt only shows if permission not yet requested - Users can dismiss temporarily or permanently - Add slide-up animation for smooth appearance - Create simplified SETUP_PUSH_NOTIFICATIONS.md guide Users will now be automatically prompted to enable notifications instead of having to go to the profile page.
2.1 KiB
2.1 KiB
Setup Push Notifications - Required Steps
You MUST do these 3 steps for notifications to work:
Step 1: Install the web-push package
npm install
This installs the web-push package that was added to package.json.
Step 2: Generate VAPID keys
npm run vapid:generate
This will output something like:
VAPID_PUBLIC_KEY=BNxxx...
VAPID_PRIVATE_KEY=xxx...
VAPID_SUBJECT=mailto:your-email@example.com
Copy these 3 lines and add them to your .env file.
⚠️ Important: Keep the VAPID_PRIVATE_KEY secret! Don't commit it to git.
Step 3: Update your database
npx prisma db push
This adds the PushSubscription table to your database.
Step 4: Restart your server
npm run dev
That's it!
Now when users open your app:
- After 3 seconds, they'll see a notification prompt at the bottom-right
- They can click "Enable Notifications" to subscribe
- Or they can dismiss it and enable later from their profile page
What happens automatically:
✅ Notification prompt appears 3 seconds after app loads ✅ Only shows if user hasn't been asked before ✅ Users can dismiss temporarily ("Later") or permanently ("Don't ask again") ✅ Notifications are sent when:
- Items are added/removed/completed in shared lists
- Users are invited to lists
- Invitations are accepted
- Collaborators are removed
Testing
- Open your app in Chrome
- Wait 3 seconds
- Click "Enable Notifications" when the prompt appears
- Open another browser/incognito window
- Log in as a different user
- Add an item to a shared list
- See the notification in the first browser!
Troubleshooting
"Push notifications not configured" error
- Make sure you ran
npm run vapid:generate - Make sure you added the keys to
.env - Restart your dev server
Prompt doesn't appear
- Check browser console for errors
- Make sure you're on localhost or HTTPS
- Clear localStorage and refresh if you dismissed it permanently
Notifications don't send
- Check server console for errors
- Verify VAPID keys are correct in
.env - Make sure database was updated with
npx prisma db push