Redirect rule for mobile based on useragent?

Support
1

Hi all. Is it possible to use the Netlify redirect rules to target mobile users—perhaps by looking at the user-agent header? I see docs here that let you target headers Redirects and rewrites | Netlify Docs but it seems like they only let you do exact matches?

2

Hi @mrcoles, you can’t currently target specific user agents with Netlify redirects. Typically, people make sites with responsive layouts, use img srcset, etc. Can you tell me more about what you’re trying to accomplish with UA based redirects that you can’t do with these common techniques?

3

Thanks for the response @futuregerald! Yeah, I’m well versed in responsive layouts. At the moment, I’m working on a page that has a rather different looking mobile experience from desktop, so there’s basically mutually exclusive HTML, CSS, and JS between the two (also the desktop one still responsively supports mobile viewport widths, but just looks different from the explicit mobile view). So I thought this could (1) be a way to more cleanly keep the code for each version of the page separate and (2) allow for fewer bytes to be downloaded on each page. Also, I’m aware of the pitfalls of reading a useragent and that seems fine for at least my use-case here.

2 Likes
4

I have similar issue. I want to pre-render different static HTML page versions for mobile and desktop in an SPA, and redirect the user to a correct one on first load to avoid screen flickering.

Ideally I’d like to have a redirect rule based on screen size, not on user agent.

1 Like
5

this is an interesting use case - i think that you should chime in here:

6

Thanks for suggestion, I will do that.

1 Like
7

Hi,
I have a very convoluted use case for user-agent based redirects or user-agent based content. (content proffered to reduce SEO canonical url problems & further redirects)
I’m looking to implement Deploying ES2015+ Code in Production Today — Philip Walton which serves JS assets in both ES5 and ES Module format and let’s the browser decide which one to pick.
But there are few browsers which don’t comply very nicely: GitHub - johnstew/differential-serving: Differential serving exploration for which I would prefer to serve only ES5 code.
So do you think this would be possible with Netlify? Can I use Functions to determine which pre-generated html file to serve?

8

I wouldn’t recommend it for SEO purposes - using a function for every request will add some additional time to serving each request, which might reduce the SEO value :stuck_out_tongue:

9

I’m also looking for a solution like this. I have a react SPA that is client side rendered. There are different user profile pages. In an SPA that uses client side rendering, if you share these profiles links to Twitter, twitter will use the static meta tags that were built into the application so the social media card shared on twitter will look the same no matter what page you share. But I want the social media card to be different per page. I was wondering if I could redirect the twitter bot (user-agent=Twitterbot/1.0) that scrapes for the social sharing meta data to an endpoint on my backend node server (heroku) that could send an html page with the customized meta data.

10

There’s still no way to do this natively using Netlify Redirects. However, a feature called Edge Handlers is in works and once it’s live, that could be used in this case.

1 Like