not working on android chrome about react-web-notification HOT 17 CLOSED

http://caniuse.com/#feat=notifications

I think we need webkit prefix.
https://github.com/georgeOsdDev/react-web-notification/blob/master/src/components/Notification.js#L22

I'm welcome your PR.

from react-web-notification.

This seems a little more complicated - in Android Chrome (56.0.2924.87 on 7.1.1 Pixel Build/NOF26V) the browser prompts to request notifications fine, so the problem appears to be on line 115 where the new Notification is created (have yet to remote debug let alone attempt to patch).

According to http://stackoverflow.com/questions/31512504/html5-notification-not-working-in-mobile-chrome, Chrome on Android doesn't support that apparently, instead preferring one creates an empty service worker instead (see the accepted answer on this SO question, and the comment from Miguel Garcia).

from react-web-notification.

I think we need serviceWorker for Android chrome and application server needs host "sw.js".
I think that it exceeds the range of functions that this library can provide with an import statement.

from react-web-notification.

Hi!
If we host/register the sw.js the component would work on Android/Chrome?

from react-web-notification.

any update or workaround for this bug?

I am getting this error on console in my Android device.
Notification.js:147 Uncaught TypeError: Failed to construct 'Notification': Illegal constructor. Use ServiceWorkerRegistration.showNotification() instead. at Notification.render (Notification.js:147) at ReactCompositeComponent.js:795 at measureLifeCyclePerf (ReactCompositeComponent.js:75) at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:794) at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:821) at ReactCompositeComponentWrapper._updateRenderedComponent (ReactCompositeComponent.js:745) at ReactCompositeComponentWrapper._performComponentUpdate (ReactCompositeComponent.js:723) at ReactCompositeComponentWrapper.updateComponent (ReactCompositeComponent.js:644) at ReactCompositeComponentWrapper.receiveComponent (ReactCompositeComponent.js:546) at Object.receiveComponent (ReactReconciler.js:124)

from react-web-notification.

To work on mobile you need to use serviceWorker like @georgeOsdDev said.

It seems like a quick fix might be to update https://github.com/georgeOsdDev/react-web-notification/blob/master/src/components/Notification.js#L21 to something like

if (('Notification' in window) && window.Notification) {
    try {
      new window.Notification('');
      supported = true;
    } catch (e) {
      if (e.name === 'TypeError') {
        supported = false;
      }
    }
  if (window.Notification.permission === PERMISSION_GRANTED) {
    granted = true;
  }
}

A few other projects mention this as well alexgibson/notify.js#38 with a fix of https://github.com/alexgibson/notify.js/blob/master/src/notify.js#L74

My quick fix is to update handlePermissionGranted from this

handlePermissionGranted() {
  this.setState({ ignore: false });
}

To something like this:

handlePermissionGranted() {
  let ignore = false;
  try {
    new window.Notification('');
  } catch (e) {
    if (e.name === 'TypeError') {
      ignore = true;
    }
  }
  this.setState({ ignore });
}

from react-web-notification.

I am also getting the same error and I am using angular 5 framework i used the Service for notification
Please go through this below code and get me the solution please
import {
Injectable
} from '@angular/core';
import {
Observable
} from 'rxjs/Observable';
@Injectable()
export class PushNotificationsService {
public permission: Permission;
constructor() {
this.permission = this.isSupported() ? 'default' : 'denied';
}
public isSupported(): boolean {
return 'Notification' in window;
}
requestPermission(): void {
let self = this;
if ('Notification' in window) {
Notification.requestPermission(function (status) {
return self.permission = status;
});
}
}
create(title: string, options?: PushNotification): any {
let self = this;
return new Observable(function (obs) {
if (!('Notification' in window)) {
console.log('Notifications are not available in this environment');
obs.complete();
}
if (self.permission !== 'granted') {
console.log("The user hasn't granted you permission to send push notifications");
obs.complete();
}
let _notify = new Notification(title, options);
_notify.onshow = function (e) {
return obs.next({
notification: _notify,
event: e
});
};
_notify.onclick = function (e) {
return obs.next({
notification: _notify,
event: e
});
};
_notify.onerror = function (e) {
return obs.error({
notification: _notify,
event: e
});
};
_notify.onclose = function () {
return obs.complete();
};
});
}
generateNotification(source: Array): void {
let self = this;
source.forEach((item) => {
let options = {
body: item.alertContent,
icon: "../assets/img/bell.png",
vibrate: [100, 50, 100],
};
let notify = self.create(item.title, options).subscribe();
})
}
}
export declare type Permission = 'denied' | 'granted' | 'default';
export interface PushNotification {
body?: string;
icon?: string;
tag?: string;
data?: any;
renotify?: boolean;
silent?: boolean;
sound?: string;
noscreen?: boolean;
sticky?: boolean;
dir?: 'auto' | 'ltr' | 'rtl';
lang?: string;
vibrate?: number[];
}

from react-web-notification.

And i am getting the notification text in getNotification() function

from react-web-notification.

See
#41

from react-web-notification.

i am trying to implement Service Worker.. but i got this error this.props.swRegistration.showNotification is not a function

please guide me what to pass in swRegistration: object,

from react-web-notification.

@pankti1210
↓↓↓
https://mobilusoss.github.io/react-web-notification/example/serviceWorker.html
https://github.com/mobilusoss/react-web-notification/blob/master/example/app.js#L123-L128

from react-web-notification.

getting blank array in
this.props.swRegistration.getNotifications({}).then((notifications) => { console.log(notifications); });

and error Uncaught (in promise) undefined

running this project in production environment but on static server localhost:5000

from react-web-notification.

notifications are working in firefox but not in chrome
in chrome i get this error Uncaught (in promise) undefined and notifications list blank

from react-web-notification.

Are you testing this on HTTPS ?

from react-web-notification.

yes..i have tested on HTTPS too..
notifications are only working in web ( Firefox )
also not working in mobile browsers.

from react-web-notification.

@georgeOsdDev it is working now.. thanks
but notification sound is not working..

from react-web-notification.

See https://github.com/mobilusoss/react-web-notification#known-issues

Notification.sound Notification.sound is not supported in any browser.

We can play sound with onShow callback with standard Notification API.
But with swRegistration we can not recognize show event.

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.

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

BTW
Please do not start discussion using closed issue.
If you found some bug or need any help, please open new issue.

from react-web-notification.