CableReady
Search…
v4.5.0
Notifications
console_log
Output a message to the browser console.
1
cable_ready["MyChannel"].console_log(
2
message: "string", # required, although it can be empty
3
level: "string" # optionally specify one of "warn", "info" or "error"
4
)
Copied!
There are no life-cycle events raised by
console_log.Reference
notification
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.
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.
1
cable_ready["MyChannel"].notification(
2
cancel: true|false, # [false] - cancel the operation (for use on client)
3
title: "string", # required, although it can be empty
4
options: {} # see options such as body, icon, vibrate, silent
5
)
Copied!
Life-cycle Callback Events
cable-ready:before-notificationcable-ready:after-notification
Life-cycle events for
notification are raised on document.Reference
Example:
1
cable_ready["MyChannel"].notification(
2
title: "You are the best.",
3
options: {
4
body: "How does it feel to be your parents' favourite?",
5
icon: "https://source.unsplash.com/256x256",
6
vibrate: [200, 200, 200],
7
silent: false
8
}
9
)
Copied!
Click Handlers
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.
1
document.addEventListener('my-app:notify', e => {
2
let permission
3
Notification.requestPermission().then(result => {
4
permission = result
5
const { title, options, clickUrl } = e.detail
6
if (result === 'granted') {
7
const notification = new Notification
8
notification.onclick = () => window.open(clickUrl)
9
notification(title || '', options)
10
}
11
})
12
})
Copied!
play_sound
Play an .mp3 or .ogg audio file in the browser.
The sound starts playing when the minimum viable amount of the sound file has been downloaded. If another sound request comes in while the first one is still playing, the first one stops.
CableReady subtly captures the first user interaction on the page to ensure this operation works well on all browsers, including Safari Mobile. A silent mp3 is played as soon as the page context is established. It is base64 encoded so there is no network request. At 93 bytes, it is the minimum viable mp3!
1
cable_ready["MyChannel"].play_sound(
2
cancel: true|false, # [false] - cancel the operation (for use on client)
3
src: "" # required - URL for audio file
4
)
Copied!
CableReady creates an HTML Audio instance on
document.audio when the page loads. This object is technically available for you to use in your application as you see fit. Check out MDN for the full audio API.Life-cycle Callback Events
cable-ready:before-play-soundcable-ready:after-play-sound
Life-cycle events for
play_sound are raised on document.cable-ready:after-play-sound is emitted either after the sound has finished playing, or immediately if the operation is cancelled.Reference
Last modified 11mo ago
Export as PDF
Copy link