App Bridge loading.dispatch() issue with JQuery app

[wb1]

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)

[hannachen]

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/[email protected]/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/[email protected]/umd/index.development.js 

[wb1]

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?

[wb1 · Accepted solution]

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)

[hannachen]

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)