Botframework-webchat: Piggybacking on outgoing activities does not work in IE11

[darrenj]

As per #1564 and 15.a.backchannel-piggyback-on-outgoing-activities this code works on Edge/Chrome but fails on IE11 browsers which are still the mainstay of many enterprises.

This initial example works fine on Edge/Chrome but causes the webchat control to not render on IE11, IE developer tools report the following (SCRIPT1003: Expected ':')

<div id="webchat" role="main"></div>
<script src="https://cdn.botframework.com/botframework-webchat/master/webchat.js"></script>
<script src="https://unpkg.com/simple-update-in/dist/simple-update-in.production.min.js"></script>
<script>
    const store = window.WebChat.createStore(
        {},
        ({ dispatch }) => next => action => {
            if (action.type === 'DIRECT_LINE/POST_ACTIVITY') {
                action = window.simpleUpdateIn(action, ['payload', 'activity', 'channelData', 'ssoToken'], () => '@Model.Token');
            }

            return next(action);
        }
    );

    window.WebChat.renderWebChat({
        directLine: window.WebChat.createDirectLine({
            token: 'DIRECTLINETOKEN'
        }),
        store,
        userID: '@Model.UserId',
    }, document.getElementById('webchat'));    
</script>

• Updated webchat as per other instructions for IE11 to use the es5 package (no change)

<script src="https://cdn.botframework.com/botframework-webchat/master/webchat-es5.js"></script>

• Cutting the code back to remove the declaration of store and use in the renderWebChat method causes webchat to render but of course the "piggy-backing" approach does not work.

We need a piggybacking example that works with IE11 and ideally the code to detect IE11 versus other modern browsers to select the right approach.

[a-b-r-o-w-n]

Hey @darrenj this is a problem with all of our sample. They are currently written using javascript features that only exist in newer browsers. To immediately unblock you, I have created an IE11 compatible version of this sample for you to base your solution off of. Link

We will discuss how to what we want to do concerning the other samples and IE11 and report back.

[darrenj]

Perfect, thanks Andy - this worked a treat.

For the purposes of our scenario (ASP.NET hosting page) I refined it slightly to remove the request to directLine/Token as the secret/token exchange is done server-side with the token being passed in as part of the view controller as shown below. I also removed the setSendBox code as I suspected this was more for debug purposes. Let me know if this makes sense.

There are some odd formatting issues which I'll share seperately but I've verified this works across the browser types and let the customer have an updated example.

<div id="webchat" role="main"></div>
<script src="https://cdn.botframework.com/botframework-webchat/master/webchat-es5.js"></script>
<script src="https://unpkg.com/simple-update-in/dist/simple-update-in.production.min.js"></script>
<script>

    function piggybackMiddleware(store) {
        return function (next) {
            return function (action) {
                if (action.type === 'DIRECT_LINE/POST_ACTIVITY') {
                    // The channelData submitted here is very similar to HTTP cookies and vulnerable to forgery attack.
                    // Make sure you use signature to protect it and verify the signature on the bot side.
                    // To minimize unexpected behaviors, we recommend to treat the "action" object as if it is immutable.
                    // We use simple-update-in package to update "action" with partial deep cloning.
                    action = window.simpleUpdateIn(action, ['payload', 'activity', 'channelData', 'ssoToken'], function () { return '@Model.SsoToken' });
                }
                return next(action);
            }
        }
    }

    const store = window.WebChat.createStore(
        {},
        piggybackMiddleware
    );

    window.WebChat.renderWebChat({
        directLine: window.WebChat.createDirectLine({ token: '@Model.DirectLineToken' }),
        // We will use a custom version of Redux store, which we added middleware to handle backchannel messages.
        store: store,
        userID: '@Model.UserId'
    }, document.getElementById('webchat'));

    document.querySelector('#webchat > *').focus();
</script>

[rgovindan29]

15.b.incoming-activity-event works in Chrome and Edge but fails on IE11 browsers.
Error message "SCRIPT1003: Expected ':'"

<div id="webchat" role="main" hidden></div>
<script src="https://cdn.botframework.com/botframework-webchat/master/webchat-es5.js"></script>
<script>
const store = window.WebChat.createStore(
                {},
                ({ dispatch }) => next => action => {
                    if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') {
                        const event = new Event('webchatincomingactivity');

                        event.data = action.payload.activity;
                        window.dispatchEvent(event);
                    }
                    return next(action);
                }
            );

window.WebChat.renderWebChat({
                directLine: window.WebChat.createDirectLine({ secret: 'DIRECTLINETOKEN' }),
                userID: 'username=' + userName + '&useremail=' + userEmailId,
                store: store,
            }, document.getElementById('webchat'));

 window.addEventListener('webchatincomingactivity', ({ data }) => {
         console.log(`Received an activity of type "${ data.type }":`);
       console.log(data);
       });
</script>

Please let me know if you have any solution for this.

[a-b-r-o-w-n]

@rgovindan29 most of our samples assume a browser with modern javascript features. As such, you may need to adapt this sample to your specific need to IE11. Currently, there are no plans to update all of our samples for IE11 compatibility.

EDIT: We do have plans to update documentation concerning IE11, but have been focused on other features. Feel free to submit a PR with documentation updates and we will happily merge.

[arjendevries]

@a-b-r-o-w-n , any current samples to look at for IE 11? Both resources you posted have been removed.

[a-b-r-o-w-n]

@compulim are there any samples of documentation for IE11?