In this tutorial we explain how to use the pushpad gem with the noticed gem to create multi-channel notifications in a Rails application. In particular we’ll use the noticed gem for the notifications in general, while Pushpad will be used to deliver the web push notifications in real time, even when the website is closed.
web-notifications
A bell for notifications with JavaScript animation
In this tutorial we create a ringing bell animation with JavaScript and we learn how to create a simple bell icon that you can place in a corner of your web page (e.g. to collect subscribers to your push notifications).
Safari 16 adds support for web push notifications (Push API)
The long-awaited support for web push notifications in Safari is finally here.
How to send notifications with JavaScript (in 10 lines of code)
It’s very simple to display a native notification using JavaScript.
“This site has been updated in the background”: what is this notification?
If you subscribe to the notifications of some websites, you may sometimes see a strange notification with this content: “This site has been updated in the background”. What does that mean? And if you are the website owner, how can you prevent that notification?
Bell icon for push notifications and subscribe button
Are you looking for a bell icon to represent push notifications or to create a subscribe button on your website?
There are many free and open source resources where you can get an high-quality bell icon, in different formats, without the need to draw it manually.
Is it possible to display newlines inside web notifications?
You can include newlines and line breaks inside the body of web notifications.
Styling web push notifications
Is it possible to customize the style of web push notifications?
Web push notifications: user log in and log out
How can you associate a push subscription to a specific user? How can you implement log-in and log-out for web push notifications?
Add analytics to web push notifications
How can you collect analytics for web push notifications (e.g. clicks)?
Chrome Push Notifications: This site has been updated in the background
What can you do if you receive that notifications? What does it mean? How can you fix it?
Web Notifications: difference between icon / image / badge
What is the difference between Notification.icon, Notification.image and Notification.badge?
Send recurring web notifications to re-engage your users
Recurring web notifications (e.g. every day, every week, every month, etc.) can be a simple strategy to re-engage your website users.
Change the default Chrome icon (browser logo) for notifications
Is it possible to replace the Chrome logo / browser logo on notifications with the website logo?
Schedule or delay a web notification (like a reminder)
How can you create a web notification now that is displayed some time later?
How to send push notifications from a closed web app
One of the major features of web apps (both on desktop and mobile browsers) is the ability to send push notifications that are delivered even when the website is closed.
Web Push Notifications: Standard and Official Documentation
“Web Push Notifications” is a general term to refer to the push notifications sent by websites and web apps. However, if you are looking for an official document that defines the “Web Push Notifications” standard, you won’t find it. This is because this technology is made up of different technologies, each one serving to a specific purpose. Let’s find out what these technologies are and where the official standards are located (documentation).
How to show web push notifications for longer
How to prevent the browser notifications from automatically closing? Is there any way to increase the amount of time the notifications are displayed in foreground to the user?
Sound on web push notifications
There are different ways to control the beep / sound made by web push notifications.
Does Brave browser support web push notifications?
Brave is a privacy-focused browser, with a small market share, and you may be surprised to learn that it supports web push notifications.