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:
82
PUSH_NOTIFICATIONS_QUICK_START.md
Normal file
82
PUSH_NOTIFICATIONS_QUICK_START.md
Normal 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)
|
||||
Reference in New Issue
Block a user