Adding support for Safari in our BigCommerce apps

We found that our #BigCommerce apps couldn’t be opened in Safari because of third-party cookies being blocked.

Today we’re implementing a workaround to detect when cookies are blocked and provide the ability to open the app in a new tab outside of BigCommerce.

Longer-term, I’m sure the BC team will provide additional guidance on how apps should best integrate in a third-party cookie-less world. In the meantime, this seemed like an appropriate first step.

I’m keen to hear if people have solved this a better way!

Transcript

Unfortunately, this is the experience when you currently log into Category Merchandiser within the BigCommerce admin in Safari. Now, this is due to third party cookies being blocked in that browser. They’re also blocked in private browsing mode of Chrome and Firefox and given the whole cookie situation that is probably only going to get worse in the longer term.

I believe it’s something that BigCommerce will be working on to work out another way of supporting apps in the admin area. But it’s just kind of the nature of the beast that apps currently are an iframe within the BigCommerce admin. So immediately they become, anything in that frame becomes a third party, you know, for good reason that is then blocked.

So the downside of that being that can’t currently log customers in, in those situations. That’s something I’ve known for a while, but it hasn’t caused, you know, an issue or sufficient of an issue. But it came up again recently. So I thought, well, what, what’s the smallest thing I could do to, to provide an experience to those customers that wish to use those browsers or or in those modes.

And so what I have now done is when you load an app, open staging here, we detect whether or not you’ve kind of hit that situation where third party cookies have been blocked and provide the ability to open up into a new tab. But previously apps have always been available just in the BigCommerce admin area.

Now, for those that where that doesn’t quite work, we provide a button to open up and go to the app directly. So you’re in a first party situation again, and you can be on your merry way dragging and dropping your products. So that’s what I’m hopefully going to release later today.

From a coding perspective if you’re interested in that kind of thing, essentially I have a big if statement in my app.

Where I initially do a check. So on load, have I written a test cookie yet? If I haven’t, let’s go and try and create one. Then once I have created it, I then try and test to read it. If I can’t, then I can be pretty confident that cookies are being blocked. You know, it’s just a wider sort of are cookies supported test.

And then once I have that information and I know it’s in an iframe just to kind of be doubly sure. I can then use that to decide whether or not to show the app or show my, my message saying, you know, this isn’t supported and we’ll open the app up in a new window and log you in there. So that’s how I’ve gone about it.

I feel like that was a worthy time investment to support the Safari browser.

Tom Robertshaw
Stay up to date with Hypa news and features