CODEWITHSUNDEEP
csshtmlnotifications
Felipe
Felipe

Reputation: 7391

How to customize styles for browser push notification

I am creating an app using Angular 4, that should receive push notifications from time to time. I have managed to make the notification appear, but I wasn't able to customize its styles and its content.

What I am looking for is a way to change the background color of my notifications so that I can make them blink to call the user's attention.

Here is my code:

  public showNotification(title: string, text: string): Notification {
    // Check if notifications are supported
    const notificationOptions = {
      body: `<div style="color:red"><p>${text}</p></div>`,
      icon: 'assets/img/logo_onyo-simples.png',
      badge: 'assets/img/logo_onyo-simples.png',
      vibrate: [200, 100, 200]
    };

    try {

      // Throws an exception if the browser doesn't support a notification.
      const notification = new Notification(title, notificationOptions);
      notification.onclick = (e: any) => {
        window.focus();
        notification.close();
      };

      return notification;
    }
    catch (e) {
      if (e.name === 'TypeError') {
        this.raven.captureBreadcrum({
          message: 'This browser does not support notifications',
          level: 'warning',
          category: 'notification'
        });
      }
      else {
        this.raven.captureException(e);
        throw e;
      }
    }
  }

I've tried to add a test HTML tag to the notification body, but that didn't work. Is there a way to do this?

Note: the reason because I am not using Toastr notifications is because I want the user to receive my notifications even if the browser is minimized or behind another application.

Note 2: here is an example of the type of notification that I am using: https://tests.peter.sh/notification-generator/.

Upvotes: 2

Views: 3960

Answers (1)

Serg Chernata
Serg Chernata

Reputation: 12400

I believe that what you're trying to do is not possible, at least according to the spec. There are no properties nor methods for passing / setting of visual presentation.

I'm speculating here, but it could be because browser vendors want to prevent exactly the type of behavior you're trying to create. Maybe you can style a notification with good taste and design. However, this would also open the door to people creating bad, annoying and straight up predatory notifications. It would open the door to dark patterns.

Although, it's possible that this kind of stylistic flexibility will be added in the future. I just don't think so.

Upvotes: 4

Related Questions