Exemple de notifications WebEngine

WebEngine Notifications montre comment utiliser la méthode QWebEngineProfile::setNotificationPresenter() et la classe QWebEngineNotification pour afficher une notification web HTML5 à l'utilisateur.

Exécution de l'exemple

Pour exécuter l'exemple à partir de Qt CreatorOuvrez le mode Welcome et sélectionnez l'exemple à partir de Examples. Pour plus d'informations, voir Qt Creator: Tutoriel : Construire et exécuter.

Page HTML

Dans cet exemple, nous créons une page HTML interne qui est ajoutée par le biais d'un fichier de collecte de ressources (.qrc). La page affiche des boutons pour demander des autorisations et contient le code JavaScript nécessaire pour déclencher cette demande :

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

La page contient également un bouton permettant de créer une notification. Les constructions JavaScript suivantes sont exécutées lors de l'événement "press" :

    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)
    }

Fonction principale

Dans la fonction main, nous instancions une page QWebEngineView, nous chargeons notre page HTML interne et nous configurons les rappels nécessaires à la gestion des notifications.

Demande d'autorisation de fonctionnalité

Nous utilisons ensuite l'appel QWebEnginePage::permissionRequested() pour demander à l'utilisateur l'autorisation d'afficher des notifications sur son appareil.

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

Gestion des nouvelles notifications

Nous construisons ensuite un NotificationPopup qui encapsule les données de la notification web HTML. Nous utilisons également l'appel QWebEngineProfile::setNotificationPresenter() pour définir notre gestionnaire, que nous utilisons conjointement avec notre popup pour gérer toutes les nouvelles notifications.

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

Présentation des notifications aux utilisateurs

La classe NotificationPopup de cet exemple est une simple classe basée sur QWidget qui utilise plusieurs instances QLabel pour afficher le titre, le message et l'icône de la notification.

class NotificationPopup : public QWidget
{
    Q_OBJECT

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

Présentation des notifications

Dans la méthode present, nous commençons par fermer et libérer la notification précédente, si nous en avons une, puis nous prenons possession d'une nouvelle notification en appelant la méthode std::unique_ptr::swap sur notre instance de notification interne.

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

        notification.swap(newNotification);

Ensuite, nous demandons à l'instance de notification un titre, un message et une icône en appelant QWebEngineNotification::title(), QWebEngineNotification::message(), QWebEngineNotification::icon() et nous configurons les étiquettes appropriées dans notre fenêtre contextuelle.

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

Ensuite, nous sommes prêts à afficher notre notification à l'utilisateur en appelant la méthode QWidget::show(). À cette étape, nous appelons également la méthode QWebEngineNotification::show() pour informer le code JavaScript de notre événement d'affichage.

        show();
        notification->show();

Enfin, nous mettons en place un rappel pour gérer l'événement de fermeture du côté de JavaScript en nous connectant au signal QWebEngineNotification::closed(). Nous programmons également un événement de temporisation pour fermer automatiquement notre notification active.

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

    }

Fermeture de la notification active

Nous exécutons l'étape de fermeture de la notification active, soit par temporisation, soit en gérant l'événement JavaScript. Tout d'abord, nous masquons le widget popup lui-même en appelant QWidget::hide(). Ensuite, nous notifions le code JavaScript en appelant la méthode QWebEngineNotification::close(). Enfin, nous détruisons l'objet de notification par le biais de la méthode std::unique_ptr::reset().

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

Mise en œuvre de l'interaction avec l'utilisateur

Pour mettre en œuvre l'étape de clic d'une notification, nous gérons l'interaction de la souris par l'intermédiaire de QWidget::mouseReleaseEvent(). Lors de cet événement, le code JavaScript est notifié en appelant la méthode QWebEngineNotification::click(). Ensuite, nous exécutons automatiquement l'étape de fermeture, car une notification est considérée comme entièrement gérée et n'est plus nécessaire, et peut donc être détruite.

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

Exemple de projet @ code.qt.io