test(pwa): validate install and push notification flow

.env.example

@@ -9,3 +9,8 @@ DATABASE_NAME=nextjs-template
 # Better-Auth
 BETTER_AUTH_URL=http://localhost:3000
 BETTER_AUTH_SECRET=your-secret-key
+
+# Push Notifications
+NEXT_PUBLIC_VAPID_PUBLIC_KEY=your_public_key
+VAPID_PRIVATE_KEY=your_private_key
+NOTIFICATION_URL=http://localhost:3000

package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@prisma/adapter-mariadb": "^7.3.0",
     "@prisma/client": "^7.3.0",
+    "@types/web-push": "^3.6.4",
     "better-auth": "^1.4.16",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -23,7 +24,8 @@
     "next": "^16.1.6",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
-    "tailwind-merge": "^3.4.0"
+    "tailwind-merge": "^3.4.0",
+    "web-push": "^3.6.7"
   },
   "devDependencies": {
     "@commitlint/cli": "^20.4.1",

public/sw.js

@@ -0,0 +1,70 @@
+self.addEventListener('install', function () {
+  self.skipWaiting();
+});
+
+self.addEventListener('activate', function (event) {
+  event.waitUntil(clients.claim());
+});
+
+self.addEventListener('push', function (event) {
+  let title = 'New Notification';
+  let options = {
+    body: '',
+    icon: '/icon-192x192.png',
+    badge: '/icon-192x192.png',
+    vibrate: [100, 50, 100],
+    data: { url: '/' },
+  };
+
+  try {
+    if (event.data) {
+      const data = event.data.json();
+      title = data.title || title;
+      options.body = data.body || '';
+      options.icon = data.icon || options.icon;
+      options.data.url = data.url || '/';
+    }
+  } catch (e) {
+    // fallback to defaults above
+  }
+
+  event.waitUntil(
+    Promise.all([
+      self.registration.showNotification(title, options),
+      self.registration.getNotifications().then((notifications) => {
+        if (navigator.setAppBadge) {
+          // +1 for the notification we just showed
+          navigator.setAppBadge(notifications.length + 1);
+        }
+      }),
+    ]),
+  );
+});
+
+self.addEventListener('notificationclick', function (event) {
+  event.notification.close();
+  const targetUrl = event.notification.data?.url || '/';
+
+  event.waitUntil(
+    self.registration.getNotifications().then(function (notifications) {
+      if (navigator.setAppBadge) {
+        if (notifications.length === 0) {
+          navigator.setAppBadge(0);
+        } else {
+          navigator.setAppBadge(notifications.length);
+        }
+      }
+
+      return clients
+        .matchAll({ type: 'window', includeUncontrolled: true })
+        .then(function (windowClients) {
+          if (windowClients.length > 0) {
+            return windowClients[0].focus().then(function (client) {
+              return client.navigate(targetUrl);
+            });
+          }
+          return clients.openWindow(targetUrl);
+        });
+    }),
+  );
+});

src/app/api/notifications/route.ts

@@ -0,0 +1,8 @@
+import { sendNotification } from '@/features/push-notifications/service/notification.server.service';
+import { NextRequest } from 'next/server';
+
+export async function POST(req: NextRequest) {
+  const { subscription, title, message } = await req.json();
+  await sendNotification(subscription, title, message);
+  return Response.json({ message: 'Push sent.' });
+}