Merge pull request #17 from georgeOsdDev/develop

georgeOsdDev · georgeOsdDev · commit 46622825c6a3 · 2016-02-04T11:28:10.000+09:00
Release v0.2.2
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,10 @@
 ## Change Log
 
-### Ver 0.2.2 (Next Release)
+### Ver 0.2.3 (Next Release)
+
+### Ver 0.2.2
+
+  * [#15 Permission being repeatedly asked for in Safari](https://github.com/georgeOsdDev/react-web-notification/issues/11)
 
 ### Ver 0.2.1
 
diff --git a/README.md b/README.md
@@ -43,6 +43,8 @@ Notification.propTypes = {
 
 * `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](https://developer.mozilla.org/en/docs/Web/API/notification) is not supported.
 
 * `onPermissionGranted()` : Called when permission granted.
@@ -78,4 +80,12 @@ npm run start:example
 
 ```bash
 npm test
-```
+```
+
+
+### Known Issues
+
+ * [Notification.sound](https://github.com/georgeOsdDev/react-web-notification/issues/13)
+  `Notification.sound` is [not supported in any browser](https://developer.mozilla.org/en/docs/Web/API/notification/sound#Browser_compatibility).
+  You can emulate it with `onShow` callback. see [example](https://github.com/georgeOsdDev/react-web-notification/tree/develop/example).
+
diff --git a/example/app.js b/example/app.js
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import ReactDom from 'react-dom';
-import Notification  from '../src/components/Notification';
+import Notification  from '../lib/components/Notification';
 
 //allow react dev tools work
 window.React = React;
@@ -48,9 +48,14 @@ class App extends React.Component {
   }
 
   handleNotificationOnShow(e, tag){
+    this.playSound();
     console.log(e, 'Notification shown tag:' + tag);
   }
 
+  playSound(filename){
+    document.getElementById('sound').play();
+  }
+
   handleButtonClick() {
 
     if(this.state.ignore) {
@@ -72,7 +77,8 @@ class App extends React.Component {
       body: body,
       icon: icon,
       lang: 'en',
-      dir: 'ltr'
+      dir: 'ltr',
+      sound: './sound.mp3'  // no browsers supported https://developer.mozilla.org/en/docs/Web/API/notification/sound#Browser_compatibility
     }
     this.setState({
       title: title,
@@ -98,6 +104,11 @@ class App extends React.Component {
           title={this.state.title}
           options={this.state.options}
         />
+        <audio id='sound' preload='auto'>
+          <source src='./sound.mp3' type='audio/mpeg' />
+          <source src='./sound.ogg' type='audio/ogg' />
+          <embed hidden='true' autostart='false' loop='false' src='./sound.mp3' />
+        </audio>
       </div>
     )
   }
diff --git a/example/index.html b/example/index.html
@@ -6,7 +6,7 @@
   <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css" rel="stylesheet">
 </head>
 <body>
-  <a href="https://github.com/georgeosdev/react-web-notification"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>
+  <a href="https://github.com/georgeosddev/react-web-notification"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>
   <div id="out" style="margin: 40px;"></div>
   <small>Icons made by <a href="http://www.flaticon.com/authors/google" title="Google">Google</a> from <a href="http://www.flaticon.com" title="Flaticon">www.flaticon.com</a>             is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0">CC BY 3.0</a></small>
   <!--[if lt IE 9]>
diff --git a/example/sound.mp3 b/example/sound.mp3
diff --git a/example/sound.ogg b/example/sound.ogg
diff --git a/lib/components/Notification.js b/lib/components/Notification.js
@@ -19,6 +19,7 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
 var PERMISSION_GRANTED = 'granted';
+var PERMISSION_DENIED = 'denied';
 
 var seqGen = function seqGen() {
   var i = 0;
@@ -70,10 +71,26 @@ var Notification = (function (_React$Component) {
       this.windowFocus = false;
     }
   }, {
-    key: 'componentDidMount',
-    value: function componentDidMount() {
+    key: '_askPermission',
+    value: function _askPermission() {
       var _this2 = this;
 
+      window.Notification.requestPermission(function (permission) {
+        var result = permission === PERMISSION_GRANTED;
+        _this2.setState({
+          granted: result
+        }, function () {
+          if (result) {
+            _this2.props.onPermissionGranted();
+          } else {
+            _this2.props.onPermissionDenied();
+          }
+        });
+      });
+    }
+  }, {
+    key: 'componentDidMount',
+    value: function componentDidMount() {
       if (this.props.disableActiveWindow) {
         if (window.addEventListener) {
           window.addEventListener('focus', this.onWindowFocus);
@@ -86,22 +103,17 @@ var Notification = (function (_React$Component) {
 
       if (!this.state.supported) {
         this.props.notSupported();
+      } else if (this.state.granted) {
+        this.props.onPermissionGranted();
       } else {
-        if (this.state.granted) {
-          this.props.onPermissionGranted();
+        if (window.Notification.permission === PERMISSION_DENIED) {
+          if (this.props.askAgain) {
+            this._askPermission();
+          } else {
+            this.props.onPermissionDenied();
+          }
         } else {
-          window.Notification.requestPermission(function (permission) {
-            var result = permission === PERMISSION_GRANTED;
-            _this2.setState({
-              granted: result
-            }, function () {
-              if (result) {
-                _this2.props.onPermissionGranted();
-              } else {
-                _this2.props.onPermissionDenied();
-              }
-            });
-          });
+          this._askPermission();
         }
       }
     }
@@ -182,6 +194,7 @@ var Notification = (function (_React$Component) {
 Notification.propTypes = {
   ignore: _react2.default.PropTypes.bool,
   disableActiveWindow: _react2.default.PropTypes.bool,
+  askAgain: _react2.default.PropTypes.bool,
   notSupported: _react2.default.PropTypes.func,
   onPermissionGranted: _react2.default.PropTypes.func,
   onPermissionDenied: _react2.default.PropTypes.func,
@@ -197,6 +210,7 @@ Notification.propTypes = {
 Notification.defaultProps = {
   ignore: false,
   disableActiveWindow: false,
+  askAgain: false,
   notSupported: function notSupported() {},
   onPermissionGranted: function onPermissionGranted() {},
   onPermissionDenied: function onPermissionDenied() {},
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-web-notification",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "React component with HTML5 Web Notification API",
   "main": "./lib/components/Notification.js",
   "scripts": {
diff --git a/src/components/Notification.js b/src/components/Notification.js
@@ -3,6 +3,7 @@
 import React from 'react';
 
 const PERMISSION_GRANTED = 'granted';
+const PERMISSION_DENIED = 'denied';
 
 const seqGen = () => {
   let i = 0;
@@ -46,6 +47,21 @@ class Notification extends React.Component {
     this.windowFocus = false;
   }
 
+  _askPermission(){
+    window.Notification.requestPermission((permission) => {
+      let result = permission === PERMISSION_GRANTED;
+      this.setState({
+        granted: result
+      }, () => {
+        if (result) {
+          this.props.onPermissionGranted();
+        } else {
+          this.props.onPermissionDenied();
+        }
+      });
+    });
+  }
+
   componentDidMount(){
     if (this.props.disableActiveWindow) {
       if (window.addEventListener){
@@ -59,22 +75,17 @@ class Notification extends React.Component {
 
     if (!this.state.supported) {
       this.props.notSupported();
-    } else {
-      if(this.state.granted) {
+    } else if (this.state.granted) {
       this.props.onPermissionGranted();
+    } else {
+      if (window.Notification.permission === PERMISSION_DENIED){
+        if (this.props.askAgain){
+          this._askPermission();
+        } else {
+          this.props.onPermissionDenied();
+        }
       } else {
-        window.Notification.requestPermission( (permission) => {
-          let result = permission === PERMISSION_GRANTED;
-          this.setState({
-            granted: result
-          }, () => {
-            if (result) {
-              this.props.onPermissionGranted();
-            } else {
-              this.props.onPermissionDenied();
-            }
-          });
-        });
+        this._askPermission();
       }
     }
   }
@@ -91,6 +102,8 @@ class Notification extends React.Component {
     }
   }
 
+
+
   render() {
     let doNotShowOnActiveWindow = this.props.disableActiveWindow && this.windowFocus;
     if (!this.props.ignore && this.props.title && this.state.supported && this.state.granted && !doNotShowOnActiveWindow) {
@@ -138,6 +151,7 @@ class Notification extends React.Component {
 Notification.propTypes = {
   ignore: React.PropTypes.bool,
   disableActiveWindow: React.PropTypes.bool,
+  askAgain: React.PropTypes.bool,
   notSupported: React.PropTypes.func,
   onPermissionGranted: React.PropTypes.func,
   onPermissionDenied: React.PropTypes.func,
@@ -153,6 +167,7 @@ Notification.propTypes = {
 Notification.defaultProps = {
   ignore: false,
   disableActiveWindow: false,
+  askAgain: false,
   notSupported: () => {},
   onPermissionGranted: () => {},
   onPermissionDenied: () => {},
diff --git a/test/components/Notification_spec.js b/test/components/Notification_spec.js
@@ -13,6 +13,7 @@ import Notification from '../../src/components/Notification';
 
 const PERMISSION_GRANTED = 'granted';
 const PERMISSION_DENIED = 'denied';
+const PERMISSION_DEFAULT = 'default';
 
 describe('Test of Notification', () => {
 
@@ -26,6 +27,7 @@ describe('Test of Notification', () => {
       component = TestUtils.renderIntoDocument(<Notification title='test'/>);
       expect(component.props.ignore).to.be.eql(false);
       expect(component.props.disableActiveWindow).to.be.eql(false);
+      expect(component.props.askAgain).to.be.eql(false);
       expect(typeof component.props.notSupported).to.be.eql('function');
       expect(typeof component.props.onPermissionGranted).to.be.eql('function');
       expect(typeof component.props.onPermissionDenied).to.be.eql('function');
@@ -98,6 +100,68 @@ describe('Test of Notification', () => {
           });
         });
 
+        describe('When Notification is already denied', () => {
+          describe('Check callbacks', ()=> {
+
+            let stub1, stub2, spy1, spy2;
+            before(() => {
+              spy1 = sinon.spy();
+              spy2 = sinon.spy();
+              stub1 = sinon.stub(window.Notification, 'permission', { get: function () { return PERMISSION_DENIED; } });
+              stub2 = sinon.stub(window.Notification, 'requestPermission', function(cb){
+                return cb(PERMISSION_DENIED);
+              });
+              component = TestUtils.renderIntoDocument(<Notification title='test' notSupported={spy1} onPermissionDenied={spy2}/>);
+            });
+
+            after(() => {
+              stub1.restore();
+              stub2.restore();
+            });
+
+            it('should not call window.Notification.requestPermission', () => {
+              expect(stub2.calledOnce).to.be.eql(false);
+            });
+
+            it('should call onPermissionDenied prop', () => {
+              expect(spy1.called).to.be.eql(false);
+              expect(spy2.calledOnce).to.be.eql(true);
+            });
+          });
+        });
+
+        describe('When Notification is already denied, but `askAgain` prop is true', () => {
+          describe('Check callbacks', ()=> {
+
+            let stub1, stub2, spy1, spy2, spy3;
+            before(() => {
+              spy1 = sinon.spy();
+              spy2 = sinon.spy();
+              spy3 = sinon.spy();
+              stub1 = sinon.stub(window.Notification, 'permission', { get: function () { return PERMISSION_DENIED; } });
+              stub2 = sinon.stub(window.Notification, 'requestPermission', function(cb){
+                return cb(PERMISSION_GRANTED);
+              });
+              component = TestUtils.renderIntoDocument(<Notification title='test' notSupported={spy1} onPermissionDenied={spy2} onPermissionGranted={spy3} askAgain={true}/>);
+            });
+
+            after(() => {
+              stub1.restore();
+              stub2.restore();
+            });
+
+            it('should call window.Notification.requestPermission', () => {
+              expect(stub2.calledOnce).to.be.eql(true);
+            });
+
+            it('should call onPermissionGranted prop', () => {
+              expect(spy1.called).to.be.eql(false);
+              expect(spy2.called).to.be.eql(false);
+              expect(spy3.calledOnce).to.be.eql(true);
+            });
+          });
+        });
+
         describe('When Notification is granted', () => {
           let stub;
           before(() => {

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "react-web-notification",`
`3`		`- "version": "0.2.1",`
	`3`	`+ "version": "0.2.2",`
`4`	`4`	`"description": "React component with HTML5 Web Notification API",`
`5`	`5`	`"main": "./lib/components/Notification.js",`
`6`	`6`	`"scripts": {`