Handle not available Notifications API (#22366)

frontend/src/metabase/dashboard/containers/DashboardApp.jsx

@@ -106,7 +106,7 @@ const DashboardApp = props => {
   const [isShowingToaster, setIsShowingToaster] = useState(false);
 
   const onTimeout = useCallback(() => {
-    if (Notification.permission === "default") {
+    if ("Notification" in window && Notification.permission === "default") {
       setIsShowingToaster(true);
     }
   }, []);
@@ -123,7 +123,11 @@ const DashboardApp = props => {
   useEffect(() => {
     if (isLoadingComplete) {
       setIsShowingToaster(false);
-      if (Notification.permission === "granted" && document.hidden) {
+      if (
+        "Notification" in window &&
+        Notification.permission === "granted" &&
+        document.hidden
+      ) {
         showNotification(
           t`All Set! ${dashboard?.name} is ready.`,
           t`All questions loaded`,

frontend/src/metabase/hooks/use-web-notification.ts

-import React, { useCallback } from "react";
+import { useCallback } from "react";
+
+const hasNotificationAPI = "Notification" in window;
 
 export function useWebNotification() {
   const requestPermission = useCallback(async () => {
+    if (!hasNotificationAPI) {
+      return "denied";
+    }
     const permission = await Notification.requestPermission();
     return permission;
   }, []);
 
   const showNotification = useCallback((title: string, body: string) => {
+    if (!hasNotificationAPI) {
+      return;
+    }
+
     const notification = new Notification(title, {
       body,
       icon: "app/assets/img/favicon-32x32.png",

frontend/src/metabase/query_builder/containers/QueryBuilder.jsx

@@ -373,7 +373,7 @@ function QueryBuilder(props) {
   const { isRunning } = uiControls;
 
   const onTimeout = useCallback(() => {
-    if (Notification.permission === "default") {
+    if ("Notification" in window && Notification.permission === "default") {
       setIsShowingToaster(true);
     }
   }, []);
@@ -389,7 +389,11 @@ function QueryBuilder(props) {
     if (isLoadingComplete) {
       setIsShowingToaster(false);
 
-      if (Notification.permission === "granted" && document.hidden) {
+      if (
+        "Notification" in window &&
+        Notification.permission === "granted" &&
+        document.hidden
+      ) {
         showNotification(
           t`All Set! Your question is ready.`,
           t`${card.name} is loaded.`,