How to send notifications in JavaScript(in less than 10 lines of code)
source link: https://dev.to/freebeliever/how-to-send-notifications-in-javascriptin-less-than-10-lines-of-code-3g9j
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Disclaimer: What the title means by 'in less than 10 lines of code' is referring to the number of lines of JavaScript code.
You know those annoying notifications popping up at the least wanted time? Today, I'll be teaching you how to make a desktop/mobile responsive push notification with less than 10 lines of Javascript.
Step 1 (Setting up)
Open up Visual studio code, if you have not installed it yet, you can install it below:
https://code.visualstudio.com/
After that, open a blank folder(file>open folder), and in that folder, add a file called index.html.
Step 2 (Coding)
Copy this code into your html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Notification Test</title>
</head>
<body>
<button id="btn">Test</button>
<script>
document.getElementById('btn').onclick = notify
function notify(){
Notification.requestPermission().then(permission => {
if (permission === "granted"){
new Notification("Test Notification", {
body: "More Text",
})
}
})
}
</script>
</body>
</html>
Step 3 (Running the code)
Select the extension button from the sidebar, then search live server.
Select the first option and install it. Now open your index.html file, right click it, and select open with live server. Remember to enable notifications by clicking the lock button in your browser.
Conclusion
I hope you enjoyed this tutorial!
This post was posted first on my personal blog:
https://freetechnologyhelp.com/how-to-send-notifications-in-javascriptin-less-than-10-lines-of-code/
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK