使用 CDN 配置 Firebase 推送通知

首先,您在 HTML 文件中添加一个 CDN 脚本。我在 Yiata 网站上的 vue.js 应用程序中使用了这个库。

本网站使用 Webpack 和 dotnet core 2.2 进行配置。

Step-1-添加CDN

<script src="https://www.gstatic.com/firebasejs/7.14.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.1/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.1/firebase-analytics.js"></script>

进入全屏模式 退出全屏模式

Step-2-Config 脚本

在正文标签末尾添加此脚本后,您将添加如下 firebase 配置:

const firebaseConfig = {
              apiKey: YOUR_API_KEY,
              authDomain: YOUR_AUTH_DOMAIN,
              databaseURL: YOUR_DATABASE_URL,
              projectId: YOUR_PROJECT_ID,
              storageBucket: YOUR_STORAGE_BUCKET,
              messagingSenderId: YOUR_messagingSenderId",
              appId: YOUR_APP_ID,
              measurementId: YOURE_measurementId
            };
            firebase.initializeApp(firebaseConfig);
            firebase.analytics();
            const messaging = firebase.messaging();
            messaging.requestPermission().then(function () {
                console.log("Have Permission");
                return messaging.getToken();
              })
              .then((token) => {
                console.log('token', token);
              })
              .catch((err) => {
                console.log("Have not Permisstion", err)
              });
            console.log('messaging', messaging)
            messaging.onMessage(payload => {
              console.log('Message received. ', payload);
              localStorage.setItem(payload.collapse_key, JSON.stringify(payload.notification));
            });

进入全屏模式 退出全屏模式

步骤3-添加firebase service worker

对于初始 firebase 配置并连接到此服务,您必须在项目的根目录中添加 service worker js 文件。

importScripts("https://www.gstatic.com/firebasejs/7.14.1/firebase-app.js")
importScripts("https://www.gstatic.com/firebasejs/7.14.1/firebase-messaging.js")
firebase.initializeApp({
              apiKey: YOUR_API_KEY,
              authDomain: YOUR_AUTH_DOMAIN,
              databaseURL: YOUR_DATABASE_URL,
              projectId: YOUR_PROJECT_ID,
              storageBucket: YOUR_STORAGE_BUCKET,
              messagingSenderId: YOUR_messagingSenderId",
              appId: YOUR_APP_ID,
              measurementId: YOURE_measurementId
})

const messaging = firebase.messaging()
messaging.setBackgroundMessageHandler(payload => {
  console.log(
    "[firebase-messaging-sw.js] Received background message ",
    payload
  )
  const notificationTitle = "Background Message Title"
  const notificationOptions = {
    body: "Background Message body.",
    icon: "/firebase-logo.png",
  }

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

进入全屏模式 退出全屏模式

Step-4-添加清单json文件

在最后一步,您必须将 SENDER_ID 添加到 manifest.json 文件中

{
"gcm_sender_id": 'GCM_SENDER_ID'
}

进入全屏模式 退出全屏模式

Step-5-使用localStorage保存通知

现在您可以使用 getItem 方法读取本地存储以从本地存储获取通知。您可以为本地存储设置到期日期(例如:1 个月)