Site refreshed in background Chrome - Firebase

When I click the notification on chrome it messaging.onMessage()

doesn't work (when I am on the page) and I don't see any notification (when I leave the page). The only thing that shows up is the popup that says The site has been updated in the background

, but I don't have this issue in firefox. I looked around this problem and found out that it is semi-general, but I couldn't change my code to make it work correctly.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Notifications</title>
</head>
<body>

<script src="https://www.gstatic.com/firebasejs/4.1.3/firebase.js"></script>
<script src="app.js"></script>
</body>
</html>

      

app.js

/**
 * Created by nikos on 13/7/2017.
 */
console.log('APP.JS');

var config = {
    apiKey: "AIz..",
    authDomain: "....firebaseapp.com",
    databaseURL: "https://....firebaseio.com",
    projectId: "locpushweb",
    storageBucket: "locpushweb.appspot.com",
    messagingSenderId: "..."
};
firebase.initializeApp(config);

const messaging = firebase.messaging();
messaging.requestPermission()
    .then(function () {
        console.log("Have Permission");
        return messaging.getToken();
    }).then(function (token) {
    console.log(token);
}).catch(function (err) {
    console.log("Error: " + err)
});

messaging.onMessage(function (payload) {
     console.log(payload);
})

      

firebase-posts-sw.js

/**
 * Created by nikos on 13/7/2017.
 */
console.log('SW');
importScripts('https://www.gstatic.com/firebasejs/4.1.3/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/4.1.3/firebase-messaging.js');

var config = {
    apiKey: "AIz..",
    authDomain: "....firebaseapp.com",
    databaseURL: "https://....firebaseio.com",
    projectId: "locpushweb",
    storageBucket: "locpushweb.appspot.com",
    messagingSenderId: "..."
};
firebase.initializeApp(config);

const messaging = firebase.messaging();

// messaging.setBackgroundMessageHandler(function (payload) {
//     var data = JSON.parse(payload);
//     self.registration.showNotification(data.title, {
//         body: data.body,
//         icon: data.icon,
//         click_action: data.click_action,
//         time_to_live: data.time_to_live,
//         data: data.data,
//         tag: data.tag
//     });
// });

      

Finally, this is the curl command:

curl -X POST -H "Authorization: key=AAAAZGd...." -H "Content-Type: application/json" -d '{
  "notification": {
    "title": "Portugal vs. Denmark",
    "body": "5 to 1",
    "icon": "firebase-logo.png",
    "click_action": "http://localhost:8081"
  },
  "to": "cxfoMyjwsOY:APA91bFnOQlYxw3iPlbcc714wI5BFWLfEXvmT1FRTL0SJNuy1AOTfah4EKTdvoi1SvnX8SpD9CUD1D-I8GdKcIb-M1l65NFc8xhJNF2iBffERN9yWSNnN2_CHqodcpMMSyC_IDKZJ0GH"
}' "https://fcm.googleapis.com/fcm/send"

      

+3


source to share





All Articles