templates/bo/include/notification-modal.html.twig line 1

Open in your IDE?
  1. <div class="modal fade" id="notificationModal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="notificationModalLabel" aria-hidden="true">
  2.     <div class="modal-dialog">
  3.         <div class="modal-content">
  4.             <div class="modal-body">
  5.                 <h5 class="modal-title" id="notificationModalLabel">
  6.                     <i class="fa flaticon2-notification fa-1x"></i>
  7.                     Veuillez activer les notifications
  8.                 </h5>
  9.             </div>
  10.             <div class="modal-footer">
  11.                 <button type="button" class="btn btn-primary" id="enableNotificationBtn">activer</button>
  12.             </div>
  13.         </div>
  14.     </div>
  15. </div>
  17. <script type="module">
  18.     import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js';
  19.     import { getMessaging, getToken, onMessage, deleteToken } from 'https://www.gstatic.com/firebasejs/9.23.0/firebase-messaging.js';
  22.     const firebaseConfig = {
  23.         apiKey: "AIzaSyCRHeWKNN7QGvSK_aaOPUQZlWKdBfjoQwY",
  24.         authDomain: "zoe-business-plan.firebaseapp.com",
  25.         projectId: "zoe-business-plan",
  26.         storageBucket: "zoe-business-plan.appspot.com",
  27.         messagingSenderId: "581857449358",
  28.         appId: "1:581857449358:web:1a7faa7f7427f587b540df",
  29.         measurementId: "G-C227R0F3H2"
  30.     };
  32.     // Initialize Firebase
  33.     const app = initializeApp(firebaseConfig);
  34.     const vapidKey = "BPuVr_gdlBS5JDnCLO4pVzQimBee32x2hfFbH77nuCSGrpceyR5-8Ei-VTLNXZp9FNAg4G7bx167itbVp3cuIXI"
  35.     let messaging = getMessaging(app);
  37.     function deleteFirebaseToken() {
  38.         deleteToken(messaging, { vapidKey: vapidKey }).then(() => {
  39.             console.log('Token deleted.');
  40.         }).catch((err) => {
  41.             console.log('Unable to delete token. ', err);
  42.         });
  43.     }
  45.     onMessage(messaging, (payload) => {
  46.         console.log('Message received. ', payload);
  47.         const notificationTitle = payload.notification.title;
  48.         const notificationOptions = { body: payload.notification.body };
  49.         const notification = new Notification(notificationTitle,  notificationOptions);
  50.         console.log(notification)
  51.         if (location.pathname.includes("/bo/affichage-business-plan") || location.pathname.includes("/bo/models-business-plan") || location.pathname.includes('/mes-business-plan')){
  52.             location.reload()
  53.         }
  54.     });
  56.     if (window.Notification && Notification.permission === 'granted') {
  57.         console.log('Les notifications sont activées.');
  58.     } else if (window.Notification && Notification.permission !== 'denied') {
  59.         $('#notificationModal').modal('show')
  60.     } else {
  61.         console.log('Les notifications sont désactivées ou l\'accès aux notifications est refusé.');
  62.     }
  64.     async function getOrRegisterServiceWorker(){
  65.         if ('serviceWorker' in navigator) {
  66.             const serviceWorker = await window.navigator.serviceWorker
  67.                 .getRegistration('/firebase-zoe-business-notification-scope');
  68.             if (serviceWorker) return serviceWorker;
  69.             return window.navigator.serviceWorker.register('/firebase-messaging-sw.js', {
  70.                 scope: '/firebase-zoe-business-notification-scope',
  71.             });
  72.         }
  73.         throw new Error('The browser doesn`t support service worker.');
  74.     }
  76.     function registerFirebaseToken(token){
  77.         const firebaseToken = localStorage.getItem("firebaseToken")
  78.         const firebaseTokenIsUsed = localStorage.getItem("firebaseTokenIsUsed")
  80.         if(firebaseTokenIsUsed !== undefined && firebaseTokenIsUsed && firebaseToken !== undefined && firebaseToken === token){
  81.             console.log("Zoe Business Notifications")
  82.         }else{
  83.             localStorage.setItem("firebaseToken", token)
  84.             localStorage.setItem("firebaseTokenIsUsed", false)
  85.         }
  87.     }
  89.     function enableNotification(){
  90.         $('#notificationModal').modal('hide')
  91.         Notification.requestPermission().then(function(permission) {
  92.             if (permission === 'granted') {
  93.                 console.log('Les notifications sont maintenant activées.');
  94.                 localStorage.setItem("isGranted", true)
  95.                 getOrRegisterServiceWorker().then(serviceWorkerRegistration => {
  96.                     getToken(messaging, { vapidKey: vapidKey, serviceWorkerRegistration }).then((currentToken) => {
  97.                         if (currentToken) {
  98.                             registerFirebaseToken(currentToken)
  99.                         } else {
  100.                             console.log('No registration token available. Request permission to generate one.');
  101.                         }
  102.                     }).catch((err) => {
  103.                         location.reload()
  104.                         console.log('An error occurred while retrieving token. ', err);
  105.                     });
  106.                 })
  108.             }
  109.         });
  110.     }
  112.     document.addEventListener('DOMContentLoaded', function() {
  113.         document.querySelector('#enableNotificationBtn').addEventListener('click', enableNotification);
  114.     });
  116.     if (localStorage.getItem('isGranted')){
  117.         getOrRegisterServiceWorker().then(serviceWorkerRegistration => {
  118.             getToken(messaging, { vapidKey: vapidKey, serviceWorkerRegistration }).then((currentToken) => {
  119.                 if (currentToken) {
  120.                     registerFirebaseToken(currentToken)
  121.                 } else {
  122.                     console.log('No registration token available. Request permission to generate one.');
  123.                 }
  124.             }).catch((err) => {
  125.                 console.log('An error occurred while retrieving token. ', err);
  126.             });
  127.         })
  128.     }
  130. </script>