What are the prerequisites for this skill?

This skill requires a Next.js app with a Postgres database (Drizzle ORM), an authentication system, and PWA support (service worker registration) already configured.

Does this support mobile push notifications?

Yes, by utilizing the Web Push API and service workers, it supports notifications on Android and iOS (version 16.4 and later) when the site is saved as a PWA.

How do I generate the necessary VAPID keys?

You can generate them using the 'bunx web-push generate-vapid-keys' command, which provides the public and private keys required for your environment variables.

Does the user need to have the website open to receive alerts?

No. The included service worker (sw-push.js) listens for push events in the background, allowing notifications to appear even if the browser is closed.

Can I target specific users for notifications?

Absolutely. The skill maps push subscriptions to user IDs in your database, allowing you to send targeted notifications to specific individuals or groups.

Web Push Notifications

Name: Web Push Notifications
Author: mattwoodco

bymattwoodco

•

API 개발

Implements a full-stack Web Push notification system with VAPID authentication, subscription management, and an in-app notification center.

This skill provides a comprehensive solution for adding real-time push notifications to Next.js applications. It handles the entire lifecycle of a notification, from requesting user permissions and managing VAPID-secured subscriptions to sending targeted or bulk messages. It includes pre-built UI components like a notification bell and center, database schemas for persistent storage using Drizzle ORM, and a service worker for background delivery. This is the perfect tool for developers looking to increase user engagement and provide real-time updates within a PWA or standard web application.

주요 기능

01Service worker implementation for background push event handling

02In-app notification center with unread badges and history components

03VAPID-authenticated Web Push API integration for secure delivery

04End-to-end device subscription management with database persistence

05Granular per-user notification preferences and bulk sending support

063 GitHub stars

사용 사례

01Implementing PWA engagement features like mention alerts or room invites

02Building targeted system update broadcasts and user activity feeds

03Adding a real-time notification bell and alert system to a SaaS dashboard

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mattwoodco/skills notifications-push

For use in Claude.ai and ChatGPT

Download Skill