Experiment: state change listeners

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>

<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>

pusher / push-notifications-web

Experiment: state change listeners #56