App Bridge loading.dispatch() issue with JQuery app

Retired Boards Appdev Tools
1

I have a simple admin app using App Bridge. I am not using React, just a simple jQuery app. I can’t seem to get the loading bar to initialize properly.

I do not get any console errors throughout, so it seems like app is created without issue. The docs really focus on React so I’m sure I’m just overlooking a small detail.

Here is my code:

var AppBridge = window['app-bridge']
var actions = AppBridge.actions
var createApp = AppBridge.default
var app = createApp({
  apiKey: apiKey,
  shopOrigin: shop,
})
var loading = actions.Loading

app.dispatch(loading.Action.START)
2

Hi there, sorry to hear that App Bridge isn’t providing helpful console errors to help you debug! Are you using the CDN link like this?

https://unpkg.com/@shopify/app-bridge@1.5.3/umd/index.js

If so, could you please try including a debug mode of the library to see if that gives you any useful information?

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

Thanks that got me more info:

action: {action: "STOP", message: "`type_error_expected_object` thrown for value: `STOP`", type: "APP::ERROR::INVALID_ACTION"}
message: "APP::ERROR::INVALID_ACTION"
name: "AppBridgeError"
type: "APP::ERROR::INVALID_ACTION"
stack: "AppBridgeError: APP::ERROR::INVALID_ACTION"

I must be instantiating var loading = actions.Loading incorrectly? Any chance your docs spell things out properly for an app that does not use React?

4

I got this to work with the following code:

var AppBridge = window['app-bridge']
var createApp = AppBridge.createApp
var actions = AppBridge.actions
var loading = actions.Loading

var redirectUri = myAppURL
var permissionUrl = '/oauth/authorize?client_id=' + apiKey + '&scope=read_products,read_content&redirect_uri=' + redirectUri

// If the current window is the 'parent', change the URL by setting location.href
if (window.top == window.self) {
  window.location.assign('https://' + shop + '/admin' + permissionUrl)
} else {
  var app = createApp({
    apiKey: apiKey,
    shopOrigin: shop,
  })
}

loading.create(app).dispatch(loading.Action.START)
setTimeout(function({
  loading.create(app).dispatch(loading.Action.STOP)
},200)
5

Thank you for sharing your solution! I’m unsure why additional checks are required to get things working. Out of curiosity, is your app outside the Shopify Admin iframe when it meets the first condition?

if (window.top == window.self)