Ss5-notify NPM

ss5-notify

ss5-notify is a lightweight JavaScript library that provides an easy-to-use interface for browser notifications with fallbacks. It checks for browser support, manages notification permissions, and simplifies the process of creating notifications.

Features

Automatically checks if notifications are supported in the browser.
Request permission from users for sending notifications.
Send notifications with custom title, body, and icon.
Support fallback when the browser does not support notifications.
Handle click events on notifications.

Installation & Usage via Skypack

You can use ss5-notify directly in your browser without any build tools, thanks to Skypack. Just import it using the Skypack CDN link.

import NotifyJs from 'https://cdn.skypack.dev/ss5-notify'

Usage

In a browser (via Skypack):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ss5-notify Example</title>
</head>
<body>
  <button id="notify-btn">Show Notification</button>

  <script type="module">
    import NotifyJs from 'https://cdn.skypack.dev/ss5-notify';

    const notifier = new NotifyJs();

    document.getElementById('notify-btn').addEventListener('click', () => {
      notifier.notifyWithPermission('Hello', // Title of the notification
      {
        body: 'World', // Optional body
        icon: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSn5Z6r3O0UIcR02fodDSmW9VKSsS20Gww0DA&s', // Optional icon
        onclick: () => {
          console.log('Notification clicked'); // Handle click event
        },
        fallback: () => {
          alert('Browser does not support notifications.'); // Fallback for unsupported browsers
        }
      });
    });
  </script>
</body>
</html>

Methods

checksupport()

Description: Checks whether the current browser supports notifications.

Returns: true if notifications are supported, false otherwise.

if (notifier.checkSupport()) {
  console.log('Notifications are supported');
} else {
  console.warn('Notifications are not supported');
}

requestPermission()

Description: Requests permission from the user to display notifications. It returns a promise that resolves if permission is granted or rejects if permission is denied.

notifier.requestPermission()
  .then(() => console.log('Notification permission granted'))
  .catch(err => console.error('Notification permission denied:', err));

isGranted()

Description: Checks if the user has already granted permission for notifications.

Returns: true if permission is granted, false otherwise.

if (notifier.isGranted()) {
  console.log('Notification permission has been granted');
} else {
  console.warn('Notification permission has not been granted');
}

notify(title, options ={...})

Description: Displays a notification with the specified title and options. This method will only work if permission is already granted.

The options object can contain the following properties:

title: (string): The title of the notification.
body: (string): The body of the notification.
icon: (string): The URL of the icon to display in the notification.
onclick: (function): A callback function to execute when the notification is clicked.
fallback: (function): A fallback function to execute if the browser does not support notifications.

notifier.notify('Hello World!', {
  body: 'This is a sample notification',
  icon: 'https://example.com/icon.png',
  onclick: () => console.log('Notification clicked!'),
  fallback: () => alert('Notifications are not supported by your browser.')
});

notifyWithPermission(title, options ={...})

Description: Requests permission if not already granted, and displays a notification after permission is granted. If the user has already granted permission, it directly shows the notification.

The options object can contain the same properties as the notify method.

notifier.notifyWithPermission('Greetings!', {
  body: 'This notification is shown after permission is granted.',
  icon: 'https://example.com/icon.png',
  onclick: () => console.log('Notification clicked!'),
  fallback: () => alert('Your browser does not support notifications.')
});

notifyAfterDelay(title, options ={...}, delay)

Description: Schedules a notification to appear after a specified delay (in milliseconds).

This has the same options as the notify method, along with an additional delay parameter.

// Notify the user after 10 seconds
ss5Notify.notifyAfterDelay('Hey there!', {
  body: 'This is your 10-second reminder',
  icon: 'https://your-icon-url.com/icon.png',
  onclick: () => console.log('You clicked the notification!'),
  fallback: () => alert('Notifications not supported in this browser.')
}, 10000);

This method is useful when you need to notify users after a specific event or with a delay. You can use it to remind users of something after they interact with your site.

Browser Support

This library checks for the browser's notification API support. If the browser does not support notifications, you can provide a fallback option (e.g., an alert or other fallback mechanisms).