Lightning Browsing Device 정보 얻는 방법

Lightning mainly focuses on the user experience on the web and mobile interfaces. So, most of the scenarios we should need to know the information of the browser to align the design with respect to the device browser.  In this post, I would like to discuss, how we can detect the browsing device information in a lightning component.

 

To address this issue, we can use $Browser global value provider.  The $Browser global value provider returns information about the hardware and operating system of the browser accessing the application.

• {!$Browser.formFactor} 
  • Returns a FormFactor enum value based on the type of hardware the browser is running on.
    • DESKTOP for a desktop client
    • PHONE for a phone including a mobile phone with a browser and a smartphone
    • TABLET for a tablet client (for which isTablet returns true)
• {!$Browser.isTablet}
  • Return true if the browser is running on an iPad or a tablet with Android 2.2 or later otherwise false
• {!$Browser.isPhone}
  • Return true if the browser is running on a phone including a mobile phone with a browser and a smartphone otherwise false
• {!$Browser.isAndroid}
  • Return true if the browser is running on an android device, otherwise false
• {!$Browser.isIOS}
  • Return true if the browser is running on an IOS device, otherwise false
• {!$Browser.isIPhone}
  • Return true if the browser is running on an iPhone, otherwise false
• {!$Browser.isWindowsPhone}
  • Return true if the browser is running on a windows phone, otherwise false
• {!$Browser.isIPad}
  • Return true if the browser is running on an iPad, otherwise false

Example

This example shows usage of the $Browser global value provider.

Here, I have created a lightning component (DetectMyDevice.cmp)  which is invoked from the lightning app named DetectMyDeviceApp.app.  The lightning component checks different conditions based on $Browser global value provider and displays the browsing device details.

Please see the code comments for more details.

 

	<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
	<lightning:card title="Detect Your Device" class="slds-m-around_large">
	<aura:set attribute="actions">
	<lightning:button label="Browser Info" onclick="{!c.browse}" />
	</aura:set>
	<div class="slds-p-horizontal_medium">
	<aura:if isTrue="{!$Browser.formFactor == 'DESKTOP'}">
	<p>You are using Desktop <lightning:icon iconName="utility:desktop" alternativeText="Desktop!" variant="error"/> Browser </p>
	</aura:if>
	<aura:if isTrue="{!$Browser.formFactor == 'PHONE' || $Browser.isPhone}">
	<p>You are using Desktop <lightning:icon iconName="utility:phone_portrait" alternativeText="Phone!" variant="error"/> Browser </p>
	</aura:if>
	<aura:if isTrue="{!$Browser.formFactor == 'TABLET ' || $Browser.isTablet}">
	<p>You are using Tablet <lightning:icon iconName="utility:tablet_portrait" alternativeText="Tablet!" variant="error"/> Browser </p>
	</aura:if>
	<aura:if isTrue="{!$Browser.isIPad || $Browser.isTablet}">
	<p>You are using IPad <lightning:icon iconName="utility:tablet_portrait" alternativeText="Tablet!" variant="error"/> Browser </p>
	</aura:if>
	<aura:if isTrue="{!$Browser.isIPhone}">
	<p>You are using IPhone <lightning:icon iconName="utility:phone_portrait" alternativeText="Tablet!" variant="error"/> Browser </p>
	</aura:if>
	<aura:if isTrue="{!$Browser.isAndroid || $Browser.isPhone}">
	<p>You are using Android phone <lightning:icon iconName="utility:phone_portrait" alternativeText="Tablet!" variant="error"/> Browser </p>
	</aura:if>
	</div>
	</lightning:card>
	</aura:component>

 

 

	<aura:application extends="force:slds" >
	<c:DetectMyDevice />
	</aura:application>

 

	({
	browse : function(component, event, helper) {
	//$A – global aura namespace, get method returns the value referenced
	var device = $A.get("$Browser.formFactor");
	alert("You are using a " + device);
	}
	})

DetectMyDeviceController.js