83 lines
3.0 KiB
Markdown
83 lines
3.0 KiB
Markdown
# Implementation Plan - PWA Push Notifications
|
|
|
|
This plan outlines the steps to implement Push Notifications for the Cat Sitting Planner PWA.
|
|
|
|
## Goals
|
|
- Allow users to subscribe to Push Notifications from the browser.
|
|
- Send Push Notifications for existing events (New Booking, Cancellation, Completion, Instructions Update).
|
|
- Ensure integration with the Service Worker.
|
|
|
|
## User Actions Required
|
|
- [ ] Generate VAPID Keys:
|
|
Run `npx web-push generate-vapid-keys` in your terminal.
|
|
Add the output to your `.env` (create if needed) or `.env.local`:
|
|
```env
|
|
NEXT_PUBLIC_VAPID_PUBLIC_KEY="<your_public_key>"
|
|
VAPID_PRIVATE_KEY="<your_private_key>"
|
|
VAPID_SUBJECT="mailto:your-email@example.com"
|
|
```
|
|
*Note: `NEXT_PUBLIC_` prefix is needed for the frontend to access the public key.*
|
|
|
|
## Steps
|
|
|
|
### 1. Dependencies and Configuration
|
|
- [ ] Install `web-push`: `npm install web-push && npm install -D @types/web-push`
|
|
- [ ] Install `serwist` or ensure `next-pwa` can handle custom service workers. (We will use `importScripts` with `next-pwa`).
|
|
|
|
### 2. Database Schema
|
|
- [ ] Update `prisma/schema.prisma`:
|
|
Add `PushSubscription` model linked to `Plan`.
|
|
```prisma
|
|
model PushSubscription {
|
|
id String @id @default(cuid())
|
|
planId String
|
|
plan Plan @relation(fields: [planId], references: [id], onDelete: Cascade)
|
|
endpoint String @unique
|
|
p256dh String
|
|
auth String
|
|
createdAt DateTime @default(now())
|
|
}
|
|
```
|
|
- [ ] Run `npx prisma migrate dev --name add_push_subscription`
|
|
|
|
### 3. Service Worker
|
|
- [ ] Create `public/push-sw.js`:
|
|
Implement the `push` event listener to show notifications.
|
|
Implement the `notificationclick` event listener to focus/open the app.
|
|
- [ ] Update `next.config.mjs`:
|
|
Configure `next-pwa` (Workbox) to import `push-sw.js` via `importScripts`.
|
|
|
|
### 4. Server Actions & Library
|
|
- [ ] Create `lib/push.ts`:
|
|
Helper functions to initialize `web-push` and send notifications.
|
|
- [ ] Create `app/actions/subscription.ts`:
|
|
`subscribeUser(planId, subscription)`: Saves subscription to DB.
|
|
`unsubscribeUser(endpoint)`: Removes subscription.
|
|
- [ ] Update `lib/notifications.ts`:
|
|
Add `sendPlanNotification(planId, message, webhookUrl?)`.
|
|
This function will:
|
|
1. Send to Webhook (if exists).
|
|
2. Fetch all subscriptions for `planId`.
|
|
3. Send Web Push to all.
|
|
4. Handle 410 (Gone) by deleting sub.
|
|
|
|
### 5. Backend Integration
|
|
- [ ] Update `app/actions/booking.ts`:
|
|
Replace `sendNotification` with `sendPlanNotification`.
|
|
- [ ] Update `app/actions/plan.ts`:
|
|
Replace `sendNotification` with `sendPlanNotification`.
|
|
|
|
### 6. Frontend Integration
|
|
- [ ] Create `components/push-notification-manager.tsx`:
|
|
UI component to check permission, register SW (if not handled), and subscribe.
|
|
Show "Enable Notifications" button.
|
|
- [ ] Add `PushNotificationManager` to `Dashboard` or `Settings`.
|
|
|
|
## Verification
|
|
- [ ] Test on Localhost (requires HTTPS or localhost exception).
|
|
- [ ] Verify notifications appear for:
|
|
- Booking creation
|
|
- Booking completion
|
|
- Cancellation
|
|
- Instructions update
|