Push notifications for websites: integration and implementation with JS

Push notifications have long been a popular tool on smartphones and tablets to keep users informed of important news. No matter if the weather gets bad or your favorite club has won. We use push notifications on a daily basis, but why only on our smartphones and tablets?

Push notifications with push.js

The strength of Push.js is the ease of use and implementation. We do not have to worry about older browsers or distinguish between multiple implementations. Instead, we can serve all browsers with a single function call. Push.js automatically chooses the right fallback implementation for older browsers, and we can lean back carelessly.

For the integration of Push.js we just need to download the lib or install it via npm / bower. If we have now integrated the Lib into our project, we can start directly with the creation of a notification. The following JavaScript function is Push.create(‘Hello World!’) : Push.create(‘Hello World!’) . As soon as this function has been executed initially, we automatically receive a browser-dependent dialog, which is necessary for confirming the push notifications. If this is once accepted, we receive the notification “Hello World” directly.

Further notifications can now be triggered without having to repeatedly accept the confirmation. The confirmation is valid for the selected domain until it is revoked in the browser settings. A push notification always needs a title, all other options can be set as needed. This includes:

  • body (text of the push notification)
  • icon (image for the push notification)
  • onClick (callback function, should be clicked on the push notification)
  • onClose (callback function, should the push notification be closed)
  • onError (callback function, should an error occur)
  • onShow (callback function, the push notification should be displayed)
  • tag (identifies and can be used as an ID for push notification)
  • timeout (time in milliseconds until the push notification is closed)
  • vibrate (vibration history for mobile devices)

Thus, an extensive push notification might look like this:

[cc lang=”javascript”]Push.create(‘PushTitle’, { body: ‘Here is push content!’, icon: { x16: ‘img/icon.png’, x32: ‘img/icon.png’ }, timeout: 6000 });[/cc]

On the official page of Push.js or on the GitHub repo, you can read all the important information and once again deal with the JavaScript Notifications API.

Recent Articles


Related Stories

1 Comment

Leave A Reply

Please enter your comment!
Please enter your name here