mobilusoss/react-web-notification

React component with HTML5 Web Notification API

React-web-notification

React component with HTML5 Web Notification API. This component show nothing in dom element, but trigger HTML5 Web Notification API with render method in the life cycle of React.js.

Demo

View Demo

Installation

npm install --save react-web-notification

API

Notification

React component which wrap web-notification.

Props

Notification.propTypes = {
  ignore: bool,
  disableActiveWindow: bool,
  askAgain: bool,
  notSupported: func,
  onPermissionGranted: func,
  onPermissionDenied: func,
  onShow: func,
  onClick: func,
  onClose: func,
  onError: func,
  timeout: number,
  title: string.isRequired,
  options: object,
  swRegistration: object,
};

• ignore : if true, nothing will be happen

• disableActiveWindow : if true, nothing will be happen when window is active

• askAgain : if true, window.Notification.requestPermission will be called on componentDidMount, even if it was denied before,

• notSupported() : Called when HTML5 Web Notification API is not supported.

• onPermissionGranted() : Called when permission granted.

• onPermissionDenied() : Called when permission denied. Notification will do nothing until permission granted again.

• onShow(e, tag) : Called when Desktop notification is shown.

• onClick(e, tag) : Called when Desktop notification is clicked.

• onClose(e, tag) : Called when Desktop notification is closed.

• onError(e, tag) : Called when Desktop notification happen error.

• timeout : milli sec to close notification automatically. Ignored if 0 or less. (Default 5000)

• title : Notification title.

• options : Notification options. set body, tag, icon here. See also (https://developer.mozilla.org/en-US/docs/Web/API/Notification/Notification)

• swRegistration : ServiceWorkerRegistration. Use this prop to delegate the notification creation to a service worker. See also (https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/showNotification) ⚠️ onShow, onClick, onClose and onError handlers won't work when notification is created by the service worker.

Usage example

See example

yarn
yarn run start:example

Tests

yarn test

Update dependencies

Use npm-check-updates

Known Issues

• Notification.sound Notification.sound is not supported in any browser. You can emulate it with onShow callback. see example.

License

react-web-notification's Issues

Create a react hook based example

Hi, i need a react hook based example.

If no one has done this i can create it and create a pull request with this issue.

depending on library

Is there anyway for me to import from 'react-web-notification' as opposed to '../src/components/Notification' ? I believe its more dependable and safer.

React 16

Hi,

I'm having an error similar to this.

Could you update the peer dependencies?

Thanks

how schedule a notification?

for example schedule notification to 3 days more at 13:30

Thanks you!

no longer showing notifications on latest chrome

I recently updated chrome, and noticed a few of my projects using this lib no longer show notifications. The sound onOpen callback actually does fire, but the notification itself does not show. I have my webpack build pointed to the latest commit on master currently to ensure I have picked up any fixes recently, no luck.

Change url from georgeosddev to mobilusoss

Repository have been transferred from georgeosddev to mobilusoss.
We need change hard coded url in package.json, README.md, LICENSE ,etc

ReferenceError: window is not defined

I am having an issue with creating a Web Notification when I create my own component that uses your lib. It works when I load the app first and then I navigate to another page and I reference your Notification lib from my component. It doesn't work when I load it on the first page that gets loaded.

Not sure how to work around this. I am just wondering if there is a way to check for window and if the feature is available somewhere else besides the constructor.

Cannot close notification other than by timeout

I'd like to close the notification when the user clicks on it, but can't work out how to do this. Any help would be great :)

Example don't work

Example is not following the notification example in the browser.

http://georgeosddev.github.io/react-web-notification/example/

Write test with sinon.js

Example => https://github.com/alexgibson/notify.js/blob/master/test/tests.js

Typings for Typescript

Have you ever thought about adding Typescript typings to your project? I would really appreciate it.

Why did you choose the latest React as the dependency?

I mean, lower version could also work, right?

You should not use the latest React, otherwise all projects have to upgrade to the latest React, it's gonna be a huge change for old projects, or even new projects, that will make many potential users give up your library, I suggest you make your lib be compatible at least from React v15.5.4, cause that's the most stable version so far, besides, the notification API has nothing to do with latest React APIs, plus the latest React is not stable enough.

Add option `disableActiveWindow`

Use window.onblur and window.focus listener to disable web notification when browser is active.

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onblur

It's not possible to wait user interaction

The 'timeout' parameter should have a value (for ex. 0) to keep the notification open till the user don't interact

firebase-messaging-sw.js is not updated in browser

Hi, I updated the firebase-messaging-sw.js file and I had to unregister it manually in browser to update it, but I can't ask the users to do that it should be done programmatically, is there any way to solve that.

Update gh-pages to use latest version

The demo at https://georgeosddev.github.io/react-web-notification/example/ does not work in Chrome Stable (ver 62)

The following messages are in the console:

• [Violation] Only request notification permission in response to a user gesture.
• Permission Denied

I believe this is because the gh-pages branch is using an old version of the component which fires requestPermission in componentDidMount instead of in response to a user action. I see this has been changed in master.

Permission being repeatedly asked for in Safari

If the Notification component is re-rendered and the user didn't grant permission yet, it's gonna stack up and ask again.

Not working in IE11

Hi Team,

This component is really fit for my requirement where I need to display notifications. I am seeing one issue, looks like it is not working in IE. Can you please let us know do we need to change any browser settings for this to work in IE.

Thanks

Web notification error on android

After allowing notifications on android browsers, the app is crashing because of this error:

react-dom.production.min.js:209 TypeError: Failed to construct 'Notification': Illegal constructor. Use ServiceWorkerRegistration.showNotification() instead.

It seems like this is related to android not supporting the "new Notification()" constructor
https://bugs.chromium.org/p/chromium/issues/detail?id=481856

Playing a sound

Hey, I'm using a mp3 link in options.sound to play when the notification opens, but I can't get it to work.
Does it work on your side?
Am I missing something?

Thanks!

Improve keywords in package.json

Typo issue

https://github.com/georgeOsdDev/react-web-notification/blob/70aeced37324e270b0d320ffa7eda4d5175674cf/src/components/Notification.js#L92

Modern browsers support

The routine that asks for permissions is expecting the requestPermission() to accept callback. However, according to the documentation at https://developer.mozilla.org/en-US/docs/Web/API/Notification/requestPermission the newer standard is returning the Promise.

  window.Notification.requestPermission(function (permission) {
    var result = permission === PERMISSION_GRANTED;
    ...
  });

Thanks a lot for the library!

Multiple identical notifs, for multiple opened tabs

Hi,
my app receives socket.io notifications which I display as web notifications.
If multiple instances of my app are opened in multiple browser tabs, I get as many identical notifs as the number of opened tabs (which seems quite logical). I'm using the "tag" option in the options object to prevent this behaviour, but nothing seems to change.

Am I missing something regarding tags?

Thanks a lot

want to post html table as notification message. How to do it

ASAP. Thanks !!!!!!!!!

Support React-v0.14

not working on android chrome

My phone is a nexus 6p with android 7.0 version installed

Prefer document.hasFocus() to tracking focus/blur events

document.hasFocus() is supported across the board and will be more reliable/correct than tracking state based on focus/blur events. Additionally, it means that Notification component users won’t need to initialize an empty element (<Notification disableActiveWindow title=''/>) in order for the component to properly track window activity.

Bump React peer dependency version to 17

The current peer dependency version prevents me from upgrading React to the latest version in one of our old projects.

'timeout' prop doesn't seem to work

Notification is closed earlier than the time (ms) passed in 'timeout' prop.

Publish transpiled code

mobilusoss/react-ellipsis-text#2

Not focusing tab in Chrome

Clicking the Desktop notification, doesn't focus the tab in Chrome - Version 54.0.2840.98 (64-bit)

Compile before publishing

Great component! :-)

But I have a problem using it in a webpack project. When I configure webpack to exclude: /node_modules/ the component doesn't get compiled. The result is at least an error with the JSX in the render function.

I saw at other projects, that the components are published in a compiled format, like a recent one from gaearon: https://github.com/gaearon/react-proxy

Do you have other suggestions?

Option to ask for permission at some other time than componentDidMount

https://github.com/georgeOsdDev/react-web-notification/blob/master/lib/components/Notification.js#L111

fix unit test

#67 fails test
https://travis-ci.org/github/mobilusoss/react-web-notification/builds/686398435