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.
83 lines
1.9 KiB
Markdown
83 lines
1.9 KiB
Markdown
# Push Notifications - Quick Start
|
|
|
|
## 🚀 5-Minute Setup
|
|
|
|
### 1. Install & Generate Keys
|
|
```bash
|
|
npm install
|
|
npm run vapid:generate
|
|
```
|
|
|
|
### 2. Add Keys to .env
|
|
```env
|
|
VAPID_PUBLIC_KEY=<copy from output>
|
|
VAPID_PRIVATE_KEY=<copy from output>
|
|
VAPID_SUBJECT=mailto:your-email@example.com
|
|
```
|
|
|
|
### 3. Update Database
|
|
```bash
|
|
npx prisma db push
|
|
```
|
|
|
|
### 4. Add to Profile Page
|
|
```typescript
|
|
// app/profile/page.tsx
|
|
import NotificationSettings from '@/components/NotificationSettings';
|
|
|
|
// Add <NotificationSettings /> to your page
|
|
```
|
|
|
|
### 5. Send Notifications
|
|
```typescript
|
|
// 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:
|
|
1. Deploy with HTTPS
|
|
2. User must "Add to Home Screen"
|
|
3. Requires iOS 16.4+
|
|
|
|
## 🔧 Available Notification Functions
|
|
|
|
```typescript
|
|
// 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)
|