mobilusoss
diff --git a/‎README.md
Lines changed: 9 additions & 1 deletion b/‎README.md
Lines changed: 9 additions & 1 deletion
diff --git a/‎example/app.js
Lines changed: 12 additions & 1 deletion b/‎example/app.js
Lines changed: 12 additions & 1 deletion
diff --git a/‎example/index.html
Lines changed: 1 addition & 1 deletion b/‎example/index.html
Lines changed: 1 addition & 1 deletion
diff --git a/‎example/sound.mp3
30.8 KB b/‎example/sound.mp3
30.8 KB
diff --git a/‎example/sound.ogg
32.2 KB b/‎example/sound.ogg
32.2 KB
@@ -78,4 +78,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).
+
@@ -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>
     )
   }
 
@@ -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]>