vldvel

const notificationProps = {
  title: 'I\'m notification',
  body: 'Here is my desription',
  icon: 'https://avatars1.githubusercontent.com/u/22643415',
  vibrate: [50, 100, 150]
}

const myNotification = new Notification(notificationProps.title, notificationProps);

console.log(myNotification.title); // 'I\'m notification'

vldvel

function notifyClicked = () => {
  console.log('notify has been clicked');
}

Notification.onclick = notifyClicked; // won't work
Notification.prototype.onclick = notifyClicked; // won't work

const notification = Notification('Notificated!');

notification.__proto__.onclick = notifyClicked; // won't work

vldvel

Notification.requestPermission();

vldvel

const notification = new Notification('Hello world!');

setTimeout(() => {
  notification.close();
}, 600);

vldvel

function createNotification () {
  // first let's check browser support
  if (!('Notification' in window)) {
    throw new Error('Browser doesn\'t support notifications');
  }
  // now let's look whether permission is already granted or not
  switch (Notification.permission) {
    case 'granted': {
      return innerCreateNotification;
    }

vldvel

const offsetX = 10; // horizontal distance - any number
const offsetY = 10; // vertical distance - any number
const blurRadius = 20; // shadow blur - positive number - default = 0
const spreadRadius = 40; // shadow size - any number - deafult = 0
const color = 'rgba(255, 255, 199, 0.7)'; // color - rgb/rgba/hsl/hsla

// basic options
element0.style.boxShadow = `${offsetX}px ${offsetY}px ${color}`;

// full options

vldvel

// target element that we will observe
const target = document.body;

// config object
const config = {
  attributes: true,
  attributeOldValue: true,
  characterData: true,
  characterDataOldValue: true,
  childList: true,

vldvel

// by default all false
// you can pick as many as you want, but at least one of - attributes, characterData, or childList
const observerConfig = {
  
  attributes: true, // attribute changes will be observed | on add/remove/change attributes
  attributeOldValue: true, // will show oldValue of attribute | on add/remove/change attributes | default: null
  
  characterData: true, // data changes will be observed | on add/remove/change characterData
  characterDataOldValue: true, // will show OldValue of characterData | on add/remove/change characterData | default: null
  

vldvel

function subscriber(mutations) {
  
  console.log(mutations);// [...]
  console.log(mutations.constructor);// Array
  
  mutations.forEach((mutation) => {
    console.log(mutation); // {...}
    console.log(mutation.constructor); // MutationRecord
  });
  

vldvel

// create subscriber
function subscriber (mutations) {
  mutations.forEach((mutation) => {
    console.log(mutation);
  });
}

// create observer
const observer = new MutationObserver(subscriber);