Thursday, July 20, 2017

Desktop notification in browser using JavaScript

In most of the sites have today their own desktop notification system to connect user in a large scale. So how to create a desktop notification for your site. Its very simple to generate a new notification using JavaScript, you have to write hardly 2-3 lines of code. Lets create one to generate desktop notification.

To create a new notification for user you have to follow three steps.
  1. Is the browser supports the notification feature. If not show an appropriate message.
  2. Ask user to allow the notification feature to show.
  3. Create a new notification and a click event to fire.
First lets start with whether the browser is supportable to show notification. For this we will use JavaScript Notification object to do all the operation.
 
if (!Notification) {
    alert('Desktop notifications not available in your browser. Try Chromium.');
    return;
}

 And when the user has opened the site prompt user with an box, saying user to allow the site to show notification. For this use follow code block.

document.addEventListener('DOMContentLoaded', function () {
    if (Notification.permission !== "granted")
        Notification.requestPermission();
});

 Now create a button in the body & by clicking on that button a notification will be shown.

<button onclick="notifyMe()">
    Notify me!
</button>

Now in the script section add the Notify() method and write the following piece of code.

function notifyMe() {
    if (!Notification) {
        alert('Desktop notifications not available in your browser. Try Chromium.');
        return;
    }
 
    if (Notification.permission !== "granted")
        Notification.requestPermission();
    else {
        var notification = new Notification('Notification title', {
            icon: 'https://pbs.twimg.com/profile_images/495133521262825472/wxlvCGWy.jpeg',
            body: "Here is your notification!",
        });
 
        notification.onclick = function () {
            window.open("http://asp-arka.blogspot.in/");
        };
    }
}

Here are the full code.

<html>
<button onclick="notifyMe()">
    Notify me!
</button>
<script>
    // request permission on page load
    document.addEventListener('DOMContentLoaded', function () {
        if (Notification.permission !== "granted")
            Notification.requestPermission();
    });
 
    function notifyMe() {
        if (!Notification) {
            alert('Desktop notifications not available in your browser.');
            return;
        }
 
        if (Notification.permission !== "granted")
            Notification.requestPermission();
        else {
            var notification = new Notification('Notification title', {
                icon: 'https://pbs.twimg.com/profile_images/495133521262825472/wxlvCGWy.jpeg',
                body: "Here is your notification!",
            });
 
            notification.onclick = function () {
                window.open("http://asp-arka.blogspot.in/");
            };
        }
    }
</script>
</html>

Host the file in any server like IIS or Apache to run it. Direct running the file in browser won't work out. Click on the Notify button to get the notification. Change the text and image according to your requirement. 

28 comments:

  1. Purchasetheme is one kind of platform for the developers and designers. Whoever feels important can buy and sell the readymade work related to web development assets and print comprising scripts, codes, themes, banners, logos, graphics, plugins as well as mobile or desktop app source codes. Ajax Search Opencart

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. This comment has been removed by the author.

    ReplyDelete
  6. This comment has been removed by the author.

    ReplyDelete
  7. This comment has been removed by the author.

    ReplyDelete
  8. This comment has been removed by the author.

    ReplyDelete
  9. This comment has been removed by the author.

    ReplyDelete
  10. This comment has been removed by the author.

    ReplyDelete
  11. This comment has been removed by the author.

    ReplyDelete
  12. This comment has been removed by the author.

    ReplyDelete
  13. This comment has been removed by the author.

    ReplyDelete
  14. These minimal information and facts will be built coupled vikram university ba 2nd year result with numerous track record information and facts. vikram university ba 3rd year result I favor this significantly.

    ReplyDelete
  15. Thanks for sharing this information.
    Yes Done is the best online site for on demand home services, professional service providers in Jaipur, Rajasthan. We are providing top services like carpenter, cleaning, TV, and many more services at your doorstep in Jaipur, Rajasthan. For more services visit our website.

    ReplyDelete
  16. Thanks for sharing this information.
    Pheeta is the best online shopping sites for Salwar suits for women and woman Kurti online in Jaipur, Rajasthan. To shop more latest fancy and attractive dresses and Kurtas visit us at our website.

    ReplyDelete
  17. Thank you for sharing this information.


    Mediwapp is the best Online Medical Store and a leading Online Medicine store which sells different and most trusted products like Medicines, OTC-Products and other Medicine and Surgery Devices across India.

    ReplyDelete
  18. Thank you for sharing our information.

    Jewellery By Mitali Jain is the best website to buy artificial jewellery online and Jain Jewellery in Jaipur. They sell fancy and attractive products like Earrings, Rings, Necklaces, Headgears, Bracelets, Mask and Glass Chains, Bookmark Jewellery, Gift Cards and many more items like this. And also checkout our new collections Summer Luna Collection and Holy Mess Collection.

    ReplyDelete
  19. This is really amazing blog and like to share Hindustan Tradecom.

    Hindustan Tradecom is the best website where you can open your Demat Account in Jaipur, jodhpur, Bikaner, Kota, Rajasthan. We provide best services opening a Free Deamt Account. We also help you opening Demat Account in Different Banks. For other services like Equity Trading, Commodity trading, Currency Derivatives, Easy-IPOs, Mutual Funds, and many more. Please visit our website.

    ReplyDelete
  20. Thanks for sharing this information

    Shop jewellery from Best Silver Jewellery Designer and Manufacturer in Jaipur , Buy jaipuri bangles online, rajasthani silver jewellery, Latest maang tikka designs, 925 silver earring, Best designer silver pendant necklace, silver kundan jewellery, marhaba jewellery925 silver jewellery wholesale jewellery manufacturers in jaipur is SilverMountain Jaipur.

    ReplyDelete
  21. Wow, what a nice blog. I have read it and really impressed by its writing.
    Meerahini is the best site to buy Jaipur Salwar Suits Online and Hand block Kurta sets. We have straight suit sets, anarkali suit sets, kurta and plazzo sets, and Sharara Sets. We have premium clothing collection of Rang and Utsav.

    ReplyDelete
  22. Nice Blog information.
    GIEC Global is the Best Education Consultants in Melbourne, Australia and education consultant in Melbourne, Sydney, Brisbane, Perth, Adelaide,Australia.Education Consultants in Melbourne, Best Education Agent in Melbourne, Sydney, Adelaide, Perth, and Brisbane is GIEC Global. We are Melbourne Migration and Education Consultants, Education Migration Agent Melbourne, Melbourne Study Abroad, and Performance Education Melbourne

    ReplyDelete
  23. Very good info. Lucky me I discovered your site by chance (stumbleupon). I have saved it for later! Here is my web site:Sattaking

    ReplyDelete
  24. It's a very nice blog, shares a good piece of information.
    Hindustan Tradecom Pvt. Ltd. is the best website for a Best stock broker in Jaipur and share broker in Jaipur. We have services like open Equity account and open an equity bank account online. Finding Commodity Brokers in Jaipur we have the Best Commodity Brokers in Jaipur. If you are looking for buy Best Mutual Funds to buy now in Jaipur. Also, We are the leading company to open Demat Account and the best broker for Demat account. For more services Currency Derivatives, Online E-IPO, Futures & Options visit site www.htplonline.com.

    ReplyDelete

Popular Posts

Pageviews