Vanilla Web Component for the HTML5 Notifications API
MIT License
Vanilla Web Component for the HTML5 Notifications API. Demo
npm i --save web-notification
bower install --save web-notification
Name | Description |
---|---|
title | The title of the notification |
body | body of the notification |
icon | the icon to display with the notification |
timeout | amount of time to display notifcation before auto hiding |
notify-on-load | trigger notification as soon as the component is created |
Name | Description |
---|---|
.notify() | Manually triggers the notification |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="index.js"></script>
</head>
<body>
<web-notification id="notificationEl1"
title="Notification 1"
body="Hello World"
icon="homer-simpson.jpg"
timeout="1000"></web-notification>
<web-notification title="Notification 2"
body="Goodbye World"
icon="marge-simpson.png"
notify-on-load="true"></web-notification>
<script>
document.getElementById('notificationEl1').notify();
</script>
</body>
</html>
To dnyamically add new notification elements.
var createWebNotification = require('web-notification'); // or available by 'createWebNotification' on window if not using modules
var myNotification = createWebNotification({
title: 'My Title',
body: 'My Body'
});
document.appendElement(myNotification);