🚨 Shai-Hulud Strikes Again:834 Packages Compromised.Technical Analysis →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

@notifyon/web

Package Overview
Dependencies
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@notifyon/web

NotifyOn Web SDK

latest
npmnpm
Version
0.1.4
Version published
Maintainers
1
Created
Source

@notifyon/web

Browser SDK for NotifyOn - Get real-time sound and push notifications when your long-running tasks complete.

Installation

NPM / Yarn / PNPM

npm install @notifyon/web
# or
yarn add @notifyon/web
# or
pnpm add @notifyon/web

CDN

<!-- UMD build -->
<script src="https://unpkg.com/@notifyon/web"></script>

<!-- or from jsDelivr -->
<script src="https://cdn.jsdelivr.net/npm/@notifyon/web"></script>

Usage

ES Modules (React, Vue, Angular, etc.)

import { connect } from '@notifyon/web';

// Start listening for notifications
const notifyon = connect({ 
  publicKey: 'pk_your_public_key',
  userId: 'user_123'
});

CommonJS

const { connect } = require('@notifyon/web');

const notifyon = connect({
  publicKey: 'pk_your_public_key',
  userId: 'user_123'
});

Script Tag (Vanilla HTML)

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/@notifyon/web"></script>
</head>
<body>
  <script>
    // Access via global notifyon object
    const instance = notifyon.connect({
      publicKey: 'pk_your_public_key',
      userId: 'user_123'
    });
  </script>
</body>
</html>

React Example

import { useEffect } from 'react';
import { connect } from '@notifyon/web';

function App() {
  useEffect(() => {
    const notifyon = connect({
      publicKey: 'pk_your_public_key',
      userId: 'user_123'
    });

    return () => notifyon.destroy();
  }, []);
  
  return <div>Your app content...</div>;
}

Vue 3 Example

<template>
  <div>Your app content...</div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue';
import { connect } from '@notifyon/web';

let notifyon = null;

onMounted(() => {
  notifyon = connect({
    publicKey: 'pk_your_public_key',
    userId: 'user_123'
  });
});

onUnmounted(() => {
  notifyon?.destroy();
});
</script>

API Reference

connect(config)

Connects to NotifyOn and starts listening for notifications.

Parameters:

  • publicKey (required): Your NotifyOn public key from the dashboard
  • userId (required): The user ID to listen for notifications

Returns: NotifyOn instance with destroy() method for cleanup

TypeScript Support

import { connect } from '@notifyon/web';
import type { NotifyOnWebConfig } from '@notifyon/web';

const config: NotifyOnWebConfig = {
  publicKey: 'pk_your_public_key',
  userId: 'user_123'
};

const notifyon = connect(config);

// Cleanup when done
notifyon.destroy();

Features

  • Automatic Connection: Connects immediately when instantiated
  • Auto-Reconnection: Automatically reconnects if connection is lost
  • Sound Alerts: Plays a pleasant, non-disruptive notification sound in the browser
  • Push Notifications: Native browser push notifications with automatic permission handling
  • Smart Channel Detection: Automatically handles sound, push, or both based on server preferences
  • Zero Configuration: Works out of the box with just public key and user ID

Configuration Options

connect({
  publicKey: 'pk_your_public_key',    // Required - get from NotifyOn dashboard
  userId: 'user_123'                  // Required - your user's ID
});

Browser Compatibility

  • All modern browsers (Chrome, Firefox, Safari, Edge)
  • Web Audio API for notification sounds
  • Automatic reconnection on network issues

License

MIT

Keywords

notifyon
notifications
browser
real-time
sse
web

FAQs

Package last updated on 02 Sep 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

Deno 2.6 + Socket: Supply Chain Defense In Your CLI

Security News

Deno 2.6 + Socket: Supply Chain Defense In Your CLI

Deno 2.6 introduces deno audit with a new --socket flag that plugs directly into Socket to bring supply chain security checks into the Deno CLI.

By Sarah Gooding  -  Dec 12, 2025