search

Betarena / boilerplate

Betarena Template Repository
0 stars 0 forks source link

[FEATURE]: Integrate Firebase Cloud Messaging (FCM) into SvelteKit PWA #36

Open jonsnowpt opened 1 month ago

jonsnowpt commented 1 month ago

📝 Feature Request Description

We will be adding cloud messaging from Firebase to send push notifications to users on laptops and mobile devices.

Since we already have Firebase configured, we just need to add the messaging service to the current configuration:

import { initializeApp } from 'firebase/app';
import { getMessaging, getToken, onMessage } from 'firebase/messaging';

const firebaseConfig = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_AUTH_DOMAIN',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_STORAGE_BUCKET',
  messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
  appId: 'YOUR_APP_ID',
};

const app = initializeApp(firebaseConfig);
const messaging = getMessaging(app);

export { messaging, getToken, onMessage };

===

Service Worker Setup:

Create firebase-messaging-sw.js in your static folder:

importScripts('https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js'); importScripts('https://www.gstatic.com/firebasejs/9.0.0/firebase-messaging.js');

firebase.initializeApp({
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_AUTH_DOMAIN',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_STORAGE_BUCKET',
  messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
  appId: 'YOUR_APP_ID',
});

const messaging = firebase.messaging();

messaging.onBackgroundMessage((payload) => {
  console.log('Received background message ', payload);
  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
  };

  self.registration.showNotification(notificationTitle, notificationOptions);
});

Request Notification Permission and Get Token:

In your main Svelte component, request permission and get the FCM token:

import { messaging, getToken } from './firebase-config';

function requestPermission() {
  Notification.requestPermission().then((permission) => {
    if (permission === 'granted') {
      getToken(messaging, { vapidKey: 'YOUR_VAPID_KEY' })
        .then((currentToken) => {
          if (currentToken) {
            console.log('FCM Token:', currentToken);
            // Send token to your backend server and store it
          } else {
            console.log('No registration token available.');
          }
        })
        .catch((err) => {
          console.log('An error occurred while retrieving token.', err);
        });
    } else {
      console.log('Permission not granted for notifications.');
    }
  });
}

requestPermission();

Handle Messages:

Add a handler for foreground messages:

import { onMessage } from './firebase-config';

onMessage(messaging, (payload) => {
  console.log('Message received. ', payload);
  // Customize notification handling as needed
});

We will need to send a message to request authorization for the push messages. (After first login)

When the user agrees to receive the notifications should be added to the user list on the notification user table.

Example:

betarena_prod notifications user

id- integer, primary key, unique uid- text mobile_subscription- boolean desktop_subscription- boolean email_notification- boolean

Hasura authorization message:

betarena_prod notifications message_template

ID: 3

Translations:

betarena_prod translation notifications_message

ID: 2

ACCEPTANCE CRITERIA:

FIGMA:

https://www.figma.com/design/Our5F3rivxehftWdWTq1Zg/Betarena---Notifications?node-id=0-1&m=dev&t=0AC2bQJX7MWeQBRv-1

PROMPT:

https://www.figma.com/design/ucZbGBw46RVJOp3N1zfJEF/Prompt-for-notifications-%2F-push-messages?node-id=53-22940&m=dev

jonsnowpt commented 1 month ago

@Izobov

Image

Image

Image

Image

Image

Image

https://github.com/user-attachments/assets/d19abfc2-1d6a-4d7a-b002-c70623d507ea

Image

Image

jonsnowpt commented 1 month ago

@Izobov

Image

Image

Izobov commented 1 month ago

@jonsnowpt 7 needs to be discussed with John. He suggested we that css variable for that. But I agree with you, it looks to dark. I changed it to another css variable there

Izobov commented 1 month ago

@jonsnowpt we don't need preloaders for notifications/settings. Because we are goin to push that information in users information (like we have token balance, avatar and other info about the user), sou usually we will have all the necessary information before this page will be rendered.

jonsnowpt commented 1 month ago

@Izobov

Izobov commented 1 month ago

@jonsnowpt 4. Discussed with designer here https://www.figma.com/design/jw9dph3VTh506gKpNtG8F3?node-id=1-11420&m=dev#906151241

jonsnowpt commented 4 weeks ago

@Izobov

11.

Image

12.

Image

jonsnowpt commented 3 weeks ago

15.

Image

Izobov commented 1 day ago

@jonsnowpt can you reload with cash? it looks okay for me on test deployment Image

Izobov commented 1 day ago

@jonsnowpt 14 are we talking about notification settings? If yes, than it also works for me

jonsnowpt commented 1 day ago

@Izobov

2 3 Image

  1. Image
Izobov commented 15 hours ago

@jonsnowpt 1 Can you record video for 1st issue 2 Needs to be adjusted in firebase payload 3 Needs to be adjusted in firebase payload 4 Needs to be adjusted in firebase payload 5 What numbers are you talking about? You have All (1) Competition (1)? 6 Can you clarify what do you mean here?

@Izobov

  1. Image

  2. Image

  3. Wrong color and icon position: Image

Izobov commented 9 hours ago

@jonsnowpt 3 it's hover effect bg, for "not read" notifications you have another bg

jonsnowpt commented 9 hours ago

@jonsnowpt 3 it's hover effect bg, for "not read" notifications you have another bg

OK