Redirect to PWA if on Mobile

So my plan is to have two projects .... desktop and mobile. The desktop app is just to complex with large tables to display efficiently on mobile. So I found the following Javascript code to do a redirect. Is this a viable way to approach this?

// JavaScript Redirect based on user device
function redirectToDifferentDomain() {
    // Get the user agent string
    var userAgent = navigator.userAgent;

    // Check if the user agent contains a string indicating a mobile device
    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent)) {
        // Redirect to the mobile domain
        window.location.href = "https://mobile.example.com";
    } else {
        // Redirect to the desktop domain
        window.location.href = "https://desktop.example.com";
    }
}

// Call the function when the page loads
redirectToDifferentDomain();

If i understand you logic this would be loaded on each version when page loads?

You would need to prevent the redirect if on the correct domain or you could end up in an endless loop of load then redirect as page refreshes.

I would prefer (mainly as a user) to get an alert if in mobile, to encourage me that "please visit our mobile friendly website by clicking here... " and by clicking the link to be redirected
*and probably a cookie remember that choice

2 Likes

Nope, I would just have that script on the log in page. It's a client dashboard so there is no front facing pages.

So if they are logged on via cookie but go direct to a content page say from a bookmark?

Thanks @famousmag , that is way beyond my capabilities. And the desktop project is totally un-usable on mobile so I'd likely not want to give them a choice?

I would really think twice about having two projects. Sounds like a bunch of extra work that is probably not necessary.

If a page is too complex for mobile, just display a message instructing the user to open the site on a desktop computer.

I'm not worried about that. The user login has a short session and almost always requires a log in. But maybe I should use both, the redirect and the alert. No idea how I would do the alert though. :frowning:

Or use conditional regions to show different type of layout for mobile, instead of tables :slight_smile:

3 Likes

Maybe i didn't understand correctly...

I was talking about the same content but structured in a more friendly mobile layout...

The idea is to replace our current native app. We need mobile for this as the majority of our clients do not have access to desktop computers. We deal mainly with un-employed job seekers that don't have the luxury. Barely have mobile devices that work.

Well sure, that is ideal, but I'm assuming Brad knows that. :man_shrugging:

1 Like

Could be easier to look at using a flow. The device running the app is available via browser.userAgent then using bootbox to present the choice of redirect or not then just browser.goto() to redirect

No custom .js needed

I don't know why this is complicated.

1 project, with mobile responsive views. For complicated "desktop" areas, either display a message or give a better view.

PWA from progressier handles all the install prompts and push notification prompts. So when they open outside of PWA, it prompts to install it.

If it's really only the complex tables, i would just do it using conditional regions and show some kind of list-group instead of a table for mobile:

1 Like

Maybe some sample screenshots of my desktop project will help. And this doesn't even show all data tables possible. Also the mobile app has a couple small features that are not on the desktop app such as a scannable barcode to check clients in when they come into the office. (All sample data)

So either way (1 project or 2) it would take a complete rebuild of a new project.

But with 1 project, the ongoing maintenance is quite less. I would take my medicine now, and refactor things so they work on mobile. What you are showing is absolutely doable. You already have sections that can simply stack on top of each other, then just work those inside tables.

2 Likes

That's the biggest issue .... It is way beyond my capabilities to show large tables in mobile view. :frowning:

I will try and post some screenshots from our mobile app.

Then don't use tables! Like Teodor points out, just have a conditional region and use something other than tables.

You know what?
This post reminded a question I had from the first time I wathed John's project @scalaris demonstation...

"How is this project handled on smaller devices (tables, mobiles)?"