Merge pull request #41 from mariusbrn/swRegistration

add service worker registration prop

Author: georgeOsdDev

README.md

@@ -34,7 +34,8 @@ Notification.propTypes = {
   onError: func,
   timeout: number,
   title: string.isRequired,
-  options: object
+  options: object,
+  swRegistration: object,
 };
 
 ```
@@ -66,6 +67,10 @@ Notification.propTypes = {
 * `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
 

lib/components/Notification.js

@@ -134,24 +134,29 @@ var Notification = function (_React$Component) {
         }
 
         if (!this.notifications[opt.tag]) {
-          var n = new window.Notification(this.props.title, opt);
-          n.onshow = function (e) {
-            _this3.props.onShow(e, opt.tag);
-            setTimeout(function () {
-              _this3.close(n);
-            }, _this3.props.timeout);
-          };
-          n.onclick = function (e) {
-            _this3.props.onClick(e, opt.tag);
-          };
-          n.onclose = function (e) {
-            _this3.props.onClose(e, opt.tag);
-          };
-          n.onerror = function (e) {
-            _this3.props.onError(e, opt.tag);
-          };
-
-          this.notifications[opt.tag] = n;
+          if (this.props.swRegistration && this.props.swRegistration.showNotification) {
+            this.props.swRegistration.showNotification(this.props.title, opt);
+            this.notifications[opt.tag] = {};
+          } else {
+            var n = new window.Notification(this.props.title, opt);
+            n.onshow = function (e) {
+              _this3.props.onShow(e, opt.tag);
+              setTimeout(function () {
+                _this3.close(n);
+              }, _this3.props.timeout);
+            };
+            n.onclick = function (e) {
+              _this3.props.onClick(e, opt.tag);
+            };
+            n.onclose = function (e) {
+              _this3.props.onClose(e, opt.tag);
+            };
+            n.onerror = function (e) {
+              _this3.props.onError(e, opt.tag);
+            };
+
+            this.notifications[opt.tag] = n;
+          }
         }
       }
 
@@ -192,7 +197,8 @@ Notification.propTypes = {
   onError: _propTypes.func,
   timeout: _propTypes.number,
   title: _propTypes.string.isRequired,
-  options: _propTypes.object
+  options: _propTypes.object,
+  swRegistration: _propTypes.object
 };
 
 Notification.defaultProps = {
@@ -207,7 +213,8 @@ Notification.defaultProps = {
   onClose: function onClose() {},
   onError: function onError() {},
   timeout: 5000,
-  options: {}
+  options: {},
+  swRegistration: null
 };
 
 exports.default = Notification;

src/components/Notification.js

@@ -101,18 +101,23 @@ class Notification extends React.Component {
       }
 
       if (!this.notifications[opt.tag]) {
-        let n = new window.Notification(this.props.title, opt);
-        n.onshow = (e) => {
-          this.props.onShow(e, opt.tag);
-          setTimeout(() => {
-            this.close(n);
-          }, this.props.timeout);
-        };
-        n.onclick = (e) => {this.props.onClick(e, opt.tag); };
-        n.onclose = (e) => {this.props.onClose(e, opt.tag); };
-        n.onerror = (e) => {this.props.onError(e, opt.tag); };
-
-        this.notifications[opt.tag] = n;
+        if (this.props.swRegistration && this.props.swRegistration.showNotification) {
+          this.props.swRegistration.showNotification(this.props.title, opt)
+          this.notifications[opt.tag] = {};
+        } else {
+          const n = new window.Notification(this.props.title, opt);
+          n.onshow = e => {
+            this.props.onShow(e, opt.tag);
+            setTimeout(() => {
+              this.close(n);
+            }, this.props.timeout);
+          };
+          n.onclick = e => { this.props.onClick(e, opt.tag); };
+          n.onclose = e => { this.props.onClose(e, opt.tag); };
+          n.onerror = e => { this.props.onError(e, opt.tag); };
+
+          this.notifications[opt.tag] = n;
+        }
       }
     }
 
@@ -148,7 +153,8 @@ Notification.propTypes = {
   onError: func,
   timeout: number,
   title: string.isRequired,
-  options: object
+  options: object,
+  swRegistration: object,
 };
 
 Notification.defaultProps = {
@@ -163,7 +169,8 @@ Notification.defaultProps = {
   onClose: () => {},
   onError: () => {},
   timeout: 5000,
-  options: {}
+  options: {},
+  swRegistration: null,
 };
 
 export default Notification;

test/components/Notification_spec.js

@@ -288,6 +288,25 @@ describe('Test of Notification', () => {
                 expect(args[1]).to.be.eql('mytag');
               });
             });
+
+            describe('when swRegistration prop is defined', () => {
+              const swRegistrationMock = { showNotification: sinon.stub().resolves({ notification: ee }) }
+              const MY_TITLE = 'mytitle';
+              const MY_OPTIONS = {
+                tag: 'mytag',
+                body: 'mybody',
+                icon: 'myicon',
+                lang: 'en',
+                dir: 'ltr',
+                requireInteraction: true,
+              };
+
+              it('does not trigger Notification but trigger swRegistration.showNotification', () => {
+                component = ReactTestUtils.renderIntoDocument(<Notification title={MY_TITLE} options={MY_OPTIONS} swRegistration={swRegistrationMock} />);
+                expect(stubConstructor.calledWithNew()).to.be.eql(false);
+                expect(swRegistrationMock.showNotification.calledWith(MY_TITLE, MY_OPTIONS)).to.be.eql(true);
+              });
+            });
           });
         });
       });