In this article, I will show you steps to create a simple Chrome Desktop Notification looked like the image below by using JavaScript just in 100 seconds β° Let's count down!
π Repository
- You can download the source code of this article on my Github: https://github.com/richard-wynn/simple-chrome-desktop-notifications
π§ Necessary Stuffs
- Visual Studio Code with Live Server extension installed
- Google Chrome, of course π
π» It's Coding Time!
index.html
Create an index.html
file with the following content.
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="script.js"></script>
<title>Simple Chrome Desktop Notification</title>
</head>
<body>
<button id="btn-show-notification">Notify Me!</button>
</body>
</html>
script.js
Next, create a script.js
file inside the same folder with the index.html
file above:
$(document).ready(function () {
$(document).on('DOMContentLoaded', function () {
// Request desktop notifications permission on page load
if (!Notification) {
console.log('Desktop notifications are not available in your browser.');
return;
}
if (Notification.permission !== 'granted') {
Notification.requestPermission();
}
});
function showNotification() {
if (Notification.permission !== 'granted') {
Notification.requestPermission();
} else {
const options = {
body: 'Simple Chrome Desktop Notification',
dir: 'ltr',
image: 'image.jpg'
};
const notification = new Notification('Notification', options);
notification.onclick = function () {
window.open('https://www.google.com');
};
}
}
$('#btn-show-notification').on('click', showNotification);
});
It's Running Time!
In Visual Studio Code, go to View
-> Command Palette...
and type Live Server: Open with Live Server
then press Enter
, a new page will be shown:
Click on Notify Me!
and hurray, a notification appears:
Just simple as it is π Hope this will help in case you need to use desktop notifications for your website(s).
π± Keep in Touch
If you like this article, don't forget to follow and stay in touch with my latest ones in the future by following me via:
- Twitter: https://twitter.com/RichardWynn01
- Medium: https://richard-wynn.medium.com
- Github: https://github.com/richard-wynn
Top comments (3)
Thanks a lot!
Thank you Richard, as a beginner I think itβll be very helpful for me. π
You're welcome, Jair Neto π