Ejemplo de notificaciones WebEngine

WebEngine Notifications demuestra cómo utilizar el método QWebEngineProfile::setNotificationPresenter() y la clase QWebEngineNotification para mostrar una notificación web HTML5 al usuario.

Ejecución del ejemplo

Para ejecutar el ejemplo desde Qt Creator, abra el modo Welcome y seleccione el ejemplo de Examples. Para más información, consulta Qt Creator: Tutorial: Construir y ejecutar.

Página HTML

En este ejemplo, creamos una página HTML interna que se añade a través de un archivo de colección de recursos (.qrc). La página muestra botones para solicitar permisos y contiene el código JavaScript necesario para activar esta solicitud:

            Notification.requestPermission().then(function (permission) {
                if (permission == 'granted')
                    createNotification()
            })

La página también contiene un botón para crear una notificación. Las siguientes construcciones JavaScript se ejecutan en el evento de pulsación:

    function createNotification() {
        let title = 'Notification #' + ++notificationsCreated
        let options = { body: 'Visit doc.qt.io for more info!', icon: 'icon.png', }

        let notification = new Notification(title, options)
    }

Función principal

En la función main, instanciamos un QWebEngineView, cargamos nuestra página HTML interna y configuramos los callbacks necesarios para la gestión de notificaciones.

Solicitud de permisos para funciones

A continuación, utilizamos la llamada a QWebEnginePage::permissionRequested() para solicitar el permiso del usuario para mostrar notificaciones en su dispositivo.

    QObject::connect(view.page(), &QWebEnginePage::permissionRequested,
                     [&] (QWebEnginePermission permission) {
                         if (permission.permissionType() != QWebEnginePermission::PermissionType::Notifications)
                             return;
                         permission.grant();
                     });

Gestión de nuevas notificaciones

A continuación, construimos un NotificationPopup que encapsula los datos de la notificación web HTML. También utilizamos la llamada QWebEngineProfile::setNotificationPresenter() para establecer nuestro manejador, que utilizamos junto con nuestro popup para manejar todas las nuevas notificaciones.

    auto popup = new NotificationPopup(&view);
    profile->setNotificationPresenter([&] (std::unique_ptr<QWebEngineNotification> notification)
                                      { popup->present(notification); });

Presentación de notificaciones a los usuarios

La clase NotificationPopup de este ejemplo es una clase simple basada en QWidget que utiliza varias instancias de QLabel para mostrar el título, el mensaje y el icono de la notificación.

class NotificationPopup : public QWidget
{
    Q_OBJECT

    QLabel m_icon, m_title, m_message;
    std::unique_ptr<QWebEngineNotification> notification;

Presentación de notificaciones

Dentro del método present, primero cerramos y liberamos la notificación previa si tenemos una y luego tomamos posesión de una nueva notificación llamando al método std::unique_ptr::swap en nuestra instancia de notificación interna.

    void present(std::unique_ptr<QWebEngineNotification> &newNotification)
    {
        if (notification) {
            notification->close();
            notification.reset();
        }

        notification.swap(newNotification);

A continuación, consultamos la instancia de notificación para obtener un título, un mensaje y un icono llamando a QWebEngineNotification::title(), QWebEngineNotification::message(), QWebEngineNotification::icon() y configuramos las etiquetas apropiadas en nuestra ventana emergente.

        m_title.setText("<b>" + notification->title() + "</b>");
        m_message.setText(notification->message());
        m_icon.setPixmap(QPixmap::fromImage(notification->icon()).scaledToHeight(m_icon.height()));

Después de esto estamos listos para mostrar nuestra notificación al usuario llamando al método QWidget::show(). En este paso también llamamos al método QWebEngineNotification::show() para notificar al código JavaScript sobre nuestro evento show.

        show();
        notification->show();

Finalmente, configuramos un callback para manejar el evento de cierre desde el lado de JavaScript conectándonos a la señal QWebEngineNotification::closed(). También programamos un evento de temporizador para cerrar nuestra notificación activa automáticamente.

        connect(notification.get(), &QWebEngineNotification::closed, this, &NotificationPopup::onClosed);
        QTimer::singleShot(10000, notification.get(), [&] () { onClosed(); });

    }

Cierre de la notificación activa

Ejecutamos el paso de cierre para la notificación actualmente activa ya sea por tiempo de espera o manejando el evento JavaScript. Primero, ocultamos el widget emergente llamando a QWidget::hide(). Luego, notificamos al código JavaScript llamando al método QWebEngineNotification::close(). Finalmente, destruimos el objeto de notificación a través del método std::unique_ptr::reset().

    void onClosed()
    {
        hide();
        notification->close();
        notification.reset();
    }

Implementación de la interacción con el usuario

Para implementar el paso de clic para una notificación, manejamos la interacción del ratón a través de QWidget::mouseReleaseEvent(). En este evento, el código JavaScript es notificado llamando al método QWebEngineNotification::click(). Luego realizamos automáticamente el paso de cierre ya que una notificación se considera completamente manejada y ya no es necesaria, y por lo tanto puede ser destruida.

    void mouseReleaseEvent(QMouseEvent *event) override
    {
        QWidget::mouseReleaseEvent(event);
        if (notification && event->button() == Qt::LeftButton) {
            notification->click();
            onClosed();
        }
    }

Proyecto de ejemplo @ code.qt.io