Search code examples
f#websharper

Show mobile page in WebSharper

I have a WebSharper website, and I want it to have a different UI when on a mobile device. I would like the server to respond with different HTML depending on if the user is on a mobile device or not. I can see how to check if the user is on a mobile device in ASP.NET but I can't tell how to port this over to WebSharper.

Solution

  • The Context object in WebSharper has an Environment dictionary which contains the original context. You can reach Request.Browser.IsMobileDevice through that. Using the UI.Next Client-Server template you could do somethng like this:

    module Site

open WebSharper
open WebSharper.Sitelets
open WebSharper.UI.Next
open WebSharper.UI.Next.Server

type EndPoint =
    | [<EndPoint "/">] Home

open WebSharper.UI.Next.Html

type Page = { Desktop: Doc; Mobile: Doc }
let mkPage desktop mobile = { Desktop = desktop; Mobile = mobile }

let HomePage =
    mkPage
    <| h1 [text "Desktop page!"]
    <| h1 [text "Mobile page!"]

let PickPage (ctx : Context<_>) page =
    let context = ctx.Environment.["HttpContext"] :?> System.Web.HttpContextWrapper
    if context.Request.Browser.IsMobileDevice then page.Mobile
    else page.Desktop
    |> Content.Page

[<Website>]
let Main =
    Application.MultiPage (fun ctx endpoint ->
        match endpoint with
        | EndPoint.Home -> PickPage ctx HomePage
    )