Sample code as provided does not work on Android

[jayesbe]

Describe the bug

Sample code as described on https://shopify.dev/docs/apps/tools/app-bridge/actions/features#cart

Does not work on Android ( Android 13 tested )

To Reproduce

Execute the sample code as provided on an Android (13) device.

If applicable, add screenshots to help explain your problem.

Expected behaviour

The sample code should excute as expected.

Contextual information

Packages and versions

List the relevant packages you’re using, and their versions. For example:

• https://unpkg.com/@shopify/app-bridge@3/umd/index.development.js

Platform

• Android 13 ( XQ-CT62 Sony Xperia 1 IV)
• Shopify POS 8.6.0
• Build 30695

Additional context

This is plain vanilla javascript, no react, no compilation whatsoever.

Sample code as provided on https://shopify.dev/docs/apps/tools/app-bridge/actions/features#cart

// Subscribe to the features update action as early as possible
const unsubscribe = app.subscribe(Features.Action.UPDATE, function () {
  app.featuresAvailable(Group.Cart).then((features) => {
    const hasFetchCart = features.Cart[Cart.Action.FETCH];
    if (hasFetchCart) {
      unsubscribe();
      // Do something
    }
  });
});

Sample code as tested

<script src="https://unpkg.com/@shopify/app-bridge@3/umd/index.development.js"></script>
<script type="text/javascript">
var AppBridge = window['app-bridge'];

var App = AppBridge.createApp({
    apiKey: 'redacted',
    host: 'redacted'
});

var unsubscribe = App.subscribe(AppBridge.actions.Features.Action.UPDATE, function () {
    alert('Do we reach here?'); // nope
    App.featuresAvailable(AppBridge.actions.Group.Cart).then(function(features) {
         alert('Do we get here?'); // nope
         unsubscribe();
    });
});

var features = AppBridge.actions.Features.create(App);

features.dispatch(AppBridge.actions.Features.Action.REQUEST, {
    feature: AppBridge.actions.Group.Cart,
    action: AppBridge.actions.Cart.Action.FETCH
});

</script>

[henrytao-me]

<script src="https://unpkg.com/@shopify/app-bridge@3/umd/index.development.js"></script>
<script type="text/javascript">
var AppBridge = window['app-bridge'];

var App = AppBridge.createApp({
    apiKey: 'redacted',
    host: 'redacted'
});

App.featuresAvailable(AppBridge.actions.Group.Cart).then(function(features) {
    alert('Do we get here?'); // ???
    const hasFetchCart = features.Cart[Cart.Action.FETCH];
    if (hasFetchCart) {
        // Do something
       return;
    };
    var unsubscribe = App.subscribe(AppBridge.actions.Features.Action.UPDATE, function () {
        alert('Do we reach here?'); // ???
        App.featuresAvailable(AppBridge.actions.Group.Cart).then(function(features) {
             alert('Do we get here?'); // ???
             unsubscribe();
        });
    });
});

var features = AppBridge.actions.Features.create(App);

features.dispatch(AppBridge.actions.Features.Action.REQUEST, {
    feature: AppBridge.actions.Group.Cart,
    action: AppBridge.actions.Cart.Action.FETCH
});

</script>

[jayesbe]

@henrytao-me apologies for the late update..

The above is not working on my device.

alert('Do we get here?'); // ???

never fires.

[jayesbe]

<script src="https://unpkg.com/@shopify/app-bridge@3/umd/index.development.js"></script>
<script type="text/javascript">
var AppBridge = window['app-bridge'];

var App = AppBridge.createApp({
    apiKey: 'redacted',
    host: 'redacted'
});

App.featuresAvailable(AppBridge.actions.Group.Cart).then(function(features) {
    alert('First - Do we get here?'); // ???
    const hasFetchCart = features.Cart[Cart.Action.FETCH];
    if (hasFetchCart) {
        // Do something
       return;
    };
    var unsubscribe = App.subscribe(AppBridge.actions.Features.Action.UPDATE, function () {
        alert('Do we reach here?'); // ???
        App.featuresAvailable(AppBridge.actions.Group.Cart).then(function(features) {
             alert('Second - Do we get here?'); // ???
             unsubscribe();
        });
    });
});

var features = AppBridge.actions.Features.create(App);

features.dispatch(AppBridge.actions.Features.Action.REQUEST, {
    feature: AppBridge.actions.Group.Cart,
    action: AppBridge.actions.Cart.Action.FETCH
});

</script>

Tried the above, as is,

The alert

    alert('First - Do we get here?'); // ???

never fires. None of the alerts inside the call ever fire on my Android device.

[jayesbe]

I also tried delaying the dispatch call by a few seconds.. no change.

setTimeout(function() {
    features.dispatch(AppBridge.actions.Features.Action.REQUEST, {
        feature: AppBridge.actions.Group.Cart,
        action: AppBridge.actions.Cart.Action.FETCH
    });
}, 5000);

[henrytao-me]

@jayesbe where do you open embedded app? Is it in the home tiles or other area like order complete, apps list??? Cart is only available in the home tiles area

[jayesbe]

@henrytao-me Please see attached image..

The specifical tile I am testing with is the UbarTab Dev ( Tab Search ) tile which has been updated with the above code.

This is the main Shopify POS screen..

[jacob-whalen]

Good morning @henrytao-me,

I am a user that is trying to use an Android device with UBarTab. Jay has been working on it for a few weeks now and it would be nice if we could get a solution soon. Thank you for looking into this.

[jayesbe]

Hi @henrytao-me it's been a few days just wondering if there is any confirmation of this issue? or if there is any workaround to get this going?

[henrytao-me]

I haven't had time for this last week. It's still in my list.

[jayesbe]

Thank you @henrytao-me.

[henrytao-me]

@jayesbe can I try UbarTab Dev on my shop?

[henrytao-me]

Found the issue, your app initializes App Bridge with a blank host. I sent you a screenshot on partners slack. I close this issue for now but feel free to reopen if providing correct host param but still doesn't work.