4 files changed, 146 insertions, 0 deletions
diff --git a/examples/webenginewidgets/push-notifications/content/index.html b/examples/webenginewidgets/push-notifications/content/index.html
new file mode 100644
index 000000000..cce3055cd
--- /dev/null
+++ b/examples/webenginewidgets/push-notifications/content/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Push Notification Using Node and FCM</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <h1>Push Notification Using NodeJS and QtWebEngine</h1>
+  <div id="app">
+    <div id="ping-setup">
+      <form>
+        <div>
+          Ping Me Every [sec]:
+        </div>
+        <div class="ping-input">
+          <input type="number" name="seconds" min="0" max="3600" required="">
+        </div><button>Ping Me</button>
+      </form>
+    </div>
+    <div id="ping-clear">
+      <div id="ping-text"></div><button id="ping-clear-button">Clear</button>
+    </div>
+  </div>
+  <script src="ping.js"></script>
+</body>
+</html>
diff --git a/examples/webenginewidgets/push-notifications/content/ping.js b/examples/webenginewidgets/push-notifications/content/ping.js
new file mode 100644
index 000000000..285a57019
--- /dev/null
+++ b/examples/webenginewidgets/push-notifications/content/ping.js
@@ -0,0 +1,84 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+const publicVapidKey =
+        "BNO4fIv439RpvbReeABNlDNiiBD2Maykn7EVnwsPseH7-P5hjnzZLEfnejXVP7Zt6MFoKqKeHm4nV9BHvbgoRPg";
+
+async function setup(delay)
+{
+    console.log('>> register service worker...');
+    const register = await navigator.serviceWorker.register('/worker.js', { scope : '/' });
+    console.log('>> service worker registered...');
+
+    console.log('>> subscribe push subscription to FCM');
+    var subscription = await register.pushManager.subscribe(
+            { userVisibleOnly : true, applicationServerKey : publicVapidKey });
+    console.log('>> subscription created...');
+
+    console.log('>> subscribe to push service...');
+    await fetch('/subscribe', {
+        method : 'POST',
+        body : JSON.stringify(subscription),
+        headers : { 'content-type' : 'application/json', 'ping-time' : delay }
+    });
+    console.log('>> push subscription created...')
+}
+
+async function clear()
+{
+    const register = await navigator.serviceWorker.getRegistration();
+    var subscription = await register.pushManager.getSubscription();
+    console.log('>> unsubscribe to push service...');
+    await fetch('/unsubscribe', {
+        method : 'POST',
+        body : JSON.stringify(subscription),
+        headers : { 'content-type' : 'application/json' }
+    });
+    console.log('>> push unsubscription removed...')
+
+    console.log('>> unsubscribe push subscription to FCM');
+    await subscription.unsubscribe();
+    console.log('>> subscription removed...');
+}
+
+function displaySetup(delay = null)
+{
+    const pingSetup = document.getElementById('ping-setup');
+    const pingClear = document.getElementById('ping-clear');
+    const pingText = document.getElementById('ping-text');
+    if (delay) {
+        pingClear.style.display = 'block';
+        pingSetup.style.display = 'none';
+        pingText.innerHTML = 'Ping Me Every ' + delay + ' seconds';
+    } else {
+        pingClear.style.display = 'none';
+        pingSetup.style.display = 'block';
+        pingText.innerHTML = "";
+    }
+}
+
+function handleSetupPing(event)
+{
+    event.preventDefault();
+
+    const seconds = document.forms[0].seconds.value;
+    document.forms[0].reset();
+
+    // check for service worker support
+    if ('serviceWorker' in navigator) {
+        setup(seconds).catch(err => console.error(err));
+    }
+
+    displaySetup(seconds);
+};
+
+function handleClearPing(event)
+{
+    event.preventDefault();
+    clear();
+    displaySetup();
+};
+
+document.forms[0].addEventListener('submit', handleSetupPing);
+const clearButton = document.getElementById('ping-clear-button');
+clearButton.addEventListener('click', handleClearPing);
diff --git a/examples/webenginewidgets/push-notifications/content/style.css b/examples/webenginewidgets/push-notifications/content/style.css
new file mode 100644
index 000000000..8176462a2
--- /dev/null
+++ b/examples/webenginewidgets/push-notifications/content/style.css
@@ -0,0 +1,29 @@
+body {
+  font-family: monaco;
+  height: 100vh;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+}
+#ping-clear,
+#ping-setup {
+  font-size: 32px;
+  text-align: center;
+}
+.form-inputs{
+  margin-top: 20px;
+}
+input {
+  width: 100px;
+  height: 30px;
+}
+button {
+  font-size: 16px;
+}
+#ping-text {
+  margin-bottom: 30px;
+}
+#ping-clear {
+  display: none;
+}
diff --git a/examples/webenginewidgets/push-notifications/content/worker.js b/examples/webenginewidgets/push-notifications/content/worker.js
new file mode 100644
index 000000000..ed660a6e9
--- /dev/null
+++ b/examples/webenginewidgets/push-notifications/content/worker.js
@@ -0,0 +1,7 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
+
+self.addEventListener('push', event => {
+    const data = event.data.json();
+    self.registration.showNotification(data.title, { body : data.text });
+});