708/pwa push notifications

[ShyamThangaraj]

First sprint

Summary

Implements PWA push notifications for PeterPlate. Users can opt in to receive push notifications when their favorited meals are being served.

Changes

• Add push_subscriptions DB table with user_id, endpoint, p256dh, auth columns — @ShyamThangaraj
• Add tRPC routes: notification.subscribe, notification.unsubscribe, notification.getSubscription —@ShyamThangaraj
• Style notification bell IconButton and replace browser alerts with MUI dialog — @ShyamThangaraj
• Build PushSubscriptionButton component with full subscribe/unsubscribe logic — @MihaiZecheru
• Add notification button to My Foods page — @MihaiZecheru
• Write cron job that runs daily to send push notifications for favorited meals — @MihaiZecheru

Testing Instructions

1. Run pnpm db:migrate
2. Add VAPID keys to .env (generate with npx web-push generate-vapid-keys)
3. Go to the My Foods page and click the notification button to subscribe.
4. Add one of today's foods as a 'favorite'.
5. Run the script that will be used in the cron job with pnpm run test:menu-notifications -- this will send a notification to all subscribers in the push_notifications table who are having one of their favorite meals served today.

Note that the .env.example files were updated to reflect the necessary changes to .env

Second sprint

Summary

Add the notifications menu, including toggle for both food-favorites and event notifications. Save already-sent notifications in the database. Add script (for cron job) that sends event notifications out.

Changes

• [] Add notifications table to the database - Shyam
• [] Design the notifications menu and load notifications from the notifications table - Shyam
• [] Modify push_notifications table to have two new columns (for separating food-favorites and event permission) - Shyam
• [] Add tRPC method to GET from notifications table and to update push_subscription table - Shyam
• [] Write sendEventNotification script (for cron job) - Chris
• [] Modify sendMenuNotification script to save sent-notifications to the new notifications table - Chris
• [] Complete the backend for the notifications menu - having the buttons ask for notification permission from the browser and saving the unique notifications URL to the push_subscriptions table - Chris
• [] Write testFakeEventNotification script for testing when there is no dining hall event at the current moment - Chris
• [] Mark notifications as read on menu open - Chris

Testing Instructions

To test the subscription functionality and the new events script:

1. Run pnpm db:migrate
2. Make sure you have the VAPID keys added to your .env according to the .env.example
3. Sign in to the client and favorite a dish that is being served today.
4. Click on your profile picture in the top-right corner, then select "notifications" from the dropdown to open the notifications menu.
5. Toggle the switches for meal notifications and event notifications. You should get a popup to allow notifications.
6. Important: make sure that you have notifications enabled on your browser. This is down through your OS settings, typically under "Manage App Permissions" or similar; your browser needs permission to send you notifications and it will do so otherwise.
7. Run the following command: pnpm -F @peterplate/server test:menu-notifications. This will send you a PWA notification (if you are subscribed, and) if one of the meals that you have favorited is being served today.
8. Now run this command to test the events: pnpm -F @peterplate/server test:fake-event-notification. This will send you a PWA notification (if you are subscribed) with a fake event. If there was a dining hall event today you could use test:event-notifications instead.

When adding the cron job for use in production, you have two options: two separate jobs that call test:menu-notifications and test:event-notifications separately, or run a single job test:notifications that will run both, one after the other. I would recommend the first option -- run test:menu-notifications once at 11am and once at 4:30pm (right before lunch and dinner), and then run test:event-notifications once at ~8am to notify users of an event going on that day.

Closes #708

[LexTruong]

Hey guys, great work on this! I made a slight modification to get the test script to work. However, still wasn't able to see the notifications. I get the message: "No users have favorited dishes serving today." One of ya'll will have to walk me through it at our meeting.

For the next sprint, we'll expand on this to also notify users of events. We'll also need to incorporate the UI team's changes.