PwaManagerNotifications automatic permission request and subscription

components/PwaManager.tsx

@@ -6,7 +6,7 @@ import e from 'express';
 import ProtectedRoute from './protectedRoute';
 import { UserRole } from '@prisma/client';
 
-function PwaManager() {
+function PwaManager({ subs }) {
     //ToDo: for iOS, try to use apn? https://github.com/node-apn/node-apn/blob/master/doc/apn.markdown
     const isSupported = () =>
         'Notification' in window &&
@@ -21,7 +21,7 @@ function PwaManager() {
     const [subscription, setSubscription] = useState(null);
     const [registration, setRegistration] = useState(null);
     const [notificationPermission, setNotificationPermission] = useState(isSupported() && Notification.permission);
-    const [subs, setSubs] = useState("")
+    const [_subs, setSubs] = useState(subs)
 
     const { data: session } = useSession();
     // let isAdmin = ProtectedRoute.IsInRole(UserRole.ADMIN);
@@ -39,14 +39,14 @@ function PwaManager() {
 
         // Handle Push Notification Subscription
         if ('serviceWorker' in navigator && 'PushManager' in window) {
-            navigator.serviceWorker.ready.then(reg => {
-                reg.pushManager.getSubscription().then(sub => {
+            navigator.serviceWorker.ready.then(swreg => {
+                swreg.pushManager.getSubscription().then(sub => {
                     if (sub) {
                         setSubscription(sub);
                         setIsSubscribed(true);
                     }
                 });
-                setRegistration(reg);
+                setRegistration(swreg);
             });
         }
 
@@ -341,7 +341,7 @@ function PwaManager() {
                         onClick={deleteAllSubscriptions}
                         className="text-xs py-1 px-2 rounded-full focus:outline-none bg-red-500 hover:bg-red-700 text-white"
                     >
-                        Спри известията на всички мои устройства {subs != "" ? `(${subs})` : ""}
+                        Спри известията на всички мои устройства {_subs != "" ? `(${_subs})` : ""}
                     </button>
                 </div>
                 {isAdmin &&
@@ -400,3 +400,13 @@ function PwaManager() {
     }
 }
 export default PwaManager;
+
+//get server side props - subs count
+export const getServerSideProps = async (context) => {
+    //ToDo: get the number of subscriptions from the database
+    return {
+        props: {
+            subs: 0
+        }
+    }
+}