site changes from cj/push-notifications-2-rebase

coder · johnstcn · Mar 27, 2025 · Mar 26, 2025 · Mar 27, 2025 · Mar 27, 2025
commit 58cc953bb2e1b37c35289f22e43e09f96d639279
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -2371,6 +2371,28 @@ class ApiMethods {
 		await this.axios.post<void>("/api/v2/notifications/test");
 	};
 
+	createNotificationPushSubscription = async (
+		userId: string,
+		req: TypesGen.WebpushSubscription,
+	) => {
+		await this.axios.post<void>(
+			`/api/v2/users/${userId}/webpush/subscription`,
+			req,
+		);
+	};
+
+	deleteNotificationPushSubscription = async (
+		userId: string,
+		req: TypesGen.DeleteWebpushSubscription,
+	) => {
+		await this.axios.delete<void>(
+			`/api/v2/users/${userId}/webpush/subscription`,
+			{
+				data: req,
+			},
+		);
+	};
+
 	requestOneTimePassword = async (
 		req: TypesGen.RequestOneTimePasscodeRequest,
 	) => {

diff --git a/site/src/index.tsx b/site/src/index.tsx
@@ -14,5 +14,10 @@ if (element === null) {
 	throw new Error("root element is null");
 }
 
+// The service worker handles push notifications.
+if ("serviceWorker" in navigator) {
+	navigator.serviceWorker.register("/serviceWorker.js");
+}
+
 const root = createRoot(element);
 root.render(<App />);
diff --git a/site/src/modules/dashboard/Navbar/NavbarView.tsx b/site/src/modules/dashboard/Navbar/NavbarView.tsx
@@ -1,10 +1,15 @@
 import { API } from "api/api";
+import { experiments } from "api/queries/experiments";
 import type * as TypesGen from "api/typesGenerated";
+import { Button } from "components/Button/Button";
 import { ExternalImage } from "components/ExternalImage/ExternalImage";
 import { CoderIcon } from "components/Icons/CoderIcon";
 import type { ProxyContextValue } from "contexts/ProxyContext";
+import { useWebpushNotifications } from "contexts/useWebpushNotifications";
+import { useEmbeddedMetadata } from "hooks/useEmbeddedMetadata";
 import { NotificationsInbox } from "modules/notifications/NotificationsInbox/NotificationsInbox";
 import type { FC } from "react";
+import { useQuery } from "react-query";
 import { NavLink, useLocation } from "react-router-dom";
 import { cn } from "utils/cn";
 import { DeploymentDropdown } from "./DeploymentDropdown";
@@ -43,6 +48,9 @@ export const NavbarView: FC<NavbarViewProps> = ({
 	canViewAuditLog,
 	proxyContextValue,
 }) => {
+	const { subscribed, enabled, loading, subscribe, unsubscribe } =
+		useWebpushNotifications();
+
 	return (
 		<div className="border-0 border-b border-solid h-[72px] flex items-center leading-none px-6">
 			<NavLink to="/workspaces">
@@ -55,7 +63,7 @@ export const NavbarView: FC<NavbarViewProps> = ({
 
 			<NavItems className="ml-4" />
 
-			<div className="flex items-center gap-3 ml-auto">
+			<div className=" hidden md:flex items-center gap-3 ml-auto">
 				{proxyContextValue && (
 					<div className="hidden md:block">
 						<ProxyMenu proxyContextValue={proxyContextValue} />
@@ -71,6 +79,18 @@ export const NavbarView: FC<NavbarViewProps> = ({
 					/>
 				</div>
 
+				{enabled ? (
+					subscribed ? (
+						<Button variant="outline" disabled={loading} onClick={unsubscribe}>
+							Disable WebPush
+						</Button>
+					) : (
+						<Button variant="outline" disabled={loading} onClick={subscribe}>
+							Enable WebPush
+						</Button>
+					)
+				) : null}
+
 				<NotificationsInbox
 					fetchNotifications={API.getInboxNotifications}
 					markAllAsRead={API.markAllInboxNotificationsAsRead}

diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
@@ -227,6 +227,7 @@ export const MockBuildInfo: TypesGen.BuildInfoResponse = {
 	workspace_proxy: false,
 	upgrade_message: "My custom upgrade message",
 	deployment_id: "510d407f-e521-4180-b559-eab4a6d802b8",
+	webpush_public_key: "fake-public-key",
 	telemetry: true,
 };
 

diff --git a/site/vite.config.mts b/site/vite.config.mts
@@ -1,5 +1,6 @@
 import * as path from "node:path";
 import react from "@vitejs/plugin-react";
+import { buildSync } from "esbuild";
 import { visualizer } from "rollup-plugin-visualizer";
 import { type PluginOption, defineConfig } from "vite";
 import checker from "vite-plugin-checker";
@@ -28,6 +29,19 @@ export default defineConfig({
 		emptyOutDir: false,
 		// 'hidden' works like true except that the corresponding sourcemap comments in the bundled files are suppressed
 		sourcemap: "hidden",
+		rollupOptions: {
+			input: {
+				index: path.resolve(__dirname, "./index.html"),
+				serviceWorker: path.resolve(__dirname, "./src/serviceWorker.ts"),
+			},
+			output: {
+				entryFileNames: (chunkInfo) => {
+					return chunkInfo.name === "serviceWorker"
+						? "[name].js"
+						: "assets/[name]-[hash].js";
+				},
+			},
+		},
 	},
 	define: {
 		"process.env": {
@@ -89,6 +103,10 @@ export default defineConfig({
 				target: process.env.CODER_HOST || "http://localhost:3000",
 				secure: process.env.NODE_ENV === "production",
 			},
+			"/serviceWorker.js": {
+				target: process.env.CODER_HOST || "http://localhost:3000",
+				secure: process.env.NODE_ENV === "production",
+			},
 		},
 		allowedHosts: true,
 	},