Web push notifications. What is it and why? HTML5 Notifications is simple: make notifications in one line, like in GMail Web push notifications

The truth of life is this:

It's really hard to get traffic to a website.

But you know what's even worse?

90% of visitors who visit your site will never return.

Exclusive Bonus: Click here to download a checklist for creating magnetic texts. Articles written according to this checklist will hold the reader's attention like a magnet ( click to download).

It's a shame, of course ... You spend incredible energy on its development, but the most valuable asset - visitors, forget about you on the same day they found out.

But don't despair, there is a solution:

Install on your site browser push notifications.

Here's the point:

Push notifications for the site allow you to be in touch with your visitors.

On some blogs, the introduction of push notifications increased repeat visits by several times.

And simply, it is a good alternative to email newsletters.

In this article you will learn:

• What are the benefits of push notifications
• Is this relatively new technology worth it?
• List of the best push notification services
• How to connect push`s to your site

But first, a little example...

Extra is one of the largest retailers in the Middle East.

With the help of push notifications, they were able to increase sales to mobile users by 2 times:

If you think that this is all - you are deeply mistaken.

In addition, the share of repeat purchases increased by 4 times (!!!).

As a result, Extra's marketers recognized push notifications as the most effective customer retention tool.

What are push notifications for a website?

Still not sure what push notifications are for a website?

Everything is very simple:

When you visit a web resource, you may see the following pop-up window:

Example of a request to receive push notifications

If the user agrees, you can send notifications about new articles, new products, and more.

Messages appear in the right corner of the screen. In this case, the browser can be minimized or even closed.

Push notification example:

Browsers that support push notifications

Safari was the first to support push notification technology in the browser. Then, in April 2015, it was implemented in Chrome version 42.

And finally, in early 2016, push notifications began to be supported in the Firefox browser version 44.

Already at the moment over 75% of all browsers support sending push notifications.

Why users should subscribe to push notifications

First, let's touch on the benefits that users get when they subscribe to push notifications.

1. Convenience First

What you should understand as two and two:

People buy from those sites that offer the best service. The same goes for reader loyalty.

But how to quickly and easily make the site user-friendly?

The answer is obvious:

With push notifications.

Let's say I subscribed to the regular updates of your site...

I will often have to open my mailbox in anticipation of an email from you.

In the case of push notifications, everything is much simpler.

OneSignal

After that, the OneSignal Push section will appear in the left column of your admin area.

The subsequent setup is fully described in steps, but in English. Therefore, I will briefly explain all the necessary steps.

You will see a window in which you need to go to the Configuration section:

Everything needs to be done as shown in the screenshots and as a result you will receive a project number and an API key.

Enter the project number in the Google Project Number field in the Configuration section. You need to save the API key (you will still need it).

In the same place, specify the API key from the Google project and the presence of an SSL certificate on your site.

If your site is at http, you don't change anything. If https, then check the corresponding checkbox.

Why is this needed?

The fact is that push notifications are only supported on https sites. However, the OneSignal service solves the problem by creating a subdomain for you.

You can use your website address as a subdomain. For example, instead of site - I did site4business.onesignal.com

The Modify Site subsection describes the types of implementation of push notifications. In the Safari Push subsection, everything is similar to the previous steps.

Finally, you can change the location of the subscribe button and its text in the Configuration section.

Keep in mind that for http, subscription to notifications is available only with the help of a button. You can freely change its design.

And pop-up windows are available only for https sites.

pushcrew

First, install the PushCrew plugin.

After that, create an account on the service website.

Finally, in the Customize for desktop section, you can customize the appearance of the pop-ups.

Here is the full list of services, providing the ability to implement push notifications:

When visiting new sites, a small window sometimes appears in the upper left corner of the browser, asking for permission to deliver certain notifications to you.

If the user approved receiving such notifications once, later in the task area of ​​the computer or mobile device, he will periodically observe the appearance of small windows with a message that new publications have appeared on these sites.

These are the so-called push notifications, they are also web-push - a modern tool for Internet marketers. And the most convenient means of informing users who want to keep abreast of events of interest to them.

What are push notifications?

Push notifications are short pop-up notifications that appear on the screen of a regular computer or mobile phone and inform about important events and updates.

When you click on a push notification that a user has received, site news immediately opens in the window, and users can be among the first to get acquainted with the information that has just been posted to the network. And sometimes it is important to be among the first users who have useful information.

Rice. 1. What Push Notifications Look Like

Site push notifications are enabled by site owners, and users can manage push notifications through their browser settings. If the webmaster has not enabled push on the site, then the user does not have the opportunity (or need) to use them, configure them, etc.

What are the advantages of push notifications compared to other methods of delivering fresh information? How to manage such a tool in the desktop browsers Google Chrome, Mozilla Firefox or similar? Let's consider these questions below.

Benefits of push notifications

The benefits of implementing push notifications on sites for their owners, that is, for webmasters, are obvious. The fact is that few means of informing can provide 90% message delivery to the user and almost 50% delivery.

But what benefit does the reader of this or that site receive?

Push notifications for some users may be more convenient than subscribing to site updates by E-mail. Messages coming from different sites do not accumulate in the mailbox and do not complicate access to personal correspondence.

If at the moment the user does not have time to read the news, then by clicking on the push notification, he can open the page in a browser window and leave it until a convenient moment. Or send it to a lazy reading service like Pocket or Readability.

One of the disadvantages of subscribing to site news by E-mail is the accumulation of letters about new articles in the user's mailbox. With a push notification, there will be no overflow in the mail.

With insufficient protection of the site from hacking, it may happen that the database of site subscribers falls into the hands of scammers who first organize this database (the so-called spam attack). Then every email owner from this database receives such fraudulent spam emails. It is believed that with push notifications in this regard, users are more securely protected: no one else, except the creators of the sites of interest, will be able to disturb users, no matter who hacks anything on such sites.

Push notifications and RSS feed

In terms of spam protection, web-push is similar to another means of delivering fresh information published on a particular site - an RSS feed. The latter even wins in that it keeps a history of messages about the publications of sites to which an RSS subscription is issued. Whereas pop-up notifications disappear forever after a few seconds.

But the use of RSS feeds for news delivery requires the user to perform independent actions: he needs to find the subscription button on each site (and it does not have a standard location) and enter the channel address into the RSS reader. If the user does not have such a reader in the browser, it still needs to be organized separately, for example, by installing an extension, selecting a web service, or resorting to using the appropriate program.

Push notifications themselves pop up and offer to subscribe, and their implementation is provided by the regular functionality of almost any modern browser.

Setting up push notifications in Google Chrome

The implementation of pop-up notifications in Google Chrome and browsers built on the same Blink engine (for example, ) offers the user a completely open subscription format that does not require him to make any choice.

A push request in Google Chrome contains two functional buttons:

1. "Allow" to approve message delivery (1 in Figure 2) and
2. "Block" to add the site to the list of blocked ones (2 in Fig. 2).

In the latter case, requests will no longer appear on subsequent visits to such a site.

There is a third option: clicking on the cross in the request window allows you to postpone the decision (3 in Fig. 3). The site will not be blocked, and after a while such a request in the upper left corner of the Chrome window will appear again.

Rice. 2. What a Push Notification Request Looks Like in Google Chrome

Setting up push notifications in Mozilla

In Mozilla Firefox (and other browsers based on the same Gecko engine), the web push delivery request form is arranged more cleverly than in Google Chrome, or rather, with the inclination of the user to a specific choice.

1. The “Allow notifications” button (1 in Fig. 3) is accentuated by color indication,
2. and as an alternative, it is opposed to the delayed decision button “Not now” (2 in Fig. 3).

The "Never Allow" notification blocking button (4 in Figure 3) is smaller and hidden inside the "Not Now" button (3 in Figure 3).

Rice. 3. What a push notification request looks like in Mozille Firefox

Allowed and blocked push notifications are not synchronized with browser profiles. After installing a new operating system, when switching to another computer, and even after reinstalling the browser itself with cleaning up its remnants during uninstallation, you need to start all over again - respond to site requests again, form a base of permissions and blocking for push notifications from scratch.

Unsubscribing from web-push and blocking them

An excessive amount of pop-up messages can become annoying to the user over time. In addition, our interests may change.

How in such cases to unsubscribe from irrelevant sites or completely disable the delivery of push notifications by the browser? And how, on the contrary, to unblock sites that were mistakenly blocked when prompted?

website 15.12.2017

Good day, dear visitor.

Instant notifications from the site about the appearance of new material, as well as other events, what could be better?! This technology came to us from the world of mobile technology - initially, instant notifications were only the lot of mobile applications, but over time, the "feature" was introduced into browsers (mobile, and then desktop).

Alerts increase the number of visitors to your site and are more effective than email subscriptions. Those. if a user has visited your site, approved the request to enable notifications from the site, then he will see them almost always, and for this you do not need to make any extra gestures, as is traditionally the case with E-Mail mailing lists.

I want to note right away that Web Push notifications can be integrated only on those sites that work using a secure protocol (https) - this is a requirement of the technology.

What is Web Push

When a user visits a site that has an instant messaging service, a subtle message will be displayed indicating that the site is requesting permission to send notifications. The design of this notice depends on the browser you are using.

The image shows an example with a proposal to subscribe to notifications from a site in the desktop browser Google Chrome and Mozilla Firefox.

And this is how the same request looked in the Chrome for Android mobile browser up to version 63.0.3239.107.

Subsequently, the developers of the Google mobile browser revised their approach to query output, making it more aggressive. From now on, it overrides the content until the user makes a selection.

Realizing that this can irritate visitors, OneSignal did the following: when accessing the site from the Google Chrome for Android mobile browser, a pop-up window will be displayed asking for permission to subscribe (the request text is configurable). If the user agrees, then a standard prompt is already displayed to enable alerts in the browser.
This applies only to the Google Chrome for Android mobile browser; in all other browsers, the algorithm for displaying a notification subscription request remains unchanged.

When a user agrees to receive notifications, you can set a "welcome" notification, the meaning of which is that you have been subscribed to notifications about new site materials. And when they appear, you will be notified by a corresponding notification.

As you can see, on mobile browsers, alerts are often displayed in the notification bar, while on desktop (computer) browsers, they pop up in the lower right corner.

The alerts themselves are also customizable: you can set a picture, title, message text, and open a specific page when you click on the alert.

How to connect Web Push to the site

It must be understood that Web Push is a service that can hardly be implemented by simply installing a plugin and similar manipulations. Therefore, we will use the corresponding third-party service. In this case, we will talk about the OneSignal service, with the help of which we will endow our site with the functionality described above. Why exactly him? Because it is completely free, does not send users any advertising and other things.

It is unlikely that users will even know that Web Push of your site is implemented using the OneSignal service. This is its undeniable advantage.

What are its downsides? They are also available. The interface of this service is in English, and you will need to get used to it if you plan to generate alerts from there that will be sent to users who subscribe to them.

There is an official plugin for integration into WordPress, which, however, I did not like at all. Its size is 6.5 megabytes, which is quite a lot ... it already turned me off from using it.

I integrated Web Push into the site with “handles” by reading the integration guide (in English), which is presented in some detail on the service website.

And I form the messages themselves through my personal account on the service.

I want to tell you about this integration method (without a plugin). It is worth noting that using the described integration method, you can endow Web Push with the functionality of not only a WordPress site, but also one running on any other engine, or even consisting of static html pages. A truly versatile choice!

1. The first step is to go to the OneSignal service website and register. To do this, click on the link LOG IN and in the window that appears, click on the link sign up, which is located at the bottom. There you will need to enter your email, password, company or organization name (enter any), and accept the terms of use agreement. You can also get accelerated registration if you have a Google, Facebook, Github account.
2. After registering and entering your personal account, you will see a welcome message that lists the features of the service.
3. Having clicked to the last window, click on the button located there Add a New App.

   

4. In the window that opens, enter a name, for example, the name of the site, and click the button Create.

   

5. After that, your eyes will see a window in which you will need to click on the button with the inscription website push and press the key Next.

   

6. In the next window, click on the button labeled Google Chrome & Mozilla Firefox, then press Next.

   

   Note: there is also a button Apple Safari, and you may have a natural question: what about this browser? Don't worry, we'll add it in one of the next steps.

7. In the next window, we will be asked to enter the site address, as well as its logo (optional, you can add it later). The logo itself must have a resolution of 192 by 192 pixels in png format, the file of which must be located on the hosting itself. After entering the data, press the key Save.

   

8. As a result, a window will open in which you will need to choose from the options how the service will be integrated, you will need to click on the button website push, and press Next.

   

9. The information in the window will change and your Your App ID. Do not close this window, we will need it later. Now let's move on to integrating the service code into the site.

   

10. To integrate the code on the site, you need to download this archive (the archive is downloaded from the official site) with the files that will be required for successful integration. The archive contains a folder OneSignalSDKFiles, and it contains three files:
    • manifest.json
    • OneSignalSDKWorker.js
    • OneSignalSDKUpdaterWorker.js

    Unzip these files.

11. Next, you need to open the file in a text editor. manifest.json and edit the caption OneSignal Example in the name of your site. There are no strict requirements here, you can enter the name of the site and its slogan.

    

12. Now upload these files to the root of your site so that these files are available if you type their address in the browser bar:

    https://sitename.ru/manifest.json
    https://sitename.ru/OneSignalSDKWorker.js
    https://sitename.ru/OneSignalSDKUpdaterWorker.js

13. But that is not all. Now you need to add the code directly to the site template. If this is WordPress, then go to the folder ( \wp-content\themes\<папка с названием темы> ) where the theme you are using is located and find the file there header.php. Open this file for editing and write somewhere between the tags … the following code:

    Don't Forget the Place Enter your App ID HERE enter the code that was assigned in your case, and is displayed in the window that was highlighted in step 9.

    Title and message are responsible for the "welcome" message when subscribing, you can change the text in these lines to your liking.

    And the actionMessage, acceptButtonText, cancelButtonText parameters are responsible for the subscription request text, which is displayed in the Google Chrome for Android mobile browser and nowhere else.

    Save the file header.php with the code you entered.

14. Now open your site. You should see an alert prompting you to subscribe to instant notifications. Agree with this offer.

    

    Note: It is worth noting that this request is displayed once. And if you agreed with it, then later it will not appear, but an automatic subscription will be carried out. Even clearing your browser history won't help.
    I just encountered such a feature of the technology myself, experimenting with integration into the site. So if you do not see the request, then you should not “sound the alarm” and think that something is not working, just try to access it from another browser that has not previously accessed the site.

    Congratulations - you are the first subscriber to alerts from your site :-) But that's not all.

15. Now return to the window that we left in order to proceed to the integration of the code into the site, and click the button in it Check Subscribed Users. As a result, a message will pop up under the button, if it is green, then everything went well, you can click on the button located in the lower right corner Done.

    

    Web Push will operate (subscribe, receive) in the Google Chrome browser and those based on the Chromium code: Opera, Yandex Browser, etc., as well as Mozilla Firefox.

16. We just have to enable the ability to work Web Push in the Apple Safari browser - the desktop version of the Apple browser (not mobile, iOS does not support Web Push technology).

    To enable support for Apple Safari, do the following:

    In your OneSignal account, in the left menu, click on the link App settings, in the menu that opens, click the button Configure, which is located opposite the point Apple Safari.

    

    In the window that opens, enter the name of your site and enter its URL address. Optionally, you can upload a site logo that will be displayed in the alert. To do this, check the box I'd like to upload my own notification icons and upload the graphic file. The requirement for the logo is a resolution of 256 by 256 pixels, png format. Having done all the necessary - click the button Save.

    

    You will be redirected to a page App settings, but under the inscription Apple Safari will be highlighted web ID.

    

    It must be copied and pasted into the code that we previously inserted into the file header.php:

    SistNotification: true, safari_web_id: "", welcomeNotification: ( "title": "Notification...

    SistNotification: true, safari_web_id: "Enter your Apple Safari ID HERE", welcomeNotification: ( "title": "Notification...

    Save your changes.

Everything, integration and setup is finished. If something is not clear, then ask questions, and also familiarize yourself with how the code is entered on this site. The only exception on this site is a line of code

moved to the so-called "footer" (in the source code of the page, it is displayed at the bottom).

How to generate and send Web Push to subscribers

We figured out the code and integration, now it's up to the small thing - to create a mailing list.

1. To do this, click on the link in the left menu new message.

   

   There, a wizard will be waiting for us, with the help of which we will create a mailing list.

2. On the Send To page, everyone is already selected by default ( Send to Everyone). Click Next.

   

3. The message is entered on the next page. Pay no attention to the inscription ENGLISH before the input form, you can simply create a multi mailing list for each specified language. If you do not need it, then feel free to enter the title ( Title) and message ( message) and press Next.

   

4. On this page, we are asked to specify icons, a picture, and a link that will open when you click on the alert.

   

   Icons ( icon- thumbnail displayed next to text) supports Google Chrome, Mozilla Firefox (and Chromium-based browsers), big picture ( Image) only Chrome and only from version 56. For the Safari browser, there is no way to specify an icon, incoming notifications will always display the icon that was uploaded at step 16 of the instructions for connecting Web Push to the site. This is the implementation of push notification support in the Safari browser.

   You can ignore the big picture input ( Image), limited to specifying the icon ( icon).

   More to say about the field Time to Live– this option is responsible for the lifetime of the message, by default it is equal to three days. If during this time the smartphone / browser cannot access the Internet, then the message will not be delivered to it at all.

   It makes sense to increase this gap. I increase this threshold to 128 days (by entering 11111111 in field). To increase it, simply start entering numbers and the set threshold will be displayed in real time.

   After entering all the data, click Next.

5. The next page indicates when to send. By default, sending is immediate, but you can try using the option Intelligent delivery (Recommended)– sending messages at the time when they are most likely to be relevant for certain users (depending on the time zone and other factors) .

   

   Click to continue Confirm.

6. As a result, a page will be displayed with summary information about sending a message, its content, how many subscribers, etc. Press the button to confirm sending. send message.

   

And you will be transferred to the statistics page, where you can see how many messages were sent in total, which of them reached the goal, how many times subscribers clicked on it, etc. Very convenient and visual.

It is worth noting that in the left menu you can select the item Templates and create a mailing template so as not to enter repeated information each time when creating a regular mailing list.

Summary

In the material, we examined in detail the advantages of web push, the process of installing an instant notification service on a site, and its use using the example of a completely free service from OneSignal.

If you have any questions, then in the comments you can clarify all the subtleties and nuances.

Donation site site(donations are collected through the Yandex Money service)

How to turn off push notifications - this question worries some users who see notifications in the browser after logging into many sites on the Internet. Push technology is designed to distribute information on the Internet from the provider, in this case, the site, to the user of this site.

Push notifications for the site are needed to inform website visitors about the news, mainly about the release of new articles. In this case, the visitor receives notifications from the site in a timely manner and can immediately read the news.

Notifications on behalf of the site are sent using a third-party service that organizes the delivery of notifications to users' computers.

What is a push notification on a computer? If a site visitor agrees to receive messages from this resource, then from time to time, notifications about the news of this website appear on the user's desktop.

How push notifications work

When visiting a site that has the function of sending notifications enabled, the visitor each time sees a request to allow the display of notifications, in which it is proposed to click on the "Allow" or "Block" buttons. The names of the buttons may be different, but the meaning is the same everywhere.

The site visitor can ignore this pop-up because the push notification request window is small and does not interfere with browsing the site.

The appearance of such windows is different, depending on the service that sends notifications from this site.

By clicking on the "Allow" button, you agree to receive push messages on your computer.

In the notification area, on the Desktop of the user's computer, notifications about news on this website will appear. Usually, this is a message about the release of a new article. Some sites abuse the ability to send alerts, notifying about everything in a row, sometimes sending unnecessary information.

After receiving a push notification, the user can go to the site to read the article, or close the notification by ignoring this message. Such notifications from sites practically do not interfere with the work on the computer, since they are displayed in the notification area and close on their own after a short period of time.

To prevent the request for permission to send alerts from this site no longer appears when you visit this website again, click on the "Block" button.

If you are already receiving push messages from a specific site, then the user can disable push notifications on their own in their browser, in which they have allowed receiving notifications on their computer.

How to remove push notifications after receiving an alert

In many notifications, depending on the settings of the service that sends notifications, you can disable push notifications directly in the window of the opened message.

To do this, click on the settings icon (gear), and then select "Turn off notifications from the site."

After that, notifications from this site will no longer appear on your computer.

How to disable push notifications in Google Chrome

Enter the settings of the Google Chrome browser, scroll down the mouse wheel, click on the "Advanced" link.

In the "Privacy and Security" section, click on the "Site Settings" button. In the "Site Settings" window that opens, find the "Notifications" section.

Here you can set up receiving alerts from sites. By default, "Ask permission before sending (recommended)" is selected.

In order to remove push notifications in the Google Chrome browser, activate the "Do not show notifications on sites" item.

To prevent receiving alerts from a specific site, click on the "Add" button, which is located opposite the "Block" parameter.

In the "Add site" window, enter the site address, and then click the "Add" button.

To configure the receipt of push messages, click on the "Add" button located opposite the "Allow" option.

In the window that opens, add the desired site to the list of sites from which you are allowed to receive notifications in the Google Chrome browser.

How to disable push messages in Mozilla Firefox (1 way)

Enter the Mozilla Firefox browser settings, open the "Privacy and Security" section. In the "Permissions" option, navigate to the "Notifications" option.

Check the box next to Turn off notifications until Firefox restarts. After that, Push notifications will not be shown until the Mozilla Firefox browser is disabled.

To manage alerts, click on the "Settings..." button. In the "Options - Permission to display notifications" window there is a list of sites, notifications from which are allowed or blocked.

If a site has the "Block" status next to it, then notifications from this site do not appear on your computer, because you have previously blocked a request to send notifications from this site.

If the status “Allow” is next to the site address, then notifications from this site will appear on your PC.

You can remove any site from the list using the Remove Website button, or remove all sites from the list by clicking the Remove All Websites button.

After that, new notifications from the remote site will not appear on your computer's desktop. When you visit this site again, decline the request to receive alerts.

To block new messages from sites other than those listed in this list, check the "Block new requests to send you notifications" box.

To finish configuring the order in which notifications are received, click on the "Save changes" button.

How to remove push notifications in Mozilla Firefox (2 way)

To completely disable notifications in the Mozilla Firefox browser, you need to enter the hidden browser settings.

Type in the address bar the expression: "about:config" (without quotes). In the window that opens, click on the "I accept the risk!" button.

In the new window, enter in the "Search" field the expression: "dom.webnotifications.enabled" (without quotes), and then press the "Enter" key.

This setting defaults to "true". Select the line, right-click, select "Switch" from the context menu. The value of the parameter will change to "false".

How to disable push notifications in Yandex.Browser

Enter the Yandex Browser settings, go to the "Sites" tab.

In the "Sites" section, go to the "Requests to send notifications" option. There are three options for action here:

• Show send requests (recommended).
• Do not show send requests.
• Automatically subscribe to notifications.

Select the desired option that regulates the procedure for receiving push messages. To completely disable all push notifications in Yandex Browser, select the "Do not show send requests" option.

If you need to configure the receipt of individual notifications, click on the link "On other sites". Next, in the "Sending notifications" window, select which push notifications you want to block and which ones to allow.

Open the "Allowed" or "Forbidden" tab, using the "Add" button, add a link to the site in the appropriate section.

How to turn off push notifications in Opera

Enter the Opera browser menu, click on the “Settings” context menu item. Next, select the "Advanced" section, click on "Security".

Under the Privacy and Security section, select the Content Settings option. Find the "Notifications" option.

In the Notifications window, the "Ask permission before sending (recommended)" option is enabled by default.

Here you need to add the site to the "Block" or "Allow" section.

How to disable push notifications in Microsoft Edge

Sign in to your Microsoft Edge browser settings. Select "Options". In the "Options" window, click on "View advanced options". In the "Advanced Options" window, select "Notifications" and then click on the "Manage" button.

The Manage Notifications window will show sites that request permission to show notifications. You can change permissions for specific sites.

Article Conclusions

The user can independently disable push (push) notifications in the browser that he receives on the Desktop of his computer, allowing notifications to be sent from a specific website.

Surely everyone who used Google mail at least once saw notifications like this:

gmail notifications

These notifications are called HTML5 Notifications, and they are visible even if you switch to another tab or minimize the browser altogether.

After reading this article, you will be able to make the same notifications for your site. The code is simple, cross-platform, and directly sending a notification takes only 1 line in your favorite JavaScript.

Also at the end of the article there is a ready-made function with which you can start sending notifications without going into details.

According to caniuse.com , now such notifications (HTML5 Notifications) work in Chrome, Firefox (35+), Opera (27+), Safari (7.1+) browsers. Internet Explorer does not have Internet support for notifications. If we consider mobile platforms, then only Android Browser has partial support for HTML5 Notifications.

Before we can send notifications directly, we need to get permission to do so.
You can do this using the Notification.requestPermission() method:

Notification.requestPermission(function(permission)( // the permission variable contains the result of the request console.log("Permission request result:", permission); ));

After executing the method, the result of the permission request will be stored in the permission variable.

Here are its different meanings with explanations:

• default - a request for obtaining rights was not sent;
• granted - the user allowed to show notifications;
• denied - the user denied showing notifications.

Having received the rights, we can proceed directly to sending notifications.
This is done very simply, in one line:

Var notification = new Notification(title, options);

title - notification title,

options (optional) has the following options:

• body - notification body (main text), truncated differently in different browsers and operating systems (for example, in Chrome under Win 8.1, the maximum length is 200 characters);
• dir - notification display direction, can be auto, ltr (left to right) or rtl (right to left);
• lang - notification language;
• tag - a unique notification identifier that can be used to replace it with another notification or delete it;
• icon - URL of the image that will be shown in the notification (recommended 40×40 px resolution).

Let's try to set the parameters and send a notification:

Var notification = new Notification("How many TYU programmers does it take to screw in a light bulb?", ( body: "Only you!", dir: "auto", icon: "icon.jpg" ));

The result of executing the code above

Notification also has onclick , onshow , onerror , onclose event handler methods:

Function clickFunc() ( alert("The user clicked the notification"); ) notification.onclick = clickFunc;

Result:

On click

One function for everything

Now we will collect everything in a single function and add a few error checks:

Function sendNotification(title, options) ( // Check if the browser supports HTML5 Notifications if (!("Notification" in window)) ( alert("Your browser does not support HTML Notifications, it needs to be updated."); ) // Check , whether there are rights to send notifications else if (Notification.permission === "granted") ( // If there are rights, send a notification var notification = new Notification(title, options); function clickFunc() ( alert("User clicked to the notification"); ) notification.onclick = clickFunc; ) // If there are no rights, try to get them else if (Notification.permission !== "denied") ( Notification.requestPermission(function (permission) ( // If the rights are successful received, send a notification if (permission === "granted") ( var notification = new Notification(title, options); ) else ( alert("You have denied notifications"); // The user denied our request to display notifications ) ) ); ) else ( // The user previously denied our request to show notifications // At this point we can, but we won't bother him. Respect the decisions of your users. )

We now have a nice feature that makes it easy to send notifications without being distracted by rights requests or browser support:

SendNotification("Bring back Linus!", ( body: "Testing HTML5 Notifications", icon: "icon.jpg", dir: "auto" ));

The result of executing the function in different browsers: