On mac, open system preferences, click notifications, scroll to Google Chrome, slide Allow Notifications from Google Chrome to On position
<br>


<button>Notify me!</button>
<div id=response></div>

<script>
window.addEventListener('load', loadlisten);

function loadlisten() 
{
	var button = document.getElementsByTagName('button')[0];
	button.addEventListener('click', listener);
}

function listener() 
{
  if (!('serviceWorker' in navigator)) {
    alert("serviceworker not supported");
    retunr;
  }

  if (!('PushManager' in window)) {
    alert("pushmanager not supported");
    return;
  }
  
  navigator.serviceWorker.register('./sw.js').then
  (
    function(r) 
    {
      console.log("Service worker successfully registered", r);
      return r;
    }
  ).catch
  (
    function(err) 
    {
      console.error('Unable to register service worker.', err);
    }
  );
  
	// If the user agreed to get notified
	// Let's try to send ten notifications
	/*
	if (window.Notification && Notification.permission === "granted") 
	{
		//alert("already granted");
		//var i = 0;
		// Using an interval cause some browsers (including Firefox) are blocking notifications if there are too much in a certain time.
		//var interval = window.setInterval(pop1, 1000);
		pop2();
	}
	*/
	// If the user hasn't told if they want to be notified or not
	// Note: because of Chrome, we are not sure the permission property
	// is set, therefore it's unsafe to check for the "default" value.
	
	if (window.Notification && Notification.permission !== "denied") 
	{
		alert("requesting permission, permission is " + Notification.permission);
		Notification.requestPermission(response);
	}
	// If the user refuses to get notified
	else 
	{
		// We can fallback to a regular modal alert
		alert("current is " + Notification.permission);
	}
}

function pop1() 
{
	var n = new Notification("pop", {tag: 'soManyNotification'});
	{
	  //window.clearInterval(interval);
	}
}

function pop2() 
{
  //navigator.serviceWorker.getRegistrations().then(function(registrations) { for(let registration of registrations) { registration.unregister() } })
  navigator.serviceWorker.register('https://syncagio.neocities.org/test/sw.js').then
  (
    function(r) 
    {
      console.log(r);
      navigator.serviceWorker.getRegistration().then
      (
        function(reg) 
        {
          console.log(reg);
          
          navigator.serviceWorker.ready.then
          (
            function(x)
            {
              new Notification
              //reg.showNotification
              ('Hello world!', 
                {
                  body: 'Here is a notification body!',
                  //icon: 'images/example.png',
                  //vibrate: [100, 50, 100],
                  data: 
                  {
                    dateOfArrival: Date.now(),
                    primaryKey: 1
                  }
                }
              );
            }
          );
        }
      );
    }
  );
}

function response(status) 
{
	document.getElementById("response").innerText = ("response to request is " + status);
	
	if (status === "granted") 
	{
	  //pop2();
	  subscribeUserToPush();
	  
	}
	// Otherwise, we can fallback to a regular modal alert
	else 
	{
  		alert("not granted");
	}
}

function getSWRegistration() {
    return navigator.serviceWorker.register('https://syncagio.neocities.org/test/sw.js');
}

function subscribeUserToPush() 
{
  return getSWRegistration()
  .then(function(registration) 
  {
    const subscribeOptions = 
    {
      userVisibleOnly: true,
      applicationServerKey: urlBase64ToUint8Array(
        'BFPhDAMKf9GRY_OLF5dBGu61Oj_NnzH40xMCl2DUyBuQ2zZD6C5yyXfiaYMYjI0Ev3L7SCYCFykK3irv3VY0weg'
      )
    };

    return registration.pushManager.subscribe(subscribeOptions);
  })
  .then(function(pushSubscription) 
  {
    document.getElementById("response").innerText = JSON.stringify(pushSubscription);
    pop2();
    return pushSubscription;
  });
}

function urlBase64ToUint8Array(base64String) {
    var padding = '='.repeat((4 - base64String.length % 4) % 4);
    var base64 = (base64String + padding)
        .replace(/\-/g, '+')
        .replace(/_/g, '/');

    var rawData = window.atob(base64);
    var outputArray = new Uint8Array(rawData.length);

    for (var i = 0; i < rawData.length; ++i) {
        outputArray[i] = rawData.charCodeAt(i);
    }
    return outputArray;
}

	


</script>