Paul Bailey
7cda58440f
- Add self-hosted push notifications using VAPID (no external services) - Create PushSubscription model in database - Implement server-side push logic with web-push library - Add notification helpers for list events (items, invitations, collaborators) - Create NotificationSettings UI component for profile page - Add usePushNotifications React hook for subscription management - Create API routes for subscription management and VAPID key - Update service worker with push event handlers - Integrate notifications into item actions (add, remove, complete) - Integrate notifications into sharing actions (invite, accept, remove) - Add VAPID key generation script - Add comprehensive documentation and setup guides Notifications are sent when: - Items are added/removed/completed in shared lists - Users are invited to lists - Invitations are accepted - Collaborators are removed from lists Works on iOS 16.4+ (when installed to home screen), Android, and desktop browsers.
1.9 KiB
1.9 KiB
Push Notifications - Quick Start
🚀 5-Minute Setup
1. Install & Generate Keys
npm install
npm run vapid:generate
2. Add Keys to .env
VAPID_PUBLIC_KEY=<copy from output>
VAPID_PRIVATE_KEY=<copy from output>
VAPID_SUBJECT=mailto:your-email@example.com
3. Update Database
npx prisma db push
4. Add to Profile Page
// app/profile/page.tsx
import NotificationSettings from '@/components/NotificationSettings';
// Add <NotificationSettings /> to your page
5. Send Notifications
// In your action files
import { notifyItemAdded } from '@/lib/notification-helpers';
// After creating an item:
await notifyItemAdded(listId, item.title, session.user.id);
✅ Done!
Users can now:
- Enable notifications in their profile
- Receive push notifications on all their devices
- Get notified about list activity even when the app is closed
📱 iOS Support
For iOS notifications:
- Deploy with HTTPS
- User must "Add to Home Screen"
- Requires iOS 16.4+
🔧 Available Notification Functions
// Item notifications
notifyItemAdded(listId, itemTitle, userId)
notifyItemRemoved(listId, itemTitle, userId)
notifyItemCompleted(listId, itemTitle, userId)
// Invitation notifications
notifyListInvitation(invitationId, email)
notifyInvitationAccepted(invitationId)
// Collaboration notifications
notifyRemovedFromList(userId, listTitle, removedByUserId)
📚 Full Documentation
- PUSH_NOTIFICATIONS_SETUP.md - Complete setup guide
- PUSH_NOTIFICATIONS_INTEGRATION_EXAMPLE.md - Code examples
- PUSH_NOTIFICATIONS_GUIDE.md - Architecture & testing
🎯 Key Features
- ✅ Self-hosted (no external services)
- ✅ Works on iOS, Android, Desktop
- ✅ Multiple devices per user
- ✅ Automatic subscription cleanup
- ✅ Non-blocking (won't slow down your app)