Generated by XState Viz: https://xstate.js.org/viz

machine.js

const grantedState = {
    id: 'granted',
    type: 'final'
}

const deniedState = {
    id: 'denied',
    type: 'final'
}

const blockedState = {
    invoke: {
        id: 'doRequest',
        src: () => requestNotifications(),
        onDone: {
            target: 'querying',
            actions: assign({ response: (ctx, event) => event.data.status })
        },
        onError: {
            target: 'unavailable',
            actions: assign({ response: (ctx, event) => event.data.status })
        }
    }
}

const unavailableState = {
    id: 'unavailable',
    type: 'final'
}

const queryingState = {
    on: {
        GRANTED: 'granted',
        DENIED: 'denied',
        BLOCKED: 'blocked',
        UNAVAILABLE: 'unavailable'
    }
}

const idleState = {
    invoke: {
        id: 'doQuery',
        src: () => {
            return checkNotifications()
                .then((permission) => {
                    if (permission.status == "blocked" || permission.status == "granted") {
                        return Promise.resolve(permission.status)
                    } else {
                        return Promise.reject(permission.status)
                    }
                })
        },
        onDone: {
            target: ''
        },
        onError: {
            target: 'unavailable'
        }
    },
    on: {
        QUERYING: 'querying'
    }
}

let requestPermission = () => {
    requestNotifications(['alert', 'sound', 'badge', 'lockScreen']).then(({status, settings}) => {
        // …
    });
}


const initialState = {
  id: 'toggle',
  initial: 'idle',
  context: {
    msg: ''
  },
  states: {
    idle: {...idleState},
    granted: {...grantedState},
    denied: {...deniedState},
    blocked: {...blockedState},
    unavailable: {...unavailableState},
    querying: {...queryingState}
  }
}


Machine(initialState)