feat: pwa with push notifications

[cecco25]

Add PWA support with Push Notifications

[gemini-code-assist]

Summary of Changes

Hello @cecco25, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request introduces comprehensive Progressive Web App (PWA) support, focusing on enabling push notifications within the application. By integrating a service worker, manifest file, and dedicated API endpoints, the application can now offer users the ability to subscribe to and receive real-time notifications, enhancing user engagement and providing an installable app-like experience.

Highlights

• PWA Manifest Integration: A new manifest.ts file was added to configure the Progressive Web App (PWA) properties, enabling the application to be installed on user devices.
• Web Push Notification Setup: Core functionality for Web Push Notifications was implemented, including service worker registration, subscription management, and an API endpoint for sending notifications.
• Notification UI Components: New React components were introduced to display notification subscription status, handle subscription actions, and provide a form for sending test notifications.
• Environment Variable Configuration: New environment variables (NEXT_PUBLIC_VAPID_PUBLIC_KEY, VAPID_PRIVATE_KEY, NOTIFICATION_URL) were added to .env.example to support VAPID keys and notification routing.
• Dependency Updates: The web-push library and its TypeScript types (@types/web-push) were added to package.json and package-lock.json to facilitate server-side push notification logic.

Changelog

• .env.example
  • Added new environment variables for VAPID public and private keys, and a notification URL.
• package-lock.json
  • Added new dependencies for web-push functionality, including web-push and @types/web-push.
  • Updated various transitive dependencies and removed dev: true flag from some entries.
• package.json
  • Added web-push and @types/web-push as new dependencies.
• public/file.svg
  • Removed the SVG file.
• public/globe.svg
  • Removed the SVG file.
• public/next.svg
  • Removed the SVG file.
• public/sw.js
  • Added a new service worker file to handle push events and notification clicks.
• public/vercel.svg
  • Removed the SVG file.
• public/window.svg
  • Removed the SVG file.
• src/app/api/web-push/send/route.ts
  • Added a new API route to receive subscription data and send push notifications.
• src/app/layout.tsx
  • Imported NotificationProvider and wrapped the application's children with it to enable notification context.
• src/app/manifest.ts
  • Added a new manifest file for PWA configuration, including app name, display mode, and icons.
• src/app/page.tsx
  • Replaced the session status display with new components for managing and showing push notification subscription status.
  • Imported NotificationSubscriptionForm, NotificationSubscriptionStatus, and UnsupportedNotificationMessage components.
• src/features/push-notifications/components/notification-subscription-form.tsx
  • Added a new component that provides a form to send test push notifications.
• src/features/push-notifications/components/notification-subscription-status.tsx
  • Added a new component to display the current push notification subscription status and a button to subscribe.
• src/features/push-notifications/components/unsupported-notification-message.tsx
  • Added a new component to inform users if push notifications are not supported by their browser.
• src/features/push-notifications/hook/use-notification.tsx
  • Added a new React hook and context (NotificationProvider) to manage the state and logic for push notification subscriptions.
• src/features/push-notifications/service/notification-push.service.ts
  • Added new service functions to check notification support, permission status, and to register a service worker and subscribe to push notifications.
• src/features/push-notifications/service/notification-sender.service.ts
  • Added a new service function responsible for sending web push notifications using the web-push library and VAPID details.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

The pull request successfully introduces PWA support and Push Notifications using the Web Push API. The implementation follows a feature-based architecture and correctly integrates with Next.js. However, there are a few critical issues to address, specifically regarding the availability of environment variables in the service worker and the handling of asynchronous operations in the notification service and API routes. Adhering to the React and Next.js best practices, I have also suggested improvements for re-render optimization and conditional rendering.