Add PWA, service worker and Web Push

- Use new notification request/opt-in flow for push
- Implement unsubscribing
- Implement muting
- Implement emojis in title
- Add iOS specific PWA warning
- Don’t use websockets when web push is enabled
- Fix duplicate notifications
- Implement default web push setting
- Implement changing subscription type
- Implement web push subscription refresh
- Implement web push notification click

web/src/components/Preferences.jsx

@@ -48,6 +48,7 @@ import { PermissionDenyAll, PermissionRead, PermissionReadWrite, PermissionWrite
 import { ReserveAddDialog, ReserveDeleteDialog, ReserveEditDialog } from "./ReserveDialogs";
 import { UnauthorizedError } from "../app/errors";
 import { subscribeTopic } from "./SubscribeDialog";
+import notifier from "../app/Notifier";
 
 const maybeUpdateAccountSettings = async (payload) => {
   if (!session.exists()) {
@@ -85,6 +86,7 @@ const Notifications = () => {
         <Sound />
         <MinPriority />
         <DeleteAfter />
+        {notifier.pushSupported() && <WebPushDefaultEnabled />}
       </PrefGroup>
     </Card>
   );
@@ -232,6 +234,36 @@ const DeleteAfter = () => {
   );
 };
 
+const WebPushDefaultEnabled = () => {
+  const { t } = useTranslation();
+  const labelId = "prefWebPushDefaultEnabled";
+  const defaultEnabled = useLiveQuery(async () => prefs.webPushDefaultEnabled());
+  const handleChange = async (ev) => {
+    await prefs.setWebPushDefaultEnabled(ev.target.value);
+  };
+
+  // while loading
+  if (defaultEnabled == null) {
+    return null;
+  }
+
+  return (
+    <Pref
+      labelId={labelId}
+      title={t("prefs_notifications_web_push_default_title")}
+      description={t("prefs_notifications_web_push_default_description")}
+    >
+      <FormControl fullWidth variant="standard" sx={{ m: 1 }}>
+        <Select value={defaultEnabled} onChange={handleChange} aria-labelledby={labelId}>
+          {defaultEnabled === "initial" && <MenuItem value="initial">{t("prefs_notifications_web_push_default_initial")}</MenuItem>}
+          <MenuItem value="enabled">{t("prefs_notifications_web_push_default_enabled")}</MenuItem>
+          <MenuItem value="disabled">{t("prefs_notifications_web_push_default_disabled")}</MenuItem>
+        </Select>
+      </FormControl>
+    </Pref>
+  );
+};
+
 const Users = () => {
   const { t } = useTranslation();
   const [dialogKey, setDialogKey] = useState(0);