Display notification only if tab closed

Author: agmo

client/index.js

@@ -2,8 +2,13 @@ const client = (() => {
  let serviceWorkerRegObj;
  const notificationButton = document.getElementById('btn-notify');
  const pushButton = document.getElementById('btn-push');
+ const notificationContainer = document.getElementById('push-notification');
  let isUserSubscribed = false;
 
+ const notifyInApp = (message) => {
+ notificationContainer.innerText = message;
+ };
+
  const showNotificationButton = () => {
  notificationButton.style.display = 'inline-block';
  notificationButton.addEventListener('click', showNotification);
@@ -66,7 +71,9 @@ const client = (() => {
  } else {
  enablePushNotificationButton();
  }
- })
+ });
+
+ navigator.serviceWorker.addEventListener('message', event => notifyInApp(event.data))
  });
  };
 

index.html

@@ -15,6 +15,7 @@ <h1>Web Push Notifications</h1>
  <button id="btn-notify" class="notification-btn">SEND NOTIFICATION</button>
  <button id="btn-push" class="push-btn">ENABLE PUSH NOTIFICATIONS</button>
 
+ <div id="push-notification"></div>
 <script src="client/index.js"></script>
 </main>
 </body>

service-worker.js

@@ -16,13 +16,26 @@ self.addEventListener('notificationclick', event => {
  .then(notifications => notifications.forEach(notification => notification.close()));
 });
 
+let counter = 0;
 self.addEventListener('push', event => {
  const data = event.data.text();
  const options = {
  body: data
  };
 
  event.waitUntil(
- self.registration.showNotification('Server Push', options)
+ self.clients.matchAll()
+ .then(clientList => {
+ console.log(clientList);
+ if (isTabOutOfFocus(clientList)) {
+ self.registration.showNotification('Server Push', options);
+ } else {
+ clientList[0].postMessage(`Server Push #${counter++}`);
+ }
+ })
  );
 });
+
+function isTabOutOfFocus(clients) {
+ return clients.length === 0;
+}