Firebase WEB推播 onMessage 在手機Android 不顯示

fcm web 推播 onmessage

tsaipowun 2019-12-28 12:30:48 ‧ 1108 瀏覽

分享至

請問，網頁推播的前台是正常，但是在手機前台狀況下卻沒有辦法顯示。
查詢是var notification = new Notification(notifyMsg.tit....
此段程是沒有執行到(網頁版沒有問題)，請問是哪邊設定出錯?

<head>
  <base href="">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="manifest" href="manifest.json">
</head>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://www.gstatic.com/firebasejs/4.6.1/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/4.6.1/firebase-messaging.js"></script>

<script type="text/javascript">

  var messaging = null;

  // 開始判斷
  $(window).on('load',function(){
      mess_check();
  });

  // 判斷
  function mess_check(){

    // 提示瀏覽器不支援
    if(!service_check()){
      // 不支援提示
      console.log("瀏覽器不支援");
      return;
    }

    // 啟動Firebase
    firebase_run();

    // 允許(取得Token)
    if(Notification.permission=='granted'){
      console.log("推播允許");
    }

    // 拒絕(拒絕提示)
    else if(Notification.permission=='denied'){
      console.log("Notification.permission='denied'");
      console.log("推播拒絕");
    }

    // 未判斷(提示允許)
    else if(Notification.permission=='default'){
      console.log("Notification.permission='default'");
      $("#push_check").modal('show');
    }

  }

  // 啟動Firebase
  function firebase_run(){

    // Firebase 專案設定
    var firebaseConfig = {
      apiKey: "AIzaSyDgu1aSqfLX-LIPabasyXZKOpkntu1zZ8c",
      authDomain: "eatfood-b38e7.firebaseapp.com",
      databaseURL: "https://eatfood-b38e7.firebaseio.com",
      projectId: "eatfood-b38e7",
      storageBucket: "eatfood-b38e7.appspot.com",
      messagingSenderId: "143139701423",
      appId: "1:143139701423:web:ba1fbd55e8b55e55a34a5a",
      measurementId: "G-GQ27ZK9QBW"
    };

    // 初始firebase
    firebase.initializeApp(firebaseConfig);

    // 指定 SW firebase-messaging-sw.js 的路徑與本　html 檔相同
    navigator.serviceWorker.register('eat_push_firebase-messaging-sw.js')
    .then((registration) => {
      messaging.useServiceWorker(registration);
    });

    // 啟動　Firebase Messaging
    messaging = firebase.messaging();

    // 收到訊息時的處理(前景)
    messaging.onMessage(function (payload) {
      console.log('onMessage run');
      //如果可以顯示通知就做顯示通知
      if (Notification.permission === 'granted') {
        notifyMe(payload);
      }
    });
  }

  // 視窗提示訊息
  function notifyMe(payload) {

    if (!("Notification" in window)) {
      console.log("This browser does not support desktop notification");
    }
    else if (Notification.permission === "granted") {
      show_win(payload);
    }
    else if (Notification.permission !== 'denied' || Notification.permission === "default") {
      console.log("This browser requestPermission");
      // 取得授權狀態
      Notification.requestPermission(function (permission) {
        if (permission === "granted") {
          show_win(payload);
        };
      });
    };
  };

  // 視窗訊息
  function show_win(payload){
    console.log('onMessage: ', payload);
    var notifyMsg = payload.data;
    var notification = new Notification(notifyMsg.title,
    {
      body: notifyMsg.body,
      icon: notifyMsg.icon
    });

    notification.onclick = function (e) { // 綁定點擊事件
      e.preventDefault(); // prevent the browser from focusing the Notification's tab
      window.open(notifyMsg.click_action);
    }

  }

  // 判斷瀏覽器是否支援
  function service_check(){
    if('serviceWorker' in navigator) {
      return true;
    }
    return false;
  }

  // 判斷是否允許推播
  function push_check(){
    if (('Notification' in window)) {
      return true;
    }
    return false;
  }

</script>

eat_push_firebase-messaging-sw.js

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

firebase.initializeApp({
  'messagingSenderId': 'G-GQ27ZK9QBW'
});
const messaging = firebase.messaging();

messaging.setBackgroundMessageHandler(function (payload) {
    console.log('Received background message ', payload);

		const notificationTitle = payload.data.title;
		const notificationOptions = {
		  body: payload.data.body,
		  icon: payload.data.icon,
		  click_action: payload.data.click_action
		};

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

self.addEventListener('install', function() {
	self.skipWaiting();
});


console.log("Loaded SW..");