Output a message to the browser console.
cable_ready["MyChannel"].console_log(message: "string", # required, although it can be emptylevel: "string" # optionally specify one of "warn", "info" or "error")
Display a native system notification to the end user. This will happen outside the top-level browsing context viewport, so therefore can be displayed even when the user has switched tabs or moved to a different app. Native notifications are designed to be compatible with existing notification systems, across different platforms.
You can learn about all of the possible options on MDN.
The most obviously useful is body which is the message below the title. You might also want to specify icon
which takes a URL to an image. You can even vibrate
their phone or mark your message as silent
.
The user will be asked to Allow or Block notifications. You cannot force them to accept.
cable_ready["MyChannel"].notification(title: "string", # required, although it can be emptyoptions: {} # see options such as body, icon, vibrate, silent)
cable-ready:before-notification
cable-ready:after-notification
cable_ready["MyChannel"].notification(title: "You are the best.",options: {body: "How does it feel to be your parents' favourite?",icon: "https://source.unsplash.com/256x256",vibrate: [200, 200, 200],silent: false})
For reasons unclear, the Notification API doesn't make it easy to attach a click handler to your notifications. It could just be that they cannot guarantee it will work across all devices. If you have determined that you need to define a click handler, the recommended solution is to use a dispatch_event operation to send an event to the client. Your event handler can then build up a Notification instance molded to your specific tastes.
document.addEventListener('my-app:notify', e => {let permissionNotification.requestPermission().then(result => {permission = resultconst { title, options, clickUrl } = e.detailif (result === 'granted') {const notification = new Notificationnotification.onclick = () => window.open(clickUrl)notification(title || '', options)}})})