steffiland/push.html

## push.html
 <!DOCTYPE html>
 <html>

 <head>
     <title>Using Push.js to Display Web Browser Notifications</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/push.js/1.0.9/push.min.js"></script>

 </head>

 <body>
     <h1>Using Push.js to Display Web Browser Notifications</h1>
     <p>This is a demo showcasing the use of web notifications using the open-source <a
             href="https://github.com/Nickersoft/push.js" target="_blank">Push.js</a> library. See <a
             href="https://sabe.io/tutorials/using-push-js-display-web-browser-notifications" target="_blank">here</a>
             for the tutorial.
             For a minimal webserver, you can run this python command (with optional portnumber and optional interface
             to bind to):
             <pre>python3 -m http.server [8000] [--bind 127.0.0.1]</pre>

     </p>
     <button class="request-button">Request permissions</button>
     <button class="show-button">Show notification</button>

     <script>
         var requestButton = document.querySelector(".request-button");
         var showButton = document.querySelector(".show-button");

         function onGranted() {
             requestButton.style.background = "green";
         }

         function onDenied() {
             requestButton.style.background = "red";
         }

         function requestPerms() {
             console.log("request permissions");
             requestButton.style.background = "orange";

             Push.Permission.request(onGranted, onDenied);
         }

         function sendPush() {
             console.log("send push notification");
             requestButton.style.background = "lightblue";
             Push.create("Hello World!", {
                 body: "This is a web notification!",
                 // icon: "/icon.png",
                 timeout: 5000,
                 onClick: function () {
                     console.log(this);
                 }
             });
         }

         requestButton.onclick = function () {
             requestPerms();
         }

         showButton.onclick = function () {
             sendPush();
         };
     </script>
 </body>

 </html>
	<!DOCTYPE html>
	<html>

	<head>
	<title>Using Push.js to Display Web Browser Notifications</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/push.js/1.0.9/push.min.js"></script>

	</head>

	<body>
	<h1>Using Push.js to Display Web Browser Notifications</h1>
	<p>This is a demo showcasing the use of web notifications using the open-source <a
	href="https://github.com/Nickersoft/push.js" target="_blank">Push.js</a> library. See <a
	href="https://sabe.io/tutorials/using-push-js-display-web-browser-notifications" target="_blank">here</a>
	for the tutorial.
	For a minimal webserver, you can run this python command (with optional portnumber and optional interface
	to bind to):
	<pre>python3 -m http.server [8000] [--bind 127.0.0.1]</pre>

	</p>
	<button class="request-button">Request permissions</button>
	<button class="show-button">Show notification</button>

	<script>
	var requestButton = document.querySelector(".request-button");
	var showButton = document.querySelector(".show-button");

	function onGranted() {
	requestButton.style.background = "green";
	}

	function onDenied() {
	requestButton.style.background = "red";
	}

	function requestPerms() {
	console.log("request permissions");
	requestButton.style.background = "orange";

	Push.Permission.request(onGranted, onDenied);
	}

	function sendPush() {
	console.log("send push notification");
	requestButton.style.background = "lightblue";
	Push.create("Hello World!", {
	body: "This is a web notification!",
	// icon: "/icon.png",
	timeout: 5000,
	onClick: function () {
	console.log(this);
	}
	});
	}

	requestButton.onclick = function () {
	requestPerms();
	}

	showButton.onclick = function () {
	sendPush();
	};
	</script>
	</body>

	</html>