App Bridge Pos app.getState('pos.device') is returning the same device across multiple devices

Highlighted
Explorer
101 7 14

I am testing my POS embedded app on both an Android device and iPhone. When I run the below snippet on both devices running Shopify POS, it returns iPhone and the same serial number. The Android one is running classic POS and the iPhone is running the new Shopify POS. I tried it with the subscribe as well and am getting the same result. What am I doing wrong? Thank you.

 

https://shopify.dev/tools/app-bridge/actions/pos

 

          app.getState('pos.device').then((device) => {
            var toastOptions = {
            message: device.name + ', ' + device.serialNumber,
            duration: 5000,
            isError: true
          };
          var toastError = Toast.create(app, toastOptions);
          toastError.dispatch(Toast.Action.SHOW);
});               

 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
56 21 6

Hi @policenauts1 

 

Can you clarify what this means `it returns iPhone and the same serial number.`? Between POS Android and POS iOS which one is wrong? 

0 Likes
Highlighted
Explorer
101 7 14

Hi @Henry_Tao, both my Android Pixel 1 (running Android 10 and Shopify POS classic) and iPhone (running new POS) return:

device.name = 'iPhone'

device.serialNumber = {serial number associated with iPhone}

Thank you for your help!

0 Likes
Highlighted
Shopify Staff
Shopify Staff
56 21 6

Thanks for finding this issue. The fix is up soon for POS Android. 

0 Likes
Highlighted
Explorer
101 7 14

@Henry_Tao any update on this? I was hoping to use this to determine if a user is on Shopify POS vs. web and it's simply not working. 

 

const unsubscribe = app.subscribe(function() {
  app.getState('pos').then(function(pos) {
    if (!pos) {
      return;
    }
    unsubscribe();
  });
});

 

This is just broken. Not only does it return 'iPhone' as device.name for Android, but on iOS this piece of code just never executes. If I remove the subscribe, it just returns undefined for iOS. 

0 Likes
Highlighted
Explorer
101 7 14

I was able to achieve it with this workaround using the object keys (thank goodness), but I don't understand why this just doesn't work as expected. 

      app.getState().then((data) => {
      if (!('device' in data.pos)) {
        // this is a web browser
      }
      else {
        // this is shopify POS
      }
    });
0 Likes
Highlighted
Explorer
101 7 14

Actually I spoke too soon - the above snippet works for distinguishing iOS vs. web, but it doesn't work for Android since Android needs to be wrapped in the subscribe (it returns null otherwise for pos). So what I did was I created a boolean flag that will flip after the Android subscribe runs (which will detect that it's POS on Android). In my case, if it's web I do a GET request from my server prior to loading any UI elements, and by the time the GET request completes the boolean flag will have flipped if it happens to be Android which will stop the web UI elements from loading. A bit risky, but so far it seems to be working. 

0 Likes