Consume app_id on app registration + pass /w user-agent on request

- Let's ensure that we know which app made a given request by encoding within
  the user-agent
- This will help /w ascertaining who is making a given request

lib/client.js

@@ -333,6 +333,7 @@ export default class Client {
     this._metadata = null
     this._context = options.context || null
     this._idleState = null
+    this.appId = null
     this.ready = false
 
     if (!isOriginValid(this._origin)) {
@@ -350,6 +351,7 @@ export default class Client {
 
     this.on('app.registered', (data) => {
       this.ready = true
+      this.appId = data.appId
       this._metadata = data.metadata
       this._context = data.context
       this._idleState = new IdleState()

lib/utils.js

@@ -3,11 +3,13 @@ import pkgJson from '../package.json'
 
 const Promise = window.Promise || NativePromise
 
-export function addUserAgent (headers) {
+export function addUserAgent (headers, appId) {
   const originalUserAgent = headers && headers['User-Agent'] ? headers['User-Agent'] : ''
+  const zafSdkUserAgentString = `zendesk_app_framework_sdk/sdk_version:${pkgJson.version}/app_id:${appId}`
+  const userAgent = originalUserAgent ? `${originalUserAgent} ${zafSdkUserAgentString}` : zafSdkUserAgentString
   return {
     ...headers,
-    'User-Agent': originalUserAgent ? `${originalUserAgent} zendesk_app_framework_sdk/${pkgJson.version}` : `zendesk_app_framework_sdk/${pkgJson.version}`
+    'User-Agent': userAgent
   }
 }