How to handle a full browser reload

[jagthedrummer]

Overview

What's the recommended way of handling the case where a user hits the "reload" button on their browser? When this happens the host param is missing (which is provided by Shopify when someone first navigates to the app) and then the call to createApp (from @shopify/app-bridge fails) with a complaint about host missing.

11:04:50.219 Uncaught (in promise) 
Object { name: "AppBridgeError", message: "APP::ERROR::INVALID_CONFIG: host must be provided", stack: "AppBridgeError@https://ga.jspm.io/npm:@shopify/[email protected]/actions/Error/index.js:1:1675\nfromAction@https://ga.jspm.io/npm:@shopify/[email protected]/actions/Error/index.js:1:1844\nvalidateAndDecodeConfig@https://ga.jspm.io/npm:@shopify/[email protected]/index.js:5:4112\ncreateClientApp$1/<@https://ga.jspm.io/npm:@shopify/[email protected]/index.js:5:2733\ncreateApp$1@https://ga.jspm.io/npm:@shopify/[email protected]/index.js:12:89\ninitShopifyApp@https://crowdfunder-octolabs.ngrok.io/assets/superliner/shopify_app-4337f031.js:187:16\ninitPage@https://crowdfunder-octolabs.ngrok.io/assets/superliner/shopify_app-4337f031.js:243:9\n@https://crowdfunder-octolabs.ngrok.io/assets/superliner/shopify_app-4337f031.js:258:3\n", action: undefined, type: "APP::ERROR::INVALID_CONFIG" }
shopify_app-4337f031.js:243:9

Possibly related to: #1768

Possibly moot if a splash page really isn't needed anymore: #1946

[jagthedrummer]

After poking at this I discovered that the seemingly indecipherable host parameter is actually a Base64 encoded representation of the full URL (without protocol) to the admin for that shop. Something like admin.shopify.com/store/my-test-shop.

So I updated the shopify-app-init block that comes from here:

shopify_app/lib/generators/shopify_app/install/templates/embedded_app.html.erb

Lines 31 to 36 in ef63ee3

	<%= content_tag(:div, nil, id: 'shopify-app-init', data: {
	api_key: ShopifyApp.configuration.api_key,
	shop_origin: @shop_origin || (@current_shopify_session.shop if @current_shopify_session),
	host: @host,
	debug: Rails.env.development?
	} ) %>

To look like this:

    <%
      shop_origin = @shop_origin || (@current_shopify_session.shop if @current_shopify_session)
      fallback_host = Base64.strict_encode64("admin.shopify.com/store/#{shop_origin.split(".").first}")
    %>
    <%= content_tag(:div, nil, id: 'shopify-app-init', data: {
      api_key: ShopifyApp.configuration.api_key,
      shop_origin: shop_origin,
      host: @host || fallback_host,
      debug: Rails.env.development?
    } ) %>

And that made it so that hitting the reload button on the browser works correctly and leaves the app in a state where further navigation works correctly.

Can someone from Shopify comment about whether this is safe? And if not, could you make an alternate recommendation? And if so, maybe you could update the gem?