Desktop notifications

server/static/js/app.js

@@ -288,7 +288,7 @@ const formatTitle = (m) => {
     if (m.title) {
         return formatTitleA(m);
     } else {
-        return `${location.host}/${m.topic}`;
+        return `${location.host}/${m.topic}`; // FIXME
     }
 };
 

web/src/app/Connection.js

@@ -32,13 +32,16 @@ class Connection {
             console.log(`[Connection, ${this.shortUrl}] Message received from server: ${event.data}`);
             try {
                 const data = JSON.parse(event.data);
+                if (data.event === 'open') {
+                    return;
+                }
                 const relevantAndValid =
                     data.event === 'message' &&
                     'id' in data &&
                     'time' in data &&
                     'message' in data;
                 if (!relevantAndValid) {
-                    console.log(`[Connection, ${this.shortUrl}] Message irrelevant or invalid. Ignoring.`);
+                    console.log(`[Connection, ${this.shortUrl}] Unexpected message. Ignoring.`);
                     return;
                 }
                 this.since = data.time + 1; // Sigh. This works because on reconnect, we wait 5+ seconds anyway.

web/src/app/NotificationManager.js

@@ -0,0 +1,33 @@
+import {formatMessage, formatTitle} from "./utils";
+
+class NotificationManager {
+    notify(subscription, notification, onClickFallback) {
+        const message = formatMessage(notification);
+        const title = formatTitle(notification);
+        const n = new Notification(title, {
+            body: message,
+            icon: '/static/img/favicon.png'
+        });
+        if (notification.click) {
+            n.onclick = (e) => window.open(notification.click);
+        } else {
+            n.onclick = onClickFallback;
+        }
+    }
+
+    granted() {
+        return Notification.permission === 'granted';
+    }
+
+    maybeRequestPermission(cb) {
+        if (!this.granted()) {
+            Notification.requestPermission().then((permission) => {
+                const granted = permission === 'granted';
+                cb(granted);
+            });
+        }
+    }
+}
+
+const notificationManager = new NotificationManager();
+export default notificationManager;

web/src/components/App.js

@@ -13,6 +13,7 @@ import Subscriptions from "../app/Subscriptions";
 import Navigation from "./Navigation";
 import ActionBar from "./ActionBar";
 import Users from "../app/Users";
+import notificationManager from "../app/NotificationManager";
 
 const App = () => {
     console.log(`[App] Rendering main view`);
@@ -21,9 +22,13 @@ const App = () => {
     const [subscriptions, setSubscriptions] = useState(new Subscriptions());
     const [users, setUsers] = useState(new Users());
     const [selectedSubscription, setSelectedSubscription] = useState(null);
+    const [notificationsGranted, setNotificationsGranted] = useState(notificationManager.granted());
     const handleNotification = (subscriptionId, notification) => {
         setSubscriptions(prev => {
             const newSubscription = prev.get(subscriptionId).addNotification(notification);
+            notificationManager.notify(newSubscription, notification, () => {
+                setSelectedSubscription(newSubscription);
+            })
             return prev.update(newSubscription).clone();
         });
     };
@@ -41,6 +46,7 @@ const App = () => {
                     return prev.update(newSubscription).clone();
                 });
             });
+        handleRequestPermission();
     };
     const handleDeleteNotification = (subscriptionId, notificationId) => {
         console.log(`[App] Deleting notification ${notificationId} from ${subscriptionId}`);
@@ -64,6 +70,11 @@ const App = () => {
             return newSubscriptions;
         });
     };
+    const handleRequestPermission = () => {
+        notificationManager.maybeRequestPermission((granted) => {
+            setNotificationsGranted(granted);
+        })
+    };
     useEffect(() => {
         setSubscriptions(repository.loadSubscriptions());
         setUsers(repository.loadUsers());
@@ -90,9 +101,11 @@ const App = () => {
                         subscriptions={subscriptions}
                         selectedSubscription={selectedSubscription}
                         mobileDrawerOpen={mobileDrawerOpen}
+                        notificationsGranted={notificationsGranted}
                         onMobileDrawerToggle={() => setMobileDrawerOpen(!mobileDrawerOpen)}
                         onSubscriptionClick={(subscriptionId) => setSelectedSubscription(subscriptions.get(subscriptionId))}
                         onSubscribeSubmit={handleSubscribeSubmit}
+                        onRequestPermissionClick={handleRequestPermission}
                     />
                 </Box>
                 <Box

web/src/components/Navigation.js

@@ -1,27 +1,24 @@
 import Drawer from "@mui/material/Drawer";
 import * as React from "react";
+import {useState} from "react";
 import ListItemButton from "@mui/material/ListItemButton";
 import ListItemIcon from "@mui/material/ListItemIcon";
 import ChatBubbleOutlineIcon from "@mui/icons-material/ChatBubbleOutline";
 import ListItemText from "@mui/material/ListItemText";
-import {useState} from "react";
 import Toolbar from "@mui/material/Toolbar";
 import Divider from "@mui/material/Divider";
 import List from "@mui/material/List";
 import SettingsIcon from "@mui/icons-material/Settings";
 import AddIcon from "@mui/icons-material/Add";
 import SubscribeDialog from "./SubscribeDialog";
+import {Alert, AlertTitle} from "@mui/material";
+import Button from "@mui/material/Button";
+import Typography from "@mui/material/Typography";
 
 const navWidth = 240;
 
 const Navigation = (props) => {
-    const navigationList =
+    const navigationList = <NavList {...props}/>;
-        <NavList
-            subscriptions={props.subscriptions}
-            selectedSubscription={props.selectedSubscription}
-            onSubscriptionClick={props.onSubscriptionClick}
-            onSubscribeSubmit={props.onSubscribeSubmit}
-        />;
     return (
         <>
             {/* Mobile drawer; only shown if menu icon clicked (mobile open) and display is small */}
@@ -64,29 +61,51 @@ const NavList = (props) => {
         handleSubscribeReset();
         props.onSubscribeSubmit(subscription, user);
     }
+    const showSubscriptionsList = props.subscriptions.size() > 0;
+    const showGrantPermissionsBox = props.subscriptions.size() > 0 && !props.notificationsGranted;
     return (
         <>
-            <Toolbar />
+            <Toolbar/>
-            {props.subscriptions.size() > 0 &&
+            <List component="nav" sx={{paddingTop: 0}}>
-                <Divider />}
+                {showGrantPermissionsBox &&
-            <List component="nav">
+                    <>
-                <NavSubscriptionList
+                        <Divider/>
-                    subscriptions={props.subscriptions}
+                        <Alert severity="warning" sx={{paddingTop: 2}}>
-                    selectedSubscription={props.selectedSubscription}
+                            <AlertTitle>Notifications are disabled</AlertTitle>
-                    onSubscriptionClick={props.onSubscriptionClick}
+                            <Typography gutterBottom>
-                />
+                                Grant your browser permission to display desktop notifications.
-                <Divider sx={{ my: 1 }} />
+                            </Typography>
+                            <Button
+                                sx={{float: 'right'}}
+                                color="inherit"
+                                size="small"
+                                onClick={props.onRequestPermissionClick}
+                            >
+                                Grant now
+                            </Button>
+                        </Alert>
+                    </>}
+                {showSubscriptionsList &&
+                    <>
+                        <Divider/>
+                        <SubscriptionList
+                            subscriptions={props.subscriptions}
+                            selectedSubscription={props.selectedSubscription}
+                            onSubscriptionClick={props.onSubscriptionClick}
+                        />
+                    </>}
+                <Divider sx={{my: 1}}/>
                 <ListItemButton>
                     <ListItemIcon>
-                        <SettingsIcon />
+                        <SettingsIcon/>
                     </ListItemIcon>
-                    <ListItemText primary="Settings" />
+                    <ListItemText primary="Settings"/>
                 </ListItemButton>
                 <ListItemButton onClick={() => setSubscribeDialogOpen(true)}>
                     <ListItemIcon>
-                        <AddIcon />
+                        <AddIcon/>
                     </ListItemIcon>
-                    <ListItemText primary="Add subscription" />
+                    <ListItemText primary="Add subscription"/>
                 </ListItemButton>
             </List>
             <SubscribeDialog
@@ -99,30 +118,21 @@ const NavList = (props) => {
     );
 };
 
-const NavSubscriptionList = (props) => {
+const SubscriptionList = (props) => {
-    const subscriptions = props.subscriptions;
     return (
         <>
-            {subscriptions.map((id, subscription) =>
+            {props.subscriptions.map((id, subscription) =>
-                <NavSubscriptionItem
+                <ListItemButton
                     key={id}
-                    subscription={subscription}
-                    selected={props.selectedSubscription && props.selectedSubscription.id === id}
                     onClick={() => props.onSubscriptionClick(id)}
-                />)
+                    selected={props.selectedSubscription && props.selectedSubscription.id === id}
-            }
+                >
+                    <ListItemIcon><ChatBubbleOutlineIcon /></ListItemIcon>
+                    <ListItemText primary={subscription.shortUrl()}/>
+                </ListItemButton>
+            )}
         </>
     );
 }
 
-const NavSubscriptionItem = (props) => {
-    const subscription = props.subscription;
-    return (
-        <ListItemButton onClick={props.onClick} selected={props.selected}>
-            <ListItemIcon><ChatBubbleOutlineIcon /></ListItemIcon>
-            <ListItemText primary={subscription.shortUrl()}/>
-        </ListItemButton>
-    );
-}
-
 export default Navigation;