Send Browser Push Notifications with Push.js

Native mobile apps always had support for push notifications. But, these notifications were absent from a web until a Notifications API popped up.

The Notifications API works by JavaScript. It allows we to send pull notifications directly to a user’s mechanism by their browser window. It’s not that tough to set it adult yourself, though because reinvent a wheel?

Push.js is a free notifications library that handles all a elementary pull notifications facilities with a few lines of JavaScript.

These browser-based notifications are still really new and they have ways to go before throwing on. Users need to allow notifications from certain websites before they will appear, so unless your assembly already trusts your website, it can be tough removing people to accept.

Push.js homepagePush.js homepage

But, a best approach to learn is to try and see what happens. You can send visitors links to your newest blog posts, or information about new updates to a site or even requests to pointer adult for your newsletter. And, with Push.js it’s crazy elementary to get this working.

You can download a library from npm or Bower, or only squeeze it directly from GitHub.

From there, we add some elementary JavaScript to your page to emanate a pull notification. If a user accepts a ask from your site afterwards they’ll consistently get all new notifications we send. Pretty cool!

You can set a presentation header, a categorical content, and other facilities like a auto-close time.

Here’s a sample snippet from a Push.js website:

Push.create("Hello world!", {
    body: "How's it hangin'?",
    icon: 'icon.png',
    timeout: 4000,
    onClick: duty () {
        window.focus();
        this.close();
    }
});

You don’t need to know most JavaScript to get this library operative on your site. If we only copy/paste or work by a documentation we should have pull notifications using in reduction than 15 minutes.

Push.js pluginPush.js plugin

Not everybody likes these browser notifications and this library positively won’t be useful on each website. But, if you’re peaceful to give this a try it’s super easy to set adult and will make pull notifications a heck of a lot easier.

Web Design: Hide / Show Notification Bar With CSS3

Web Design: Hide / Show Notification Bar With CSS3

[series_html5css3] Inspired by one of the readers criticism from the previous, we are going to uncover we how…Read more

Add Comment