chet novoe

src/App.vue

@@ -2,15 +2,15 @@
 
   <div id="app" class="flex flex-col h-screen bg-gray-100 gap-4">
     <!-- MenuBar всегда фиксирован сверху -->
-    <MenuBar  class="w-full sticky  hidden lg:block top-0 z-10"/>
+    <MenuBar class="w-full sticky  hidden lg:block top-0 z-10"/>
     <ToolBar class=" fixed  visible lg:invisible bottom-0 z-10"/>
 
     <!-- Контентная часть заполняет оставшееся пространство -->
     <div class="flex-grow  ">
 
-      <router-view />
+      <router-view/>
     </div>
-      <OverlayView class="w-full sticky  invisible lg:visible top-0 z-10"/>
+    <OverlayView class="w-full sticky  invisible lg:visible top-0 z-10"/>
   </div>
 </template>
 
@@ -18,6 +18,29 @@
 import MenuBar from "./components/MenuBar.vue";
 import OverlayView from "@/components/OverlayView.vue";
 import ToolBar from "@/components/ToolBar.vue";
+import axiosSetup from "@/services/axiosSetup";
+import {onMounted} from "vue";
+import {subscribeUserToPush} from "@/services/pushManager";
+
+
+onMounted(async () => {
+
+  try {
+    const subscription = await subscribeUserToPush();
+    console.log("Push subscription:", subscription);
+
+    // Отправка подписки на сервер для хранения
+    await fetch("http://localhost:8000/api/v1/push/subscribe", {
+      method: "POST",
+      headers: {"Content-Type": "application/json", "Authorization": `Bearer ${localStorage.getItem("token")}`},
+      body: JSON.stringify(subscription),
+    });
+  } catch (error) {
+    console.error("Failed to subscribe to push:", error);
+  }
+
+})
+
 
 // @Options({
 //   components: {

src/main.ts

@@ -22,5 +22,26 @@ app.use(PrimeVue, {
         preset: Aura
     }
 });
+// main.js
+
+if ("serviceWorker" in navigator) {
+    navigator.serviceWorker.register("/service-worker.js").then((registration) => {
+        console.log("Service Worker registered with scope:", registration.scope);
+    }).catch((error) => {
+        console.error("Service Worker registration failed:", error);
+    });
+}
+
+
+Notification.requestPermission().then((permission) => {
+    if (permission === 'granted') {
+        console.log('Разрешение на уведомления получено.');
+    }
+});
+
+// Компонент Vue 3 или логика подписки
+
+
+
 
 app.mount('#app');

src/services/pushManager.ts

@@ -0,0 +1,17 @@
+// src/pushManager.ts
+const applicationServerKey = 'BNrBrVdqH4dHz6egI24OEr1WuGi5BPjJ1pznANXoqwdlIYGyt9CAdeOnnMMWqxs1TZt2f0aG1He--Uh5hwFnKts';
+
+function urlBase64ToUint8Array(base64String: string): Uint8Array {
+    const padding = "=".repeat((4 - (base64String.length % 4)) % 4);
+    const base64 = (base64String + padding).replace(/-/g, "+").replace(/_/g, "/");
+    const rawData = window.atob(base64);
+    return new Uint8Array([...rawData].map((char) => char.charCodeAt(0)));
+}
+
+export async function subscribeUserToPush() {
+    const registration = await navigator.serviceWorker.ready;
+    return registration.pushManager.subscribe({
+        userVisibleOnly: true,
+        applicationServerKey: urlBase64ToUint8Array(applicationServerKey),
+    });
+}