Office Dev, Technical

Check Users Browser within Office 365 Add-In

When writing an Office 365 Add-In intended to be run in Office 365 (as opposed to just an Office thick client, such as Word), you may need to be concerned about which browser your user is in. I’ll cover a specific scenario and another more general scenario and how to perform the check.

Internet Explorer 9 Support

As of the writing of this post, any Add-In published to the Office Store will be validated against IE 9 and rejected if it doesn’t work. Other than random IE 9 JavaScript quirks, your Add-In may be using an Office API feature that isn’t supported in IE 9 such as the coercion type HTML when using setSelectedDataAsync. The validation team realizes there aren’t always work-arounds for these limitations and they allow us to state the Add-In doesn’t support IE 9 in the app description and “fail gracefully” with a kind error message. To check for IE 9 in your Add-In, add the following function to your app.js file within app.initialize:

// App doesn’t support IE 9
app.isBrowserSupported =
 function () {
   var ua = navigator.userAgent, tem,
   M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
   M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, ‘-?’];
   if ((tem = ua.match(/version\/(\d+)/i)) != null) M.splice(1, 1, tem[1]);
var browser = M.join(‘ ‘);
   return browser != ‘MSIE 9’;
};

Now wherever it makes sense in your Add-In to check the browser and display a kind message back to the user (perhaps in Home.js, after app.initialize() is called), add a check and behave accordingly:

if (app.isBrowserSupported()) {
   // All is good, proceed as normal
}
else {
   // Browser not supported, display kind error message and disable functionality
}

General Browser Check

For any other need to check the browser, here’s that same function but a bit more generic so you can modify to fit your needs. I “stole” this from a co-worker so I’m not sure who the original author is. If you do, please leave a comment so I can give them credit.

var ua = navigator.userAgent, tem,
M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
if (/trident/i.test(M[1])) {
    tem =
 /\brv[ :]+(\d+)/g.exec(ua) || [];
    app.showNotification(
 ‘IE ‘ + (tem[1] || ”));
}
if (M[1] === ‘Chrome’) {
    tem = ua.match(/\b(OPR|Edge)\/(\d+)/);
    if (tem !=
 null) return tem.slice(1).join(‘ ‘).replace(‘OPR’, ‘Opera’);
}
M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, ‘-?’];
if ((tem = ua.match(/version\/(\d+)/i)) != null) M.splice(1, 1, tem[1]);
app.showNotification(M.join(‘ ‘));

As you can see, it uses the Office 365 Add-In built-in app.showNotification method to show the result.

Leave a Reply

Your email address will not be published. Required fields are marked *