Tag Archives: notifications

Schedule local notifications that don’t require a network connection with the Notifications API

As of Chrome 80, the Notifications API became available as an Origin Trial.

The problem with the Push API is that it’s not reliable for triggering notifications which must be shown when a particular condition, like time or location, is met.

Notification triggers solve this problem by letting you schedule notifications with their triggering condition in advance, so that the operating system will deliver the notification at the right time even if there is no network connectivity or the device is in battery saver mode.

Here’s an example time-based Notification:

const createScheduledNotification = async (tag, title, timestamp) => {
  const registration = await navigator.serviceWorker.getRegistration();
  registration.showNotification(title, {
    tag: tag,
    body: "This notification was scheduled 30 seconds ago",
    showTrigger: new TimestampTrigger(timestamp + 30 * 1000)
  });
};

You can handle the click on a notification in your registered Service Worker.

⚠️ Note that on Desktop the notification triggers are only fired when Chrome is running.

Web.dev — Notification Triggers →
Notification Triggers Demo →
CSS-Tricks – Creating Scheduled Push Notifications →

Quieter Permission UI for Notifications coming to Chrome 80

Looking forward to this Chrome 80 feature:

To protect notifications as a useful service for users, Chrome 80 will show, under certain conditions, a new, quieter notification permission UI that reduces the interruptiveness of notification permission requests. Immediately after the Chrome 80 release, users will be able to opt-in to the new UI manually in Settings.

Instead of that pesky dialog, you’ll get this subtle notification:

💡 No worries: the blue bubble will only we shown once.

Above that, if you’re a user that typically blocks notifications, Chrome will automatically enable the quieter UI for you 🙂

Quieter permission UI for Notifications →

Trigger macOS notifications from the CLI with node-notifier-cli

$ notify -t "Hello" -m "My Message" -s --open http://github.com
$ notify -t "Agent Coulson" --icon https://raw.githubusercontent.com/mikaelbr/node-notifier/master/example/coulson.jpg
$ notify -m "My Message" -s Glass
$ echo "My Message" | notify -t "Hello"

Installation per NPM/Yarn:

yarn global add node-notifier-cli

TIP: As with many packages you can also run it using the aforementioned npx:

npx -p node-notifier-cli notify -t 'Hello' -m 'My message'

node-notifier CLI →

Pusher — HTML5 WebSocket Powered Realtime Messaging Service

pusher_cloud_diagram

Pusher is a hosted API for quickly, easily and securely adding scalable realtime functionality to web and mobile apps

It’s as easy as subscribing to a channel:

var channel = pusher.subscribe('my-channel');
channel.bind('my-event', function(data) {
  alert('Received my-event with message: ' + data.message);
});

and pushing messages to it:

pusher.trigger('my-channel',
               'my-event',
               { "message": "hello world" }
);

Libs for pushing messages exist for PHP, Ruby, JS, and .Net

Pusher →