feat(Platform): add $q.platform.userAgent

Author: rstoenescu

ui/dev/components/other/platform-detection.vue

@@ -5,6 +5,10 @@
         Based on the device you are using to view this, Quasar detects the following:
       </p>
 
+      <p>
+        User agent: "<strong>{{ $q.platform.userAgent }}</strong>"
+      </p>
+
       <table class="q-table striped">
         <thead>
           <tr>

ui/src/plugins/Platform.js

@@ -31,6 +31,10 @@ function getMatch (userAgent, platformMatch) {
   }
 }
 
+function getClientUserAgent () {
+  return (navigator.userAgent || navigator.vendor || window.opera).toLowerCase()
+}
+
 function getPlatformMatch (userAgent) {
   return /(ipad)/.exec(userAgent) ||
     /(ipod)/.exec(userAgent) ||
@@ -50,12 +54,10 @@ function getPlatformMatch (userAgent) {
 }
 
 function getPlatform (userAgent) {
-  userAgent = (userAgent || navigator.userAgent || navigator.vendor || window.opera).toLowerCase()
-
   const
     platformMatch = getPlatformMatch(userAgent),
     matched = getMatch(userAgent, platformMatch),
-    browser = { userAgent }
+    browser = {}
 
   if (matched.browser) {
     browser[matched.browser] = true
@@ -239,12 +241,20 @@ export default {
   within: { iframe: false },
 
   parseSSR (/* ssrContext */ ssr) {
-    return ssr ? {
-      is: getPlatform(ssr.req.headers['user-agent'] || ssr.req.headers['User-Agent']),
-      has: this.has,
-      within: this.within
-    } : {
-      is: getPlatform(),
+    if (ssr) {
+      const userAgent = (ssr.req.headers['user-agent'] || ssr.req.headers['User-Agent'] || '').toLowerCase()
+      return {
+        userAgent,
+        is: getPlatform(userAgent),
+        has: this.has,
+        within: this.within
+      }
+    }
+
+    const userAgent = getClientUserAgent()
+    return {
+      userAgent,
+      is: getPlatform(userAgent),
       ...getClientProperties()
     }
   },
@@ -257,7 +267,8 @@ export default {
       return
     }
 
-    this.is = getPlatform()
+    this.userAgent = getClientUserAgent()
+    this.is = getPlatform(this.userAgent)
 
     if (fromSSR === true) {
       queues.takeover.push(q => {

ui/src/plugins/Platform.json

@@ -2,6 +2,14 @@
   "injection": "$q.platform",
 
   "props": {
+    "userAgent": {
+      "type": "String",
+      "desc": "Client browser User Agent",
+      "examples": [
+        "mozilla/5.0 (macintosh; intel mac os x 10_14_5) applewebkit/537.36 (khtml, like gecko) chrome/75.0.3770.100 safari/537.36"
+      ]
+    },
+
     "is": {
       "type": "Object",
       "desc": "Client browser details (property names depend on browser)",