JSFiddle - React, Tailwind, and code Playground

by Imri Paloja

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">

JavaScript

function registerServiceWorker() {
    return navigator.serviceWorker.register('service-worker.js')
    .then(function(registration) {
      console.log('Service worker successfully registered.');
      return registration;
    })
    .catch(function(err) {
      console.error('Unable to register service worker.', err);
    });
  }

registerServiceWorker();

if ('actions' in Notification.prototype) {
	alert('buttons are supported.');
} else {
  alert('Action buttons are NOT supported.');
}



  // Requesting permissions
	Notification.requestPermission();
    
	const title = 'Limegroen - tickets';
	const options = {
	body: 'Ticket aangemaakt.\n make een html5 notificatie melding',
	icon: 'https://www.limegroen.com/favicon.ico',
	badge: 'https://www.limegroen.com/images/layout/logo-big.png',
  
  // The image option can be used to display a larger image to the user. This is particularly useful to display a preview image to the user.
	image: '/images/demos/unsplash-farzad-nazifi-1600x1100.jpg'
};
registration.showNotification(title, options);