feat: implement complete web push notification system

- 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.
This commit is contained in:
2025-12-07 01:22:16 +00:00
parent 625ca40e48
commit 7cda58440f
21 changed files with 2144 additions and 8 deletions

View File

@@ -0,0 +1,82 @@
# 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)