Trigger notification when timer is completed

.gitignore

@@ -26,6 +26,7 @@ tmp
 /config/ryot.json
 .venv
 **/public/workbox-*.js
+**/public/*.worker.js
 **/public/workbox-*.js.map
 **/public/sw.js
 **/public/sw.js.map

apps/frontend/app/entry.worker.ts

@@ -0,0 +1,17 @@
+/// <reference lib="WebWorker" />
+
+export type {};
+
+declare let self: ServiceWorkerGlobalScope;
+
+self.addEventListener("install", (event) => {
+	event.waitUntil(self.skipWaiting());
+});
+
+self.addEventListener("activate", (event) => {
+	event.waitUntil(self.clients.claim());
+});
+
+self.addEventListener("notificationclick", (event) => {
+	event.notification.close();
+});

apps/frontend/app/routes/_dashboard.fitness.$action.tsx

@@ -108,6 +108,7 @@ import {
 import {
 	CurrentWorkoutKey,
 	FitnessEntity,
+	LOGO_IMAGE_URL,
 	PRO_REQUIRED_MESSAGE,
 	dayjsLib,
 	getSetColor,
@@ -232,6 +233,14 @@ export default function Page() {
 	const playCompleteTimerSound = () => {
 		const sound = new Howl({ src: ["/timer-completed.mp3"] });
 		sound.play();
+		if (document.visibilityState === "visible") return;
+		navigator.serviceWorker.ready.then((registration) => {
+			registration.showNotification("Timer completed", {
+				body: "Let's get this done!",
+				icon: LOGO_IMAGE_URL,
+				silent: true,
+			});
+		});
 	};
 	const [
 		timerDrawerOpened,

apps/frontend/package.json

@@ -19,6 +19,7 @@
 		"@mantine/form": "7.12.1",
 		"@mantine/hooks": "7.12.1",
 		"@mantine/notifications": "7.12.1",
+		"@remix-pwa/worker-runtime": "2.1.4",
 		"@remix-run/node": "2.11.2",
 		"@remix-run/react": "2.11.2",
 		"@remix-run/serve": "2.11.2",
@@ -63,6 +64,7 @@
 	},
 	"devDependencies": {
 		"@bitprojects/umami-logger-typescript": "1.0.10",
+		"@remix-pwa/dev": "3.1.0",
 		"@remix-run/dev": "2.11.2",
 		"@types/cookie": "0.6.0",
 		"@types/crypto-js": "4.2.2",

apps/frontend/vite.config.ts

@@ -1,3 +1,4 @@
+import { remixPWA } from "@remix-pwa/dev";
 import { vitePlugin as remix } from "@remix-run/dev";
 import { remixDevTools } from "remix-development-tools";
 import { remixRoutes } from "remix-routes/vite";
@@ -12,5 +13,6 @@ export default defineConfig({
 		}),
 		remixRoutes(),
 		tsconfigPaths(),
+		remixPWA(),
 	],
 });