uzdevid/yii2-fcm

为 Yii2 框架提供通过 Firebase Cloud Messaging 发送推送消息并在网页上接收的扩展。

安装: 158

依赖关系: 1

建议者: 0

安全: 0

星星: 5

关注者: 0

分支: 0

开放问题: 0

类型:yii2-extension

1.2.0 2023-05-11 12:47 UTC

This package is auto-updated.

Last update: 2024-09-11 15:30:50 UTC


README

为 Yii2 框架提供通过 Firebase Cloud Messaging 发送推送消息并在网页上接收的扩展。

注意: 此扩展使用 Cloud Messaging API (Legacy)。

首先,您需要在 firebase 网站上注册并创建项目。然后,进入您项目的“Cloud Messaging”部分,启用 Cloud Messaging API (Legacy)。

启用后,将提供 Server key。您需要将此 Key 写入 config/web.php 文件。

安装

composer require uzdevid/yii2-fcm

或者

php composer.phar require uzdevid/yii2-fcm

或者在 composer.json 文件中添加以下行

"uzdevid/yii2-fcm": "*"

配置

config/web.php

return [
    // ...
    'components' => [
        // ...
        'notifier' => [
            'class' => 'uzdevid\fcm\Notifier',
            'serverKey' => '{serverKey}', // Cloud Messaging API (Legacy) ni faollashtirganingizdan so'ng, "Server key" beriladi.
        ],
        // ...
    ],
    // ...
]

发送推送消息

$token = "frYfozsx0K7e..."; // Push habar qabul qiluvchi qurilmaning tokeni
$notification = [
    'title' => 'Salom, dunyo!',
    'body' => 'Bu birinchi push habarim',
    'data' => [
        // qo'shimcha ma'lumotlar
    ]
];

$params = [
    // qo'shimcha parametrlar (majburiy emas)
];

Yii::app()->notifier->notify($token, $notification, $params);

注意: 推送消息接收器设备(客户端,网页,...)需要将设备 token 发送到服务器。

注意: 如果在上述 notify() 方法中发生错误,可能会返回 ExceptionBadRequestHttpException 异常。

服务器端操作就此结束。

在网页上接收推送消息

注意: 接收推送消息并在其上执行某些操作仅在客户端(目前是网页)上执行。

注意: 为了将推送消息展示给用户,操作系统(Windows,Android,...)浏览器需要允许,并且浏览器需要允许网页,并且网页需要在 https 状态下运行。

在 Firebase 项目首页创建网页应用。创建应用后,将提供用于配置客户端所需的信息。

1. 配置

将上述信息写入 config/params.php 文件。

return [
    // ...
    'fcm' => [
        'apiKey' => '{apiKey}',
        'authDomain' => '{authDomain}',
        'databaseURL' => '{databaseURL}',
        'projectId' => '{projectId}',
        'storageBucket' => '{storageBucket}',
        'messagingSenderId' => '{messagingSenderId}',
        'appId' => '{appId}',
        'measurementId' => '{measurementId}',
        'vapidKey' => '{vapidKey}',
    ],
    // ...
];

或者将以下常量写入 <head> 标签中。

const firebaseConfig = {
    apiKey: "{apiKey}",
    authDomain: "{authDomain}",
    databaseURL: "{databaseURL}",
    projectId: "{projectId}",
    storageBucket: "{storageBucket}",
    messagingSenderId: "{messagingSenderId}",
    appId: "{appId}",
    measurementId: "{measurementId}",
    vapidKey: "{vapidKey}"
};

注意: 要获取 vapidKey 参数,您需要创建 Web Push 证书。您可以在 Web Push Certificates (Project settings/Cloud Messaging/Web configuration) 部分创建。

2. 链接文件

将以下行添加到 layouts/main.php 文件中(或另一个通用布局文件)。此行链接了页面所需的 js 文件。

\uzdevid\fcm\FcmAsset::register($this);

3. 接收设备 token 并发送到服务器

<head> 标签内创建以下 JavaScript 函数,并编写代码将其发送到服务器。此函数在接收到设备 token 时由扩展启动。

function saveToken(token) {
    // serverga yuborish uchun kodni yozing
}

4. 在页面上接收推送消息

<head> 标签内编写以下 JavaScript 代码。此函数在接收到新的推送消息时由扩展启动。 payload - 服务器发送的数据

function onNotify(payload) {
    // habarni foydalanuvchiga ko'rsatish, yoki boshqa amallarni bajarish uchun kodni yozing
}

onNotify() 函数用于在用户在网页上活跃时显示接收到的推送消息。

5. 浏览器未活跃时接收推送消息

web 文件夹内创建 firebase-messaging-sw.js 文件,并编写以下代码。

web/firebase-messaging-sw.js

importScripts("https://www.gstatic.com/firebasejs/9.1.3/firebase-app-compat.js");
importScripts("https://www.gstatic.com/firebasejs/9.1.3/firebase-messaging-compat.js");

firebase.initializeApp({
    apiKey: "{apiKey}",
    authDomain: "{authDomain}",
    projectId: "{projectId}",
    storageBucket: "{storageBucket}",
    messagingSenderId: "{messagingSenderId}",
    appId: "{appId}",
    measurementId: "{measurementId}",
    vapidKey: "{vapidKey}"
});

const messaging = firebase.messaging();

此代码将文件作为浏览器的 Service worker 启用。要检查,请按 ctrl+shift+i 键,然后转到 Application/Service workers 部分。

6. 测试

配置完成后,您可以通过服务器或 curl、postman 等方式发送推送消息进行测试。

curl --location 'https://fcm.googleapis.com/fcm/send' \
--header 'Authorization: key={serverKey}' \
--header 'Content-Type: application/json' \
--data '{
    "to": "{token}",
    "notification": {
        "title": "test",
        "body": "test",
        "data": {}
    }
}'