Comments (17)
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.
Related Issues (20)
- want to post html table as notification message. How to do it HOT 1
- React 16
- Update gh-pages to use latest version HOT 3
- Why did you choose the latest React as the dependency? HOT 1
- Not working in IE11 HOT 1
- Typings for Typescript HOT 2
- Typo issue HOT 1
- Example don't work HOT 1
- 'timeout' prop doesn't seem to work HOT 1
- Change url from georgeosddev to mobilusoss
- firebase-messaging-sw.js is not updated in browser HOT 1
- It's not possible to wait user interaction HOT 4
- Modern browsers support HOT 1
- fix unit test
- no longer showing notifications on latest chrome HOT 4
- Web notification error on android HOT 4
- how schedule a notification? HOT 1
- Create a react hook based example HOT 2
- Bump React peer dependency version to 17 HOT 1
- Prefer document.hasFocus() to tracking focus/blur events
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-web-notification.