javascript - 当我在浏览器上时看不到 Firebase 通知-6ren

javascript - 当我在浏览器上时看不到 Firebase 通知

转载作者：行者123 更新时间：2023-12-05 07:09:43

我想将 Firebase 网络通知从 FCM 发送到 PWA 应用程序。当我在浏览器上时无法看到我的 firebase 通知，但当我离开浏览器(手机的主屏幕)时我可以看到通知。我不明白这个问题。请帮助我。提前致谢。

我的 firebase-messaging-sw.js

 // are not available in the service worker.
 importScripts('https://www.gstatic.com/firebasejs/7.14.0/firebase-app.js');
 importScripts('https://www.gstatic.com/firebasejs/7.14.0/firebase-messaging.js');

 // Initialize the Firebase app in the service worker by passing in
 // your app's Firebase config object.
 // https://firebase.google.com/docs/web/setup#config-object
 firebase.initializeApp({
   apiKey: 'api-key',
   authDomain: 'project-id.firebaseapp.com',
   databaseURL: 'https://project-id.firebaseio.com',
   projectId: 'project-id',
   storageBucket: 'project-id.appspot.com',
   messagingSenderId: 'sender-id',
   appId: 'app-id',
   measurementId: 'G-measurement-id',
 });

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


// If you would like to customize notifications that are received in the
// background (Web app is closed or not in browser focus) then you should
// implement this optional method.
// [START background_handler]
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: '/firebase-logo.png'
  };

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

这是我的 index.html

<!--
Copyright (c) 2016 Google Inc.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<html>
<head>
  <meta charset=utf-8 />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Firebase Cloud Messaging Example</title>

  <!-- Material Design Theming -->
  <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.orange-indigo.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>

  <link rel="stylesheet" href="main.css">

  <link rel="manifest" href="/manifest.json">
</head>
<body>
    <div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-header">

        <!-- Header section containing title -->
        <header class="mdl-layout__header mdl-color-text--white mdl-color--light-blue-700">
            <div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-grid">
                <div class="mdl-layout__header-row mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--8-col-desktop">
                    <h3>Firebase Cloud Messaging</h3>
                </div>
            </div>
        </header>

        <main class="mdl-layout__content mdl-color--grey-100">
            <div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-grid">

                <!-- Container for the Table of content -->
                <div class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--12-col-desktop">
                    <div class="mdl-card__supporting-text mdl-color-text--grey-600">
                        <!-- div to display the generated Instance ID token -->
                        <div id="token_div" style="display: none;">
                            <h4>Instance ID Token</h4>
                            <p id="token" style="word-break: break-all;"></p>
                            <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored"
                                    onclick="deleteToken()">
                                Refresh Token
                            </button>
                        </div>
                        <!-- div to display the UI to allow the request for permission to
                             notify the user. This is shown if the app has not yet been
                             granted permission to notify. -->
                        <div id="permission_div" style="display: none;">
                            <h4>Needs Permission</h4>
                            <p id="token"></p>
                            <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored"
                                    onclick="requestPermission()">
                                Request Permission
                            </button>
                        </div>
                        <!-- div to display messages received by this app. -->
                        <div id="messages"></div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- Import and configure the Firebase SDK -->
    <!-- These scripts are made available when the app is served or deployed on Firebase Hosting -->
    <!-- If you do not serve/host your project using Firebase Hosting see https://firebase.google.com/docs/web/setup -->
    <script src="/__/firebase/7.14.0/firebase-app.js"></script>
    <script src="/__/firebase/7.14.0/firebase-messaging.js"></script>
    <script src="/__/firebase/init.js"></script>

    <script>
      // [START get_messaging_object]
      // Retrieve Firebase Messaging object.
      const messaging = firebase.messaging();
      // [END get_messaging_object]
      // [START set_public_vapid_key]
      // Add the public key generated from the console here.
      messaging.usePublicVapidKey('BDTDxT_59kRHBjDTBwnDvFQcdy8Y8A8NvjFFzW2aMo27raPODdeX89pSBA6pxerBbmpBXaLxiadjiNHTDmComhs');
      // [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().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);
        });
      });
      // [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
      //   `messaging.setBackgroundMessageHandler` handler.
      messaging.onMessage((payload) => {
        console.log('Message received. ', payload);
        // [START_EXCLUDE]
        // Update the UI to include the received message.
        appendMessage(payload);
        // [END_EXCLUDE]
      });
      // [END receive_message]

      function resetUI() {
        clearMessages();
        showToken('loading...');
        // [START get_token]
        // Get Instance ID token. Initially this makes a network call, once retrieved
        // subsequent calls to getToken will return from cache.
        messaging.getToken().then((currentToken) => {
          if (currentToken) {
            sendTokenToServer(currentToken);
            updateUIForPushEnabled(currentToken);
          } else {
            // Show permission request.
            console.log('No Instance ID token available. Request permission to generate one.');
            // Show permission UI.
            updateUIForPushPermissionRequired();
            setTokenSentToServer(false);
          }
        }).catch((err) => {
          console.log('An error occurred while retrieving token. ', err);
          showToken('Error retrieving Instance ID token. ', err);
          setTokenSentToServer(false);
        });
        // [END get_token]
      }


      function showToken(currentToken) {
        // Show token in console and UI.
        const tokenElement = document.querySelector('#token');
        tokenElement.textContent = currentToken;
      }

      // Send the Instance ID token your application server, so that it can:
      // - send messages back to this app
      // - subscribe/unsubscribe the token from topics
      function sendTokenToServer(currentToken) {
          if (!isTokenSentToServer()) {
              console.log('Sending token to server...' + currentToken);
          // TODO(developer): Send the current token to your server.
          setTokenSentToServer(true);
        } else {
          console.log('Token already sent to server so won\'t send it again ' +
              'unless it changes');
        }

      }

      function isTokenSentToServer() {
        return window.localStorage.getItem('sentToServer') === '1';
      }

      function setTokenSentToServer(sent) {
        window.localStorage.setItem('sentToServer', sent ? '1' : '0');
      }

      function showHideDiv(divId, show) {
        const div = document.querySelector('#' + divId);
        if (show) {
          div.style = 'display: visible';
        } else {
          div.style = 'display: none';
        }
      }

      function requestPermission() {
        console.log('Requesting permission...');
        // [START request_permission]
        Notification.requestPermission().then((permission) => {
          if (permission === 'granted') {
            console.log('Notification permission granted.');
            // TODO(developer): Retrieve an Instance ID token for use with FCM.
            // [START_EXCLUDE]
            // In many cases once an app has been granted notification permission,
            // it should update its UI reflecting this.
            resetUI();
            // [END_EXCLUDE]
          } else {
            console.log('Unable to get permission to notify.');
          }
        });
        // [END request_permission]
      }

      function deleteToken() {
        // Delete Instance ID token.
        // [START delete_token]
        messaging.getToken().then((currentToken) => {
          messaging.deleteToken(currentToken).then(() => {
            console.log('Token deleted.');
            setTokenSentToServer(false);
            // [START_EXCLUDE]
            // Once token is deleted update UI.
            resetUI();
            // [END_EXCLUDE]
          }).catch((err) => {
            console.log('Unable to delete token. ', err);
          });
          // [END delete_token]
        }).catch((err) => {
          console.log('Error retrieving Instance ID token. ', err);
          showToken('Error retrieving Instance ID token. ', err);
        });

      }

      // Add a message to the messages element.
      function appendMessage(payload) {
        const messagesElement = document.querySelector('#messages');
        const dataHeaderELement = document.createElement('h5');
        const dataElement = document.createElement('pre');
        dataElement.style = 'overflow-x:hidden;';
        dataHeaderELement.textContent = 'Received message:';
        dataElement.textContent = JSON.stringify(payload, null, 2);
        messagesElement.appendChild(dataHeaderELement);
        messagesElement.appendChild(dataElement);
      }

      // Clear the messages element of all children.
      function clearMessages() {
        const messagesElement = document.querySelector('#messages');
        while (messagesElement.hasChildNodes()) {
          messagesElement.removeChild(messagesElement.lastChild);
        }
      }

      function updateUIForPushEnabled(currentToken) {
        showHideDiv(tokenDivId, true);
        showHideDiv(permissionDivId, false);
        showToken(currentToken);
      }

      function updateUIForPushPermissionRequired() {
        showHideDiv(tokenDivId, false);
        showHideDiv(permissionDivId, true);
      }

      resetUI();
    </script>


</body>
</html>

如果您需要更多信息，请告诉我。

最佳答案

将此代码添加到您的 js 文件而不是 service-worker.js 文件

当 Web 应用在前台时触发 onMessage 事件

messaging.onMessage(function(payload) {
    const notificationTitle = payload.notification.title;
    const notificationOptions = {
        body: payload.notification.body, 
        icon: payload.notification.icon,        
    };
    // console.log(notificationTitle,notificationOptions)

    if (!("Notification" in window)) {
        console.log("This browser does not support system notifications.");
    } else if (Notification.permission === "granted") {
        // If it's okay let's create a notification
        var notification = new Notification(notificationTitle,notificationOptions);
        notification.onclick = function(event) {
            event.preventDefault();
            window.open(payload.notification.click_action , '_blank');
            notification.close();
        }
    }
});

关于javascript - 当我在浏览器上时看不到 Firebase 通知，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61463418/

文章推荐： c++ - Python OpenCv 构建未在命令行中检测到 visual studio 2019

文章推荐： python - 垂直填充 3d matplotlib 图

android - 当应用程序不在前台时，如何使用 Firebase Cloud Messaging(通知)在 Android 中获取 Heads Up 通知？
我有一个应用程序应该在应用程序处于前台和后台(不在历史记录中)时显示提醒通知。在前景情况下，我通过以下方法实现了这一点。 PendingIntent pendingIntent = PendingI
WPF 通知
如何为我的 WPF 应用程序创建通知，例如浏览器上的通知，它们通过浏览器顶部的“工具栏”显示消息或通过在右下角向上/向下滑动的弹出窗口显示“MSN”样式通知屏幕。也许在应用程序中心淡入/淡出的面板可以
HTML5 通知
关闭。这个问题是opinion-based .它目前不接受答案。想要改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 9 年前。 Improve
Redis 通知
我正在使用 Redis 作为分布式缓存。我有不同的应用程序，它们只听特定的键。例如:App1 听 App1.*App2 监听 App2.* 等等。我的应用程序使用以下模式接收通知:App1:“ ke
新镜像版本的 Docker 通知
我正在尝试构建一个基于官方节点 docker 镜像的 docker 镜像，我想知道是否有某种方法可以在推送新版本的官方节点镜像时自动重建镜像。这样我的图像就不会基于过时的基础图像。也许有类似 rss
notifications - Nextcloud 通知
我在一个项目中工作，我需要在添加或修改文件时在数据库中记录文件信息，以便它们保持同步。这些文件应该存储在 Nextcloud 服务器中，那么 Nextcloud 是否有办法通知这些更改(例如 webh
Laravel 通知 - 通过用户指定
通知类中的方法via 如何根据用户的偏好动态变化，一个用户可能想通过电子邮件接收，而另一个用户则不想 public function via($notifiable) { return ['d
Laravel 通知 - 延迟电子邮件发送并在条件满足时取消
我有一个应用程序，我正在发送推送通知，如果用户登录到应用程序，这很好 - 但是，如果他们没有/如果他们没有在 X 分钟内阅读通知，我想给他们发送一封电子邮件. 我要解决的方法是使用 Laravel N
关于提交评论的 Django 通知
我正在使用 Django 的 contrib.comments 并想了解以下内容。是否有任何实用程序或应用程序可以插入到某个应用程序中，当对某个项目发表评论时向您发送通知？我并没有真正使用过那么多
首次启动应用程序时 iPhone 通知
我希望用户在启动应用程序之前接受协议(protocol)。所以在 appDelegate.m 中我有以下内容: - (BOOL)application:(UIApplication *)applica
移除元素时的 angularJS 通知
我正在创建一个新指令，我想知道如何在 angular 从 DOM 中删除元素时收到通知。我的目标是在删除元素时添加 jquery 动画。最佳答案如果您尝试对元素的移除进行动画处理，则需要在移除元
iphone - UIScrollView 通知
我正在编写一个应用程序，其工作方式与Apple的Weather.app非常相似:底部有一个UIPageControl，屏幕中间有一个UIScrollView。在我的代码中，我实现了 - (void)s
iPhone notification_post 通知
如何查明 iPhone 注册了哪些通知？例如: notify_post("com.apple.springboard/Prefs"); 最佳答案虽然这个问题的答案已经得到确认，但由于 @Nate
cocoa 通知，如何观察事件？
我的 Cocoa 应用程序中有一个 TextField。该文本字段有时会被填充，有时会为空。我希望当字段为空时按钮被禁用。现在，每当我对 Core Data 执行某些操作时，我都会检查该字段，Tex
文件更新时的 Delphi 通知
我的应用程序在其数据库中包含文档。用户可以打开文档，在这种情况下，文档将保存到临时文件夹并在用户计算机上打开。我希望在这些临时文件之一发生更改时收到通知，并让用户将更改后的文档保存回数据库。在 D
javascript - 轮询新消息警报/通知
我目前正在开发一个网络应用程序，它不断对 php 进行 ajax 调用(轮询)，以从数据库中提取新的“任务”，有点像 gmail/facebook 检查新电子邮件和消息的方式。当前的 JavaScri
angular - Electron 通知
我正在尝试让通知适用于我使用 Angular 5 和 Electron 制作的 Electron 应用程序。到目前为止，我的 index.html 文件中有以下代码: function doNo
系统为后台音频应用程序提供的 iOS 通知
我有一个录音/播放应用程序。它在后台运行。当它进入后台时，如果任何其他音频应用程序打开或开始使用音频资源，我想适本地处理我的应用程序。 iOS 提供了一种发送此类通知的方法，如在 ipod 播放器中看
javascript - Chrome 通知
关闭。这个问题需要多问focused 。目前不接受答案。想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 4 年前。 Improve this ques
提交某些文件的 SVN 通知
是否有 Subversion 的工具可以在对某些文件提交更改时自动通知我？最佳答案您可以创建一个 post-commit hook script “ Hook ”提交。在钩子(Hook)脚本中，

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 当我在浏览器上时看不到 Firebase 通知