feat: add auto-prompt for push notifications on app load
- 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.
This commit is contained in:
83
SETUP_PUSH_NOTIFICATIONS.md
Normal file
83
SETUP_PUSH_NOTIFICATIONS.md
Normal file
@@ -0,0 +1,83 @@
|
||||
# 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`
|
||||
Reference in New Issue
Block a user