An Interest In:
Web News this Week
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
- March 26, 2024
Some of Our Sources
- TutsPlus - Code
- Web Designer Wall
- Team Treehouse
- Spoon Graphics
- Six Revisions
- Vandelay Design
- FanExtra - PSD
- 24 Ways
- Android Dissected
- Hashedout
Help Webnuz
Referal links:
Create Chrome Desktop Notfications with JavaScript in 100 seconds
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
Original Link: https://dev.to/richardwynn/create-chrome-desktop-notfications-with-javascript-in-100-seconds-1i57
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To