Firebase web push notification token not getting

Question

I'm iOS developer not php, i'm implementing Firebase web push notifications for send and receive in web. I'm using xampp and php. For this i followed this tutorial https://www.itwonders-web.com/blog/push-notification-using-firebase-demo-tutorial. Here i created index1.html page and placed it in myphp folder, then created firebase-messaging-sw.js file and places in same folder. I'm getting alert for allow but token is null.

See below screenshot, this is my output.

Actually here I'm using xampp local host, is it mandatory to run in live website for to get token?

(My url is : http://192.168.64.2/myphp/)

My code is

Actually index.html page name not getting alert, that's why i replaced page name index1.html, why i don't know it's not showing any files.

index1.html

<html>
<title>Firebase Messaging Demo</title>
<style>
div {
    margin-bottom: 15px;
}
</style>
<body>
<div id="token"></div>
<div id="msg"></div>
<div id="notis"></div>
<div id="err"></div>
<script src="https://www.gstatic.com/firebasejs/5.9.0/firebase.js"></script>
<script>
    MsgElem = document.getElementById("msg")
    TokenElem = document.getElementById("token")
    NotisElem = document.getElementById("notis")
    ErrElem = document.getElementById("err")
    // Initialize Firebase
    // TODO: Replace with your project's customized code snippet
    var config = {
        apiKey: "AIza********yMSEK3PM",
        authDomain: "myf*********ject.firebaseapp.com",
        databaseURL: "https://myf*********ject.firebaseio.com",
        projectId: "myf******ject",
        storageBucket: "myf********ject.appspot.com",
        messagingSenderId: "67********7"
    };
    firebase.initializeApp(config);

    const messaging = firebase.messaging();
    messaging
        .requestPermission()
        .then(function () {
            MsgElem.innerHTML = "Notification permission granted." 
            console.log("Notification permission granted.");

            // get the token in the form of promise
            return messaging.getToken()
        })
        .then(function(token) {
            TokenElem.innerHTML = "token is : " + token
        })
        .catch(function (err) {
            ErrElem.innerHTML =  ErrElem.innerHTML + "; " + err
            console.log("Unable to get permission to notify.", err);
        });

    messaging.onMessage(function(payload) {
        console.log("Message received. ", payload);
        NotisElem.innerHTML = NotisElem.innerHTML + JSON.stringify(payload) 
    });
</script>

<body>
</body>

firebase-messaging-sw.js

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

// Initialize the Firebase app in the service worker by passing in the
// messagingSenderId.
firebase.initializeApp({
                   'messagingSenderId': '67******7'
                   });

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = firebase.messaging();

messaging.setBackgroundMessageHandler(function(payload) {
                                  console.log('[firebase-messaging-sw.js] Received background message ', payload);
                                  // Customize notification here
                                  const notificationTitle = 'Background Message Title';
                                  const notificationOptions = {
                                  body: 'Background Message body.',
                                  icon: '/itwonders-web-logo.png'
                                  };

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

if possible send detailed tutorial link for Firebase web push notifications.

score 1 · Answer 1 · answered Mar 19 '19 at 12:16

1

I also faced the same issue and could resolve this by moving the service worker file to htdocs folder i.e. the root folder

answered Mar 19 '19 at 12:16

Webdev

617
6
24

I did not get the question . Could you explain – Webdev Mar 19 '19 at 12:24
actually I'm using local host xampp to run my web app. Is our web app in live status or local host is enough. – Naresh Mar 19 '19 at 12:25
local host is enough. I executed the same code on localhost xampp – Webdev Mar 19 '19 at 12:26
Ok, but I'm not getting any token, can you please send your test code. Is it possible. – Naresh Mar 19 '19 at 12:27
Can you chat in the chat room? – Webdev Mar 19 '19 at 12:29
Ok, please wait – Naresh Mar 19 '19 at 12:34
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/190302/discussion-between-ios-and-webdev). – Naresh Mar 19 '19 at 12:34

Firebase web push notification token not getting

1 Answers1