Adapt SPFx components to SharePoint Mobile APP and Microsoft Teams environments

By João Ferreira Dec 2, 2018 Development, Office 365 3 Comments

Modern SharePoint sites rendered on SharePoint Mobile App or Microsoft Teams are different than when displayed in the browser.

Native components are removed from the page or replaced by native APP options. If you are building extensions or web parts for the modern SharePoint you may want to test them in both environments to make sure they are not overlapping with native apps features.

While the framework does not provide context variables to let developers know where the component is running, it needs to be validated through the user agent.

SharePoint Mobile APP User Agents

SharePoint App – Android

Mozilla/5.0 (Linux; Android 9; Nokia 6.1 Plus Build/PPR1.18061.011; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/70.0.3538.110 Mobile Safari/537.36

Note: The user agent on Android web views includes the word wv.

SharePoint App – iOS

Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372

Mozilla/5.0 (iPad; CPU OS 11_0 like Mac OS X) AppleWebKit/604.1.34 (KHTML, like Gecko) Version/11.0 Mobile/15A5341f

Note: The user agent on iOS web views does not include the word Safari.

Microsoft Teams User Agents

Microsoft Teams – Windows

Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Teams/1.1.00.29068 Chrome/61.0.3163.100 Electron/2.0.10

Microsoft Teams – MAC OS

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Teams/1.1.00.29053 Chrome/61.0.3163.100 Electron/2.0.10 Safari/537.36

The user agent will be always different between devices but there are common parts that can be used to identify the application where the page is being rendered.

Highlighted in bold are the parts of the user agent string that will be used to target Microsoft Teams and the SharePoint App.

On your SPFx component you can use the code below to target different behaviors depending of the environment where your code is being executed.

if (navigator.userAgent.indexOf('Linux') != -1 && navigator.userAgent.indexOf('wv') != -1) {
	console.log("SharePoint APP - Android");
}else if (navigator.userAgent.indexOf('iPhone') != -1 && navigator.userAgent.indexOf('Safari') == -1) {
	console.log("SharePoint APP - iOS iphone");
}else if (navigator.userAgent.indexOf('iPad') != -1 && navigator.userAgent.indexOf('Safari') == -1) {	
	console.log("SharePoint APP - iOS iPad");
}else if (navigator.userAgent.indexOf('iPhone') != -1 && navigator.userAgent.indexOf('Safari') == -1) {
	console.log("SharePoint APP - iOS Iphone");
}else if (navigator.userAgent.indexOf('Teams') != -1 && navigator.userAgent.indexOf('Electron') != -1) {
	console.log("Microsoft Teams - Desktop APP");
}else{
	console.log("Browser");
}

If you found another approach to overcome this limitation let me know in the comment section.

Designed by Freepik