Closed TomKemp closed 4 years ago
With state change listeners, you can do things like this:
<html> <head> <title>Beams Web Push Demo</title> </head> <body> <button id="notification-button" disabled>Loading...</button> <script src="push-notifications-cdn.js"></script> <script> const { PERMISSION_GRANTED_REGISTERED_WITH_BEAMS, PERMISSION_DENIED } = PusherPushNotifications.RegistrationState; PusherPushNotifications.init({ instanceId: 'YOUR_INSTANCE_ID', }).then(beamsClient => { const onRegistrationStateChange = () => { beamsClient.getRegistrationState() .then(state => { switch(state){ case PERMISSION_GRANTED_REGISTERED_WITH_BEAMS: { // When you become registered, you can set your interests beamsClient.setDeviceInterests(["debug-hello"]) .catch(console.err) // Notifications are enabled, so show the "Disable" button let onButtonClick = ()=>{ beamsClient.stop() .catch(console.err) } configureButton("Disable notifications", false, onButtonClick) break; } case PERMISSION_DENIED: { // Notifications are blocked, show appropriate message configureButton("Notifications blocked", true) break; } default: { // Notifications aren't enabled, so show the "Enable" button let onButtonClick = ()=>{ beamsClient.start() .catch(console.err) } configureButton("Enable notifications", false, onButtonClick) break; } } }) } beamsClient.addListener("registrationStateChange", onRegistrationStateChange) onRegistrationStateChange() }) function configureButton(message, disabled, onclick){ let button = document.getElementById("notification-button") button.innerHTML = message button.onclick = ()=> { // Briefly disable the button while processing for aesthetics button.disabled = true; onclick() } button.disabled = disabled } </script> </body> </html>
OR
<html> <head> <title>Beams Web Push Demo</title> </head> <body> <button id="notification-button" disabled>Loading...</button> <script src="push-notifications-cdn.js"></script> <script> const { PERMISSION_GRANTED_REGISTERED_WITH_BEAMS, PERMISSION_DENIED } = PusherPushNotifications.RegistrationState; PusherPushNotifications.init({ instanceId: 'YOUR_INSTANCE_ID', listeners: { registrationStateChange: (newState, oldState, beamsClient) => { switch(newState){ case PERMISSION_GRANTED_REGISTERED_WITH_BEAMS: { // When you become registered, you can set your interests beamsClient.setDeviceInterests(["debug-hello"]) .catch(console.err) // Notifications are enabled, so show the "Disable" button let onButtonClick = ()=>{ beamsClient.stop() .catch(console.err) } configureButton("Disable notifications", false, onButtonClick) break; } case PERMISSION_DENIED: { // Notifications are blocked, show appropriate message configureButton("Notifications blocked", true) break; } default: { // Notifications aren't enabled, so show the "Enable" button let onButtonClick = ()=>{ beamsClient.start() .catch(console.err) } configureButton("Enable notifications", false, onButtonClick) break; } } } } }) function configureButton(message, disabled, onclick){ let button = document.getElementById("notification-button") button.innerHTML = message button.onclick = ()=> { // Briefly disable the button while processing for aesthetics button.disabled = true; onclick() } button.disabled = disabled } </script> </body> </html>
With state change listeners, you can do things like this:
OR