feat: browser push notifications (#14888)

* feat: web push notifications feature

* Revert yarn.lock changes

* added new env variables requirement in .env.example

* moved useNotifications hook in packages/lib/hooks

* fix: bug

* use i18n

* chore: move to new file

* chore: add yarn.lock

* Update .env.example

Co-authored-by: Amit Sharma <74371312+Amit91848@users.noreply.github.com>

* chore: add instruction for brave browser

* fix: tooltip

* chore: use enum

* chore

* small update

---------

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Co-authored-by: Udit Takkar <udit222001@gmail.com>
Co-authored-by: Peer Richelsen <peer@cal.com>
Co-authored-by: Amit Sharma <74371312+Amit91848@users.noreply.github.com>
Co-authored-by: Carina Wollendorfer <30310907+CarinaWolli@users.noreply.github.com>
Co-authored-by: unknown <adhabal2002@gmail.com>
Co-authored-by: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>

.env.example

@@ -369,6 +369,11 @@ RETELL_AI_KEY=
 # Used to disallow emails as being added as guests on bookings
 BLACKLISTED_GUEST_EMAILS=
 
+# Used to allow browser push notifications
+# You can use: 'npx web-push generate-vapid-keys' to generate these keys
+NEXT_PUBLIC_VAPID_PUBLIC_KEY=
+VAPID_PRIVATE_KEY=
+
 # Custom privacy policy / terms URLs (for self-hosters: change to your privacy policy / terms URLs)
 NEXT_PUBLIC_WEBSITE_PRIVACY_POLICY_URL=
 NEXT_PUBLIC_WEBSITE_TERMS_URL=

apps/web/modules/bookings/views/bookings-listing-view.tsx

@@ -12,6 +12,7 @@ import type { filterQuerySchema } from "@calcom/features/bookings/lib/useFilterQ
 import { useFilterQuery } from "@calcom/features/bookings/lib/useFilterQuery";
 import Shell from "@calcom/features/shell/Shell";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { useNotifications, ButtonState } from "@calcom/lib/hooks/useNotifications";
 import { useParamsWithFallback } from "@calcom/lib/hooks/useParamsWithFallback";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
@@ -144,6 +145,27 @@ export default function Bookings() {
  )[0] || [];
 
  const [animationParentRef] = useAutoAnimate<HTMLDivElement>();
+ const { buttonToShow, isLoading, enableNotifications, disableNotifications } = useNotifications();
+
+ const actions = (
+ <div>
+ {buttonToShow && (
+ <Button
+ color="primary"
+ onClick={buttonToShow === ButtonState.ALLOW ? enableNotifications : disableNotifications}
+ loading={isLoading}
+ disabled={buttonToShow === ButtonState.DENIED}
+ tooltipSide="bottom"
+ tooltip={buttonToShow === ButtonState.DENIED ? t("you_have_denied_notifications") : undefined}>
+ {t(
+ buttonToShow === ButtonState.DISABLE
+ ? "disable_browser_notifications"
+ : "allow_browser_notifications"
+ )}
+ </Button>
+ )}
+ </div>
+ );
 
  return (
  <Shell
@@ -152,7 +174,8 @@ export default function Bookings() {
  heading={t("bookings")}
  subtitle={t("bookings_description")}
  title="Bookings"
- description="Create events to share for people to book on your calendar.">
+ description="Create events to share for people to book on your calendar."
+ actions={actions}>
  <div className="flex flex-col">
  <div className="flex flex-row flex-wrap justify-between">
  <HorizontalTabs tabs={tabs} />

apps/web/pages/_app.tsx

@@ -1,6 +1,6 @@
 import type { IncomingMessage } from "http";
 import type { AppContextType } from "next/dist/shared/lib/utils";
-import React from "react";
+import React, { useEffect } from "react";
 
 import { trpc } from "@calcom/trpc/react";
 
@@ -11,8 +11,15 @@ import "../styles/globals.css";
 function MyApp(props: AppProps) {
  const { Component, pageProps } = props;
 
- if (Component.PageWrapper !== undefined) return Component.PageWrapper(props);
- return <Component {...pageProps} />;
+ useEffect(() => {
+ if (typeof window !== "undefined" && "serviceWorker" in navigator) {
+ navigator.serviceWorker.register("/service-worker.js");
+ }
+ }, []);
+
+ const content = Component.PageWrapper ? <Component.PageWrapper {...props} /> : <Component {...pageProps} />;
+
+ return content;
 }
 
 declare global {

apps/web/public/service-worker.js

@@ -0,0 +1,16 @@
+self.addEventListener("push", (event) => {
+ let notificationData = event.data.json();
+
+ const title = notificationData.title || "You have new notification from Cal.com";
+ const image ="/cal-com-icon.svg";
+ const options = {
+ ...notificationData.options,
+ icon: image,
+ };
+ self.registration.showNotification(title, options);
+});
+
+self.addEventListener("notificationclick", (event) => {
+ event.notification.close();
+ event.waitUntil(self.clients.openWindow(event.notification.data.targetURL || "https://app.cal.com"));
+});

apps/web/public/static/locales/en/common.json

@@ -461,6 +461,14 @@
  "dynamic_booking": "Dynamic group links",
  "allow_seo_indexing": "Allow search engines to access your public content",
  "seo_indexing": "Allow SEO Indexing",
+ "allow_browser_notifications": "Allow Browser Notifications",
+ "you_have_denied_notifications": "You have denied notifications. Reset permission in browser settings to enable.",
+ "disable_browser_notifications": "Disable Browser Notifications",
+ "browser_notifications_turned_on": "Browser Notifications turned on",
+ "browser_notifications_turned_off": "Browser Notifications turned off",
+ "browser_notifications_denied": "Browser Notifications denied",
+ "please_allow_notifications": "Please allow notifications from the prompt",
+ "browser_notifications_not_supported": "Your browser does not support Push Notifications. If you are Brave user then enable `Use Google services for push messaging` Option on brave://settings/?search=push+messaging",
  "email": "Email",
  "email_placeholder": "jdoe@example.com",
  "full_name": "Full name",

packages/features/notifications/sendNotification.ts

@@ -0,0 +1,40 @@
+import webpush from "web-push";
+
+const vapidKeys = {
+ publicKey: process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY || "",
+ privateKey: process.env.VAPID_PRIVATE_KEY || "",
+};
+
+// The mail to email address should be the one at which push service providers can reach you. It can also be a URL.
+webpush.setVapidDetails("https://cal.com", vapidKeys.publicKey, vapidKeys.privateKey);
+
+type Subscription = {
+ endpoint: string;
+ keys: {
+ auth: string;
+ p256dh: string;
+ };
+};
+
+export const sendNotification = async ({
+ subscription,
+ title,
+ body,
+ icon,
+}: {
+ subscription: Subscription;
+ title: string;
+ body: string;
+ icon?: string;
+}) => {
+ try {
+ const payload = JSON.stringify({
+ title,
+ body,
+ icon,
+ });
+ await webpush.sendNotification(subscription, payload);
+ } catch (error) {
+ console.error("Error sending notification", error);
+ }
+};

packages/features/package.json

@@ -18,9 +18,11 @@
  "react-select": "^5.7.0",
  "react-sticky-box": "^2.0.4",
  "react-virtual": "^2.10.4",
+ "web-push": "^3.6.7",
  "zustand": "^4.3.2"
  },
  "devDependencies": {
- "@testing-library/react-hooks": "^8.0.1"
+ "@testing-library/react-hooks": "^8.0.1",
+ "@types/web-push": "^3.6.3"
  }
 }

packages/lib/hooks/useNotifications.tsx

@@ -0,0 +1,164 @@
+import { useState, useEffect } from "react";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc } from "@calcom/trpc/react";
+import { showToast } from "@calcom/ui";
+
+export enum ButtonState {
+ NONE = "none",
+ ALLOW = "allow",
+ DISABLE = "disable",
+ DENIED = "denied",
+}
+
+export const useNotifications = () => {
+ const [buttonToShow, setButtonToShow] = useState<ButtonState>(ButtonState.NONE);
+ const [isLoading, setIsLoading] = useState(false);
+ const { t } = useLocale();
+
+ const { mutate: addSubscription } = trpc.viewer.addNotificationsSubscription.useMutation({
+ onSuccess: () => {
+ setButtonToShow(ButtonState.DISABLE);
+ showToast(t("browser_notifications_turned_on"), "success");
+ },
+ onError: (error) => {
+ showToast(`Error: ${error.message}`, "error");
+ },
+ onSettled: () => {
+ setIsLoading(false);
+ },
+ });
+ const { mutate: removeSubscription } = trpc.viewer.removeNotificationsSubscription.useMutation({
+ onSuccess: () => {
+ setButtonToShow(ButtonState.ALLOW);
+ showToast(t("browser_notifications_turned_off"), "success");
+ },
+ onError: (error) => {
+ showToast(`Error: ${error.message}`, "error");
+ },
+ onSettled: () => {
+ setIsLoading(false);
+ },
+ });
+
+ useEffect(() => {
+ const decideButtonToShow = async () => {
+ if (!("Notification" in window)) {
+ console.log("Notifications not supported");
+ }
+
+ const registration = await navigator.serviceWorker?.getRegistration();
+ if (!registration) return;
+ const subscription = await registration.pushManager.getSubscription();
+
+ const permission = Notification.permission;
+
+ if (permission === ButtonState.DENIED) {
+ setButtonToShow(ButtonState.DENIED);
+ return;
+ }
+
+ if (permission === "default") {
+ setButtonToShow(ButtonState.ALLOW);
+ return;
+ }
+
+ if (!subscription) {
+ setButtonToShow(ButtonState.ALLOW);
+ return;
+ }
+
+ setButtonToShow(ButtonState.DISABLE);
+ };
+
+ decideButtonToShow();
+ }, []);
+
+ const enableNotifications = async () => {
+ setIsLoading(true);
+ const permissionResponse = await Notification.requestPermission();
+
+ if (permissionResponse === ButtonState.DENIED) {
+ setButtonToShow(ButtonState.DENIED);
+ setIsLoading(false);
+ showToast(t("browser_notifications_denied"), "warning");
+ return;
+ }
+
+ if (permissionResponse === "default") {
+ setIsLoading(false);
+ showToast(t("please_allow_notifications"), "warning");
+ return;
+ }
+
+ const registration = await navigator.serviceWorker?.getRegistration();
+ if (!registration) {
+ // This will not happen ideally as the button will not be shown if the service worker is not registered
+ return;
+ }
+
+ let subscription: PushSubscription;
+ try {
+ subscription = await registration.pushManager.subscribe({
+ userVisibleOnly: true,
+ applicationServerKey: urlB64ToUint8Array(process.env.NEXT_PUBLIC_VAPID_PUBLIC_KEY || ""),
+ });
+ } catch (error) {
+ // This happens in Brave browser as it does not have a push service
+ console.error(error);
+ setIsLoading(false);
+ setButtonToShow(ButtonState.NONE);
+ showToast(t("browser_notifications_not_supported"), "error");
+ return;
+ }
+
+ addSubscription(
+ { subscription: JSON.stringify(subscription) },
+ {
+ onError: async () => {
+ await subscription.unsubscribe();
+ },
+ }
+ );
+ };
+
+ const disableNotifications = async () => {
+ setIsLoading(true);
+ const registration = await navigator.serviceWorker?.getRegistration();
+ if (!registration) {
+ // This will not happen ideally as the button will not be shown if the service worker is not registered
+ return;
+ }
+ const subscription = await registration.pushManager.getSubscription();
+ if (!subscription) {
+ // This will not happen ideally as the button will not be shown if the subscription is not present
+ return;
+ }
+ removeSubscription(
+ { subscription: JSON.stringify(subscription) },
+ {
+ onSuccess: async () => {
+ await subscription.unsubscribe();
+ },
+ }
+ );
+ };
+
+ return {
+ buttonToShow,
+ isLoading,
+ enableNotifications,
+ disableNotifications,
+ };
+};
+
+const urlB64ToUint8Array = (base64String: string) => {
+ const padding = "=".repeat((4 - (base64String.length % 4)) % 4);
+ const base64 = (base64String + padding).replace(/\-/g, "+").replace(/_/g, "/");
+ const rawData = window.atob(base64);
+ const outputArray = new Uint8Array(rawData.length);
+ for (let i = 0; i < rawData.length; ++i) {
+ outputArray[i] = rawData.charCodeAt(i);
+ }
+ return outputArray;
+};

packages/prisma/migrations/20240506065443_added_notifications_subscriptions_table/migration.sql

@@ -0,0 +1,14 @@
+-- CreateTable
+CREATE TABLE "NotificationsSubscriptions" (
+ "id" SERIAL NOT NULL,
+ "userId" INTEGER NOT NULL,
+ "subscription" TEXT NOT NULL,
+
+ CONSTRAINT "NotificationsSubscriptions_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE INDEX "NotificationsSubscriptions_userId_subscription_idx" ON "NotificationsSubscriptions"("userId", "subscription");
+
+-- AddForeignKey
+ALTER TABLE "NotificationsSubscriptions" ADD CONSTRAINT "NotificationsSubscriptions_userId_fkey" FOREIGN KEY ("userId") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;

packages/prisma/schema.prisma

@@ -331,9 +331,10 @@ model User {
  secondaryEmails SecondaryEmail[]
  isPlatformManaged Boolean @default(false)
 
- OutOfOfficeReasons OutOfOfficeReason[]
- smsLockState SMSLockState @default(UNLOCKED)
- smsLockReviewedByAdmin Boolean @default(false)
+ OutOfOfficeReasons OutOfOfficeReason[]
+ smsLockState SMSLockState @default(UNLOCKED)
+ smsLockReviewedByAdmin Boolean @default(false)
+ NotificationsSubscriptions NotificationsSubscriptions[]
 
  @@unique([email])
  @@unique([email, username])
@@ -346,6 +347,15 @@ model User {
  @@map(name: "users")
 }
 
+model NotificationsSubscriptions {
+ id Int @id @default(autoincrement())
+ userId Int
+ user User @relation(fields: [userId], references: [id], onDelete: Cascade)
+ subscription String
+
+ @@index([userId, subscription])
+}
+
 // It holds Organization Profiles as well as User Profiles for users that have been added to an organization
 model Profile {
  id Int @id @default(autoincrement())