WebEngine Benachrichtigungen Beispiel

WebEngine Notifications demonstriert die Verwendung der Methode QWebEngineProfile::setNotificationPresenter() und der Klasse QWebEngineNotification, um dem Benutzer eine HTML5-Webbenachrichtigung zu zeigen.

Ausführen des Beispiels

Um das Beispiel auszuführen Qt Creatorauszuführen, öffnen Sie den Modus Welcome und wählen Sie das Beispiel aus Examples. Weitere Informationen finden Sie unter Erstellen und Ausführen eines Beispiels.

HTML-Seite

In diesem Beispiel wird eine interne HTML-Seite erstellt, die über eine Ressourcensammlungsdatei (.qrc) hinzugefügt wird. Die Seite zeigt Schaltflächen für die Anforderung von Berechtigungen an und enthält den erforderlichen JavaScript-Code, um diese Anforderung auszulösen:

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

Die Seite enthält auch eine Schaltfläche zum Erstellen einer Benachrichtigung. Die folgenden JavaScript-Konstruktionen werden bei dem Ereignis "press" ausgeführt:

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

Hauptfunktion

In der Funktion main instanziieren wir eine QWebEngineView, laden unsere interne HTML-Seite und richten die erforderlichen Callbacks für die Behandlung von Benachrichtigungen ein.

Abfrage von Funktionsberechtigungen

Anschließend verwenden wir den Aufruf QWebEnginePage::permissionRequested(), um die Erlaubnis des Benutzers anzufordern, Benachrichtigungen auf seinem Gerät anzuzeigen.

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

Behandlung neuer Benachrichtigungen

Anschließend konstruieren wir eine NotificationPopup, die die Daten der HTML-Webbenachrichtigung kapselt. Außerdem verwenden wir den Aufruf QWebEngineProfile::setNotificationPresenter(), um unseren Handler zu setzen, den wir in Verbindung mit unserem popup verwenden, um alle neuen Benachrichtigungen zu verarbeiten.

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

Darstellung von Benachrichtigungen für Benutzer

Die Klasse NotificationPopup in diesem Beispiel ist eine einfache QWidget-basierte Klasse, die mehrere QLabel -Instanzen für die Anzeige des Titels, der Nachricht und des Symbols der Benachrichtigung verwendet.

class NotificationPopup : public QWidget
{
    Q_OBJECT

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

Darstellung von Benachrichtigungen

In der Methode present wird zunächst die vorherige Benachrichtigung geschlossen und freigegeben, falls vorhanden, und dann eine neue Benachrichtigung übernommen, indem die Methode std::unique_ptr::swap für unsere interne Benachrichtigungsinstanz aufgerufen wird.

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

        notification.swap(newNotification);

Dann fragen wir die Benachrichtigungsinstanz nach einem Titel, einer Nachricht und einem Symbol ab, indem wir QWebEngineNotification::title(), QWebEngineNotification::message(), QWebEngineNotification::icon() aufrufen und die entsprechenden Beschriftungen in unserem Popup einrichten.

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

Danach sind wir bereit, dem Benutzer unsere Benachrichtigung anzuzeigen, indem wir die Methode QWidget::show() aufrufen. In diesem Schritt rufen wir auch die Methode QWebEngineNotification::show() auf, um den Code JavaScript über unser Show-Ereignis zu informieren.

        show();
        notification->show();

Schließlich richten wir einen Rückruf ein, um das Schließereignis auf der Seite JavaScript zu behandeln, indem wir eine Verbindung mit dem Signal QWebEngineNotification::closed() herstellen. Wir planen auch ein Timer-Ereignis, um unsere aktive Benachrichtigung automatisch zu schließen.

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

    }

Aktive Benachrichtigung schließen

Wir führen den Schritt zum Schließen der aktiven Benachrichtigung entweder durch eine Zeitüberschreitung oder durch die Verarbeitung des Ereignisses JavaScript aus. Zuerst blenden wir das Popup-Widget selbst aus, indem wir QWidget::hide() aufrufen. Dann benachrichtigen wir den Code JavaScript, indem wir die Methode QWebEngineNotification::close() aufrufen. Schließlich zerstören wir das Benachrichtigungsobjekt mit der Methode std::unique_ptr::reset().

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

Implementierung der Benutzerinteraktion

Um den Klick-Schritt für eine Benachrichtigung zu implementieren, wird die Mausinteraktion über QWidget::mouseReleaseEvent() abgewickelt. Bei diesem Ereignis wird der Code JavaScript durch Aufruf der Methode QWebEngineNotification::click() benachrichtigt. Anschließend führen wir automatisch den Schritt "Schließen" aus, da eine Benachrichtigung als vollständig bearbeitet und nicht mehr benötigt gilt und daher zerstört werden kann.

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

Beispielprojekt @ code.qt.io