Paul Bailey
3f1abd527e
- Create NotificationPrompt component that appears 3 seconds after app loads - Add to main layout so it shows on all pages (for logged-in users) - Prompt only shows if permission not yet requested - Users can dismiss temporarily or permanently - Add slide-up animation for smooth appearance - Create simplified SETUP_PUSH_NOTIFICATIONS.md guide Users will now be automatically prompted to enable notifications instead of having to go to the profile page.
84 lines
2.1 KiB
Markdown
84 lines
2.1 KiB
Markdown
# Setup Push Notifications - Required Steps
|
|
|
|
## You MUST do these 3 steps for notifications to work:
|
|
|
|
### Step 1: Install the web-push package
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
This installs the `web-push` package that was added to package.json.
|
|
|
|
### Step 2: Generate VAPID keys
|
|
```bash
|
|
npm run vapid:generate
|
|
```
|
|
|
|
This will output something like:
|
|
```
|
|
VAPID_PUBLIC_KEY=BNxxx...
|
|
VAPID_PRIVATE_KEY=xxx...
|
|
VAPID_SUBJECT=mailto:your-email@example.com
|
|
```
|
|
|
|
**Copy these 3 lines and add them to your `.env` file.**
|
|
|
|
⚠️ **Important**: Keep the VAPID_PRIVATE_KEY secret! Don't commit it to git.
|
|
|
|
### Step 3: Update your database
|
|
```bash
|
|
npx prisma db push
|
|
```
|
|
|
|
This adds the `PushSubscription` table to your database.
|
|
|
|
### Step 4: Restart your server
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
## That's it!
|
|
|
|
Now when users open your app:
|
|
- After 3 seconds, they'll see a notification prompt at the bottom-right
|
|
- They can click "Enable Notifications" to subscribe
|
|
- Or they can dismiss it and enable later from their profile page
|
|
|
|
## What happens automatically:
|
|
|
|
✅ Notification prompt appears 3 seconds after app loads
|
|
✅ Only shows if user hasn't been asked before
|
|
✅ Users can dismiss temporarily ("Later") or permanently ("Don't ask again")
|
|
✅ Notifications are sent when:
|
|
- Items are added/removed/completed in shared lists
|
|
- Users are invited to lists
|
|
- Invitations are accepted
|
|
- Collaborators are removed
|
|
|
|
## Testing
|
|
|
|
1. Open your app in Chrome
|
|
2. Wait 3 seconds
|
|
3. Click "Enable Notifications" when the prompt appears
|
|
4. Open another browser/incognito window
|
|
5. Log in as a different user
|
|
6. Add an item to a shared list
|
|
7. See the notification in the first browser!
|
|
|
|
## Troubleshooting
|
|
|
|
**"Push notifications not configured" error**
|
|
- Make sure you ran `npm run vapid:generate`
|
|
- Make sure you added the keys to `.env`
|
|
- Restart your dev server
|
|
|
|
**Prompt doesn't appear**
|
|
- Check browser console for errors
|
|
- Make sure you're on localhost or HTTPS
|
|
- Clear localStorage and refresh if you dismissed it permanently
|
|
|
|
**Notifications don't send**
|
|
- Check server console for errors
|
|
- Verify VAPID keys are correct in `.env`
|
|
- Make sure database was updated with `npx prisma db push`
|