How to customize "Notification Web API" in Qt?

Question

I am creating a simple browser using Qtwebkit and added in it the "support" for Notification Web API using the QWebPage::setFeaturePermission.

An example:

function notifyMe() {
    if (Notification.permission === "granted") {
        var notification = new Notification("Hi there!");
    } else if (Notification.permission !== "denied") {
        Notification.requestPermission(function(permission) {
            if (permission === "granted") {
                var notification = new Notification("Hi there!");
            }
        });
    }
}

<button onclick="notifyMe();">Notify me</button>

Code:

QObject::connect(page,
    SIGNAL(featurePermissionRequested(QWebFrame*, QWebPage::Feature)), this,
    SLOT(featurePermissionRequested(QWebFrame*,QWebPage::Feature))
);

...

void Form::featurePermissionRequested(QWebFrame* frame, QWebPage::Feature feature) {
    switch (feature) {
        case QWebPage::Notifications:
            qDebug() << "Notification";
            page->setFeaturePermission(frame, feature, QWebPage::PermissionGrantedByUser);
        break;
        case QWebPage::Geolocation:
            qDebug() << "GEO";
        break;
        default:
            qDebug() << "Unknown feature";
    }
}

Whenever I click on the "Notify me" button the following message appears on the Desktop:

That is to say it works perfectly, but I wonder if it is possible to "customize" the "Notifications" in Qt?

In other words, I would like them to be similar to Googlechrome or Firefox, something like this:

Answer 1

To customize the Notifications Web API in the QtWebkit will be necessary to use the "Webkit plugins", ie create a plugin and put in the directory qtdir/plugins/webkit.

Note: To create the plugins you will need to use the "header" <QtWebKit/QWebKitPlatformPlugin>

Creating a Webkit plugin:

• Create a project in Qtcreator

• In the archive .pro (example src.pro) add this:

  TARGET = $$qtLibraryTarget(meupluginwebkit)
  TEMPLATE = lib
  CONFIG += plugin
  
  HEADERS += $$[QT_INSTALL_HEADERS]/QtWebKit/qwebkitplatformplugin.h \
      meupluginwebkit.h
  
  SOURCES += \
      meupluginwebkit.cpp
  
  DESTDIR = $$PWD/bin-plugin
  OBJECTS_DIR = $$PWD/build-plugin
  MOC_DIR = $$PWD/build-plugin
  RCC_DIR = $$PWD/build-plugin
  UI_DIR = $$PWD/build-plugin
  

• Create the meupluginwebkit. h file in the project folder

  #ifndef MEUPLUGINWEBKIT_H
  #define MEUPLUGINWEBKIT_H
  
  #include <QtWebKit/QWebKitPlatformPlugin>
  
  class meupluginwebkit : public QObject, public QWebKitPlatformPlugin
  {
      Q_OBJECT
      Q_INTERFACES(QWebKitPlatformPlugin)
  
  #if QT_VERSION >= 0x050000
      Q_PLUGIN_METADATA(IID "org.qtwebkit.QtWebKit.QtWebPlugin")
  #endif
  
  public:
      explicit meupluginwebkit();
      ~meupluginwebkit();
  
      bool supportsExtension(Extension ext) const;
      QObject* createExtension(Extension ext) const;
  };
  
  #endif // MEUPLUGINWEBKIT_H
  

• Create the meupluginwebkit.cpp file in the project folder

  #include "meupluginwebkit.h"
  #include "notification/notification.h"
  
  meupluginwebkit::meupluginwebkit()
  {
  }
  
  meupluginwebkit::~meupluginwebkit()
  {
  }
  
  bool meupluginwebkit::supportsExtension(Extension ext) const
  {
      return ext == Notifications;
  }
  
  QObject* meupluginwebkit::createExtension(Extension ext) const
  {
      switch (ext) {
          case Notifications:
              return new Notification();
  
          default:
              return 0;
      }
  }
  
  //Para QT-4.8
  #if QT_VERSION < 0x050000
  Q_EXPORT_PLUGIN2(webkitplugin, meupluginwebkit);
  #endif
  

• Create a folder within the project folder called notification

• In the notification folder add add the files:

  notification. h

  #ifndef NOTIFICATION_H
  #define NOTIFICATION_H
  
  #include <QtWebKit/QWebKitPlatformPlugin>
  
  class Notification : public QWebNotificationPresenter
  {
      Q_OBJECT
  
  public:
      explicit Notification();
      ~Notification();
  
      void showNotification(const QWebNotificationData* data);
  
  signals:
      void notificationClosed();
      void notificationClicked();
  };
  
  #endif // NOTIFICATION_H
  

  notification cpp.

  #include "notification.h"
  #include <QDebug>
  
  Notification::Notification() : QWebNotificationPresenter()
  {
      qDebug() << "Create: Notification";
  }
  
  Notification::~Notification()
  {
      qDebug() << "Delete: this (Notification)";
  }
  
  void Notification::showNotification(const QWebNotificationData* data)
  {
      qDebug() << "titulo:" << data->title();
      qDebug() << "icone:" << data->iconUrl();
      qDebug() << "mensagem:" << data->message();
      qDebug() << "pagina que chamou a notificação:" << data->openerPageUrl();
  }
  

In the example I used qDebug just to understand how to capture the data, to create your custom notification, you will probably have to use QWidget

• Create the file in the notification folder notification.pri:

  QT += network
  
  HEADERS += \
      $$PWD/notification.h
  
  SOURCES += \
      $$PWD/notification.cpp
  

• Include the notification.pri in the src.pro:

  include($$PWD/notification/notification.pri)
  

Compiling the src.pro:

• Open the project src.pro in Qtcreator (if not open)
• Click the button Build (the hammer design, or use Ctrl+B) - Note: Do not click the "Run" button (the green "play" button design), do not use Ctrl+R)
• Close the project src.pro
• Open the folder where the file is src.pro
• Open the folder bin-plugin
• Copy the file meupluginwebkit.dll for QtDir/plugins/webkit/meupluginwebkit.dll (exex with mingw: C:/qt/qt5.4/mingw/plugin/webkit/meupluginwebkit.dll)
• If the Webkit folder does not exist, then create it.
• Open your project you’re using QWebView and test the Javascript you use Notification Web API.

When you run the project using the QWebView, it will automatically load the dll of the briefcase webkit, therefore no other configuration will be required and this will replace the standard notification system of Qtwebkit (which in the case of Windows uses the SystemTrayIcon) for his widget customized.