Is there any workaround to programmatic linking being blocked by Mobile Safari?

29 views Asked by At

In our app, our mobile home page features a banner/slider that automatically cycles between three banners. The banners can have one of three actions associated (determined by admins), two of which are in-app actions, and the third of which is an external link.

The external link is currently being caught by Safari's pop-up blocker (on my phone I at least get an alert prompting me to allow or block, but many users are not even seeing that, so it looks like nothing is happening).

There's almost no way I can think of to retain the banner functionality and include a direct link action, since it will prevent the other two action types from working. What I'm looking for is some kind of workaround to either make Safari think this is a direct user action, or to bypass the popup blocker. Here's the condensed code I'm working with:

  const { open, launchModal, closeModal } = useModal(false);
  const [banner, setBanner] = useState({});

  const handleBannerClick = async (e, clickedBanner) => {
    e.stopPropagation();
    if (!isEmpty(clickedBanner)) {
      setBanner(clickedBanner);
    }
  };

 const openWindow =  url => {
    window.open(url, '_blank').focus().then(result => {
        setBanner({})
      })
  };

 // Determine which action to take based on which action type           specified on the clicked banner
  useEffect(() => {
    if (banner?.actionType === 'link' && banner?.link) {
      // Open link in new tab
      openWindow(banner.link);
    } else if (banner?.actionType === 'addItem') {
      // Other action type
    } else if (banner?.actionType === 'showItems') {
      // Other action type
    }
  }, [banner]);

const banners = activeBanners
    .sort((a, b) => a.activeIndex - b.activeIndex)
    .map(banner => (
      <Banner
        key={banner._id}
        color={banner.color}
        title={banner.title}
        textBody={banner.textBody}
        imageUrl={banner.imageUrl}
        handleClick={e => handleBannerClick(e, banner)}
        data-test="explore-banner"
      />
    ));

  return (
    <>
      <Slider {...sliderSettings}>{banners}</Slider>
      <ModalContainer
        // related to other action types
      />
    </>
  );
};
0

There are 0 answers