Created
May 20, 2019 08:51
-
-
Save steffiland/950674607faabe2cc0bc9e5fad62da21 to your computer and use it in GitHub Desktop.
Push Notifications Minimal example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment