Keytv
Blockchain Consensus Architect
2
MONTHS
2 2 MONTHS OF SERVICE
LEVEL 1
300 XP
Introduction
In this tutorial, I will teach you how to create a Desktop Notification using JavaScript Notification API. This tutorial aims to help IT/CS students or beginners learn some ways and techniques for developing web applications. Here, sample source code and snippets will be provided that demonstrates how to use JS Notification API and how to apply it to your own site or web application.
What is a Desktop Notification?
A Desktop Notification is a popup notification window on your desktop that notifies your software or application end-users. It contains data or content about the site or software notification which commonly includes the site logo, image banner, title, and description. Desktop notification helps your application or site to alert your end-users even if the browser is minimized.
What is a JavaScript Notification API?
Notification API is JavaScript API for displaying notifications to end-users. These can be seen even after the user has changed tabs or switched to another app because they are outside the top-level browsing context viewport. The API is intended to work with current notification systems on various platforms.
How to enable Notification in your browser?
The JavaScript Notification API provides the developer with a simple script for asking end-users to allow the site to use the browser's or system's notification feature to alert or notify them. To ask the end-user, you can use the Notification.requestPermission() method. Here's an example snippet for using requestPermission() method of Notification API.
Note: The Notification API is not supported by some other browsers or platforms. to learn more about this API compatibility. Visit https://developer.mozilla.org/en-US/docs/Web/API/notification#browser_compatibility
Example
Here is an example application that demonstrates the usage of Notification API.
Site Page Interface
The following script uses Bootstrap Framework CDN which means an internet connection is required to run the script with the right design on your local machine.
Main JS Script
The following script is a JavaScript file that contains the scripts that request permission to end-user for using notification and triggers the sample notifications.
Sample Snapshots
Here are the snapshots of some results of the example application.
Application Main Page
Sample Notification
Sample Notification with Image
DEMO VIDEO
There you have it! You can now test the sample application that demonstrates the usage of JS Notification API. You can also download the sample application source code on this website for free. The download button is located below this article. Feel free to download and modify it to do some experiments using the said API.
That's the end of this tutorial. I hope this JavaScript Notification API Tutorial helps you with what you are looking for and that you'll find this useful for your current and future web application projects.
Explore more on this website for more Tutorials and Free Source Codes.
Download
In this tutorial, I will teach you how to create a Desktop Notification using JavaScript Notification API. This tutorial aims to help IT/CS students or beginners learn some ways and techniques for developing web applications. Here, sample source code and snippets will be provided that demonstrates how to use JS Notification API and how to apply it to your own site or web application.
What is a Desktop Notification?
A Desktop Notification is a popup notification window on your desktop that notifies your software or application end-users. It contains data or content about the site or software notification which commonly includes the site logo, image banner, title, and description. Desktop notification helps your application or site to alert your end-users even if the browser is minimized.
What is a JavaScript Notification API?
Notification API is JavaScript API for displaying notifications to end-users. These can be seen even after the user has changed tabs or switched to another app because they are outside the top-level browsing context viewport. The API is intended to work with current notification systems on various platforms.
How to enable Notification in your browser?
The JavaScript Notification API provides the developer with a simple script for asking end-users to allow the site to use the browser's or system's notification feature to alert or notify them. To ask the end-user, you can use the Notification.requestPermission() method. Here's an example snippet for using requestPermission() method of Notification API.
- Notification.requestPermission
(
)
.then
(
(
permission)
=>
{
- if
(
permission ===
'granted'
)
{
- alert(
"Notification Permission is Granted"
)
- }
else
if
(
permission ===
'denied'
)
{
- alert(
"Notification Permission is Denied"
)
- }
- }
)
Note: The Notification API is not supported by some other browsers or platforms. to learn more about this API compatibility. Visit https://developer.mozilla.org/en-US/docs/Web/API/notification#browser_compatibility
Example
Here is an example application that demonstrates the usage of Notification API.
Site Page Interface
The following script uses Bootstrap Framework CDN which means an internet connection is required to run the script with the right design on your local machine.
- <!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
>
Desktop Notification Demo</
title
>
- <link
rel
=
"stylesheet"
href
=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity=
"sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
crossorigin=
"anonymous"
>
- <script
src
=
"https://code.jquery.com/jquery-3.6.1.min.js"
integrity=
"sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
crossorigin=
"anonymous"
></
script
>
- <script
src
=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity=
"sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk"
crossorigin=
"anonymous"
></
script
>
- <style
>
- html, body{
- min-height:calc(100%);
- width: calc(100%);
- }
- body{
- min-height: 100vh;
- width: 100vw;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- }
- </
style
>
- </
head
>
- <body
class
=
"bg-light bg-gradient"
>
- <div
class
=
"container w-100"
>
- <h1
class
=
"text-center fw-bolder my-4"
>
Desktop Notification using JavaScript Notification API</
h1
>
- <div
class
=
"d-flex justify-content-center"
>
- <hr
class
=
"col-4"
>
- </
div
>
- <div
class
=
"card rounded-0 shadow col-lg-5 col-md-7 col-sm-12 mx-auto"
>
- <div
class
=
"card-body"
>
- <div
class
=
"container-fluid"
>
- <p
>
This is a sample application that demonstrates the JavaScript Notification API.</
p
>
- <p
class
=
"text-muted"
>
Sample Code of using JS Notification API</
p
>
- <pre
class
=
"text-bg-dark"
>
- <code
>
- if(!("Notification" in window)){
- alert("Your current browser does not support desktop notification!");
- console.error("Your current browser does not support desktop notification!");
- }else{
- console.log(Notification.permission)
- if(Notification.permission !== 'granted' && Notification.permission !== 'denied'){
- Notification.requestPermission().then((permission)=>{
- if(permission === 'granted'){
- alert("Notification Permission is Granted")
- }else if(permission === 'denied'){
- alert("Notification Permission is Denied")
- }
- location.reload()
- })
- }
- }
- </code>
- </pre>
- <div class="d-grid gap-2">
- <button class="btn btn-sm btn-primary rounded-0" type="button" id="notif1">Sample Notification #1</button>
- <button class="btn btn-sm btn-warning rounded-0" type="button" id="notif2">Sample Notification #2</button>
- <button class="btn btn-sm btn-info rounded-0" type="button" id="notif3">Sample Notification #3 w/ Image</button>
- </div>
- </div>
- </div>
- </div>
- </div>
- </body>
- <script src="./notification.js"></script>
- </html>
Main JS Script
The following script is a JavaScript file that contains the scripts that request permission to end-user for using notification and triggers the sample notifications.
- $(
document)
.ready
(
function
(
)
{
- function
ask_permission(
)
{
- if
(
!
(
"Notification"
in
window)
)
{
- alert(
"Your current browser does not support desktop notification!"
)
;
- console.error
(
"Your current browser does not support desktop notification!"
)
;
- }
else
{
- console.log
(
Notification.permission
)
- if
(
Notification.permission
!==
'granted'
&&
Notification.permission
!==
'denied'
)
{
- Notification.requestPermission
(
)
.then
(
(
permission)
=>
{
- if
(
permission ===
'granted'
)
{
- alert(
"Notification Permission is Granted"
)
- }
else
if
(
permission ===
'denied'
)
{
- alert(
"Notification Permission is Denied"
)
- }
- location.reload
(
)
- }
)
- }
- }
- }
- ask_permission(
)
- $(
'#notif1'
)
.click
(
function
(
)
{
- if
(
Notification.permission
===
'default'
)
{
- ask_permission(
)
- }
else
if
(
Notification.permission
===
'granted'
)
{
- var
notification =
new
Notification(
"Sample Notification #1"
,
{
- body:
"This is a sample notification content or description 101."
,
- icon:
'http://localhost/js_notification/test-icon.png'
- }
)
- notification.onclick
=
(
event)
=>
{
- event.preventDefault
(
)
- window.open
(
"https://sourcecodester.com"
)
- }
- }
else
{
- alert(
"Notification Permission is not granted."
)
- }
- }
)
- $(
'#notif2'
)
.click
(
function
(
)
{
- if
(
Notification.permission
===
'default'
)
{
- ask_permission(
)
- }
else
if
(
Notification.permission
===
'granted'
)
{
- var
notification =
new
Notification(
"JavaScript Tutorials"
,
{
- body:
"Here are some tutorials of using JavaScript for IT/CS Students or beginners."
,
- icon:
'http://localhost/js_notification/test-icon.png'
- }
)
- notification.onclick
=
(
event)
=>
{
- event.preventDefault
(
)
- window.open
(
"https://www.sourcecodester.com/tutorial/javascript"
)
- }
- }
else
{
- alert(
"Notification Permission is not granted."
)
- }
- }
)
- $(
'#notif3'
)
.click
(
function
(
)
{
- if
(
Notification.permission
===
'default'
)
{
- ask_permission(
)
- }
else
if
(
Notification.permission
===
'granted'
)
{
- var
notification =
new
Notification(
"JavaScript Tutorials"
,
{
- body:
"This mini-project is entitled Basketball Scoreboard Application. It is a web application that simulates the scoreboard of a basketball game. It has a simple and dark user interface, easy-to-read fonts, and uses Bootstrap Framework."
,
- icon:
'http://localhost/js_notification/test-icon.png'
,
- image:
'https://www.sourcecodester.com/site...images/oretnom23/JS-scoreboard-basketball.jpg'
- }
)
- notification.onclick
=
(
event)
=>
{
- event.preventDefault
(
)
- window.open
(
"https://www.sourcecodester.com/java...-using-javascript-and-jquery-free-source-code"
)
- }
- }
else
{
- alert(
"Notification Permission is not granted."
)
- }
- }
)
- }
)
Sample Snapshots
Here are the snapshots of some results of the example application.
Application Main Page
Sample Notification
Sample Notification with Image
DEMO VIDEO
There you have it! You can now test the sample application that demonstrates the usage of JS Notification API. You can also download the sample application source code on this website for free. The download button is located below this article. Feel free to download and modify it to do some experiments using the said API.
That's the end of this tutorial. I hope this JavaScript Notification API Tutorial helps you with what you are looking for and that you'll find this useful for your current and future web application projects.
Explore more on this website for more Tutorials and Free Source Codes.
Download
You must upgrade your account or reply in the thread to view hidden text.