Forum on Firebase configuration and utilities

Firebase configuration for push notification service

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #124
    Murali
    Keymaster

    Following code is to configure Firebase for push notification service,

    Below code checks for firebase messaging supported, if it is supported the it will assign public key to firebase messaging and when push notification receives in desktop browser or in mobile browser using messaging.onmessage code below,

    		if (firebase.messaging.isSupported()) {
        		// [START get_messaging_object]
        		// Retrieve Firebase Messaging object.
        		messaging = firebase.messaging();
        		// [END get_messaging_object]
        		// [START set_public_vapid_key]
        		// Add the public key generated from the console here.
        		//messaging.usePublicVapidKey(pnfpb_ajax_object_push.publicKey);
        		// [END set_public_vapid_key]
    
        		// IDs of divs that display Instance ID token UI or request permission UI.
        		const tokenDivId = 'token_div';
        		const permissionDivId = 'permission_div';
    
        		// [START refresh_token]
        		// Callback fired if Instance ID token is updated.
        		messaging.onTokenRefresh(() => {
        			messaging.getToken({serviceWorkerRegistration: registration, vapidKey:pnfpb_ajax_object_push.publicKey }).then((refreshedToken) => {
        				//console.log('Token refreshed.');
        				// Indicate that the new Instance ID token has not yet been sent to the
        				// app server.
        				setTokenSentToServer(false);
        				// Send Instance ID token to app server.
        				sendTokenToServer(refreshedToken);
        				// [START_EXCLUDE]
        				// Display new Instance ID token and clear UI of all previous messages.
        				//resetUI();
        				// [END_EXCLUDE]
        			}).catch((err) => {
          				console.log('Unable to retrieve refreshed token ', err);
          				showToken('Unable to retrieve refreshed token ', err);
    	  				// alert('Unable to retrieve refreshed token from cloud messaging service '+err);
        			});
      		});
      		// [END refresh_token]
    
      		// [START receive_message]
      		// Handle incoming messages. Called when:
      		// - a message is received while the app has focus
      		// - the user clicks on an app notification created by a service worker
      		//   <code>messaging.setBackgroundMessageHandler</code> handler.
    		messaging.onMessage((payload) => {
        		//console.log('Foreground push Message received. ', payload);
        		// [START_EXCLUDE]
        		// Update the UI to include the received message.
        		//appendMessage(payload);
        		//alert(payload.notification.click_action);
    
     			const notification_foreground = payload.notification;
     			// Customize notification here
     			const notificationTitle = notification_foreground.title;
    
     			const notificationOptions = {
        			body: notification_foreground.body,
        			icon: notification_foreground.icon,
    				image: notification_foreground.image,
        			data: {
                		url: notification_foreground.click_action
        			},
      				tag: 'renotify',
      				renotify: true	 
      			};
      			var notificationclickurl = payload.notification.click_action;
    
        		if (!("Notification" in window)) {
            		console.log("This browser does not support system notifications");
        		}
        		// Let's check whether notification permissions have already been granted
        		else
    			{
          			if (Notification.permission === "granted") {
            			// If it's okay let's create a notification
            			try {
               				//console.log(notification_foreground.click_action);
              				var notification = new Notification(notificationTitle, {
                                    body: notification_foreground.body,
                                    icon: notification_foreground.icon,
    								image: notification_foreground.image,
                                    data: {
                                        url: notification_foreground.click_action
                                    }
                                });
              				notification.onclick = function(event) {
                  				event.preventDefault(); //prevent the browser from focusing the Notification's tab
                  				window.open(notificationclickurl, '_blank');
                  				notification.close();
              				}
            			} catch (err) {
              				try { //Need this part as on Android we can only display notifications thru the serviceworker
    							if ('serviceWorker' in navigator) {
    								navigator.serviceWorker.register(homeurl+'/pnfpb_icpush_pwa_sw.js',{scope:homeurl+'/'}).then(function(registration) {
         							 registration.showNotification(notificationTitle, notificationOptions);
        							}).catch(function(err) {
            							console.log("Service Worker Failed to Register foreground notification", err);
        							})
    				
      							}
    							else
    							{
    								console.log('service workers not supported in this browser !!!');
    							}
                
              			} catch (err1) {
                			console.log(err1.message);
              			}
            		}
          		}
        	}
        	// [END_EXCLUDE]
    		})
    	}
     	else
    	{
    		console.log('This browser does not support PUSHAPI Firebase messaging!!!')
    	}
    #327
    Amegah
    Participant

    I plugin push notification to my site but not working and pwa too

    #334
    Murali
    Keymaster

    Please let me know your website or console message, I will check it. Please go to chrome browser application tab and service worker and check whether this file pnfpb_icpush_pwa_sw.js is active. You can also check this site muraliwebworld.com how this is configured in chrome browser or in edge browser or in firefox

    Please make sure Firebase configuration is correct as shown in plugin description

    Please let me the url your are facing i will check it.

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.

Manage push notifications

notification icon
We would like to show you notifications for the latest news and updates.
notification icon
You are subscribed to notifications
notification icon
We would like to show you notifications for the latest news and updates.
notification icon
You are subscribed to notifications
Would you like to install our app?
PNFPB Install PWA using share icon

Install our app using add to home screen in browser. In phone/ipad browser, click on share icon in browser and select add to home screen in ios devices or add to dock in macos

PNFPB Install PWA using share icon

Install our app using add to home screen in browser. In phone/ipad browser, click on share icon in browser and select add to home screen in ios devices or add to dock in macos

Progressive Web App (PWA) is installed successfully. It will also work in offline

Push notification permission blocked in browser settings. Reset the notification settings for website/PWA