Upload Notifications API Demo

README.md

@@ -73,6 +73,7 @@ So far, it includes the following examples:
 1. 📡 Broadcast
 1. 📷 Image Capture
 1. 📶 Network Info
+1. 🔔 Notifications
 1. 🧐 Resize Observer
 1. 💳 Payment Request
 1. 📳 Vibration API

src/modules/apis/data.ts

@@ -322,5 +322,25 @@ export const data: Array<Demo> = [
         'https://developer.mozilla.org/en-US/docs/Web/API/CSS_Font_Loading_API',
       canIUseURL: 'font-loading',
     },
+  },
+  {
+    id: 'notifications',
+    emoji: '🔔',
+    title: 'Notifications API',
+    description:
+      'The Notifications API allows web pages to control the display of system notifications to the end user',
+    meta: {
+      author: {
+        name: 'Mohammed Taha',
+        social: {
+          email: '[email protected]',
+          github: 'JustE3saR',
+          twitter: 'JustE3saR',
+        },
+      },
+      apiDocURL:
+        'https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API',
+      canIUseURL: 'https://caniuse.com/notifications',
+    },
   }, //replace item here
 ];

src/pages/demos/notifications/index.js

@@ -0,0 +1,67 @@
+import { useState, useEffect } from 'react';
+
+// demo and form components
+import {
+  DemoInfo,
+  DemoSEO,
+  NotSupported,
+  InputFieldWrapper,
+  InputFieldButton,
+  InputField,
+} from 'components';
+
+// apis
+import { isSupported, run } from 'web-apis/notifications';
+
+// demo info by id
+import { getDemoById } from 'utils/data/data-access';
+
+// Component that Renders the Demo UI
+const ToRender = () => {
+  return (
+    <div className="tw-flex tw-flex-col tw-items-center tw-justify-center">
+      <InputFieldWrapper>
+        <InputField
+          id="text-input"
+          type="text"
+          name="text"
+          placeholder="Write Notification Text..."
+        />
+        <InputFieldButton onClick={run}>Push</InputFieldButton>
+      </InputFieldWrapper>
+    </div>
+  );
+};
+
+const Notifications = () => {
+  const [loaded, setLoaded] = useState(false);
+  const [demoInfo, setDemoInfo] = useState();
+
+  // Get the demo id
+  const id = '_notifications_';
+
+  useEffect(() => {
+    // find the demo details
+    const thisDemo = getDemoById(id);
+    setDemoInfo(thisDemo);
+    setLoaded(true);
+  }, [id]);
+
+  return (
+    <>
+      {loaded && (
+        <div className="tw-flex tw-flex-col tw-items-center tw-justify-center">
+          <DemoSEO title={demoInfo.title} description={demoInfo.desc} />
+          <DemoInfo info={demoInfo} />
+          {isSupported() ? (
+            <ToRender />
+          ) : (
+            <NotSupported canIUseURL={demoInfo.canIUseURL} />
+          )}
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Notifications;

src/utils/data/demos.js

@@ -219,6 +219,19 @@ const data = [
       email: '[email protected]',
     },
   }, //replace item here
+  {
+    id: '_notifications_',
+    title: 'Notifications API',
+    emoji: '🔔',
+    desc: 'The Notifications API allows web pages to control the display of system notifications to the end user',
+    path: 'notifications',
+    canIUseURL: 'https://caniuse.com/notifications',
+    creator: {
+      name: 'Mohammed Taha',
+      twitter: 'JustE3saR',
+      email: '[email protected]',
+    },
+  },
 ];
 
 export default data;

src/web-apis/notifications/index.js

@@ -0,0 +1,23 @@
+export const isSupported = () => {
+  /**
+   * Check if the `API` is supported
+   */
+
+  return 'Notification' in window;
+};
+
+export const run = () => {
+  // Request for the permission
+  Notification.requestPermission().then(function (result) {
+    if (result === 'granted') {
+      var input = document.getElementById('text-input');
+
+      // Push notification
+      new Notification('🎉 Web APIs Playground', {
+        icon: 'http://localhost:3000/icons/icon-192x192.png',
+        body: input.value || 'The best website ever!',
+        silent: true,
+      });
+    }
+  });
+};