Opening different HTML in a WKWebview depending on device

1

Hello, I've launched my iPhone AlphaPod app and now I want to add the iPad/Mac version as well.

I have two different sets of Hype HTML/CSS/JS files.

One is for iPhones. The other is for iPad and Mac. (it's complicated to explain why, but basically some of the JS on some of my activities didn't work well with responsive sizing)

I was originally thinking of having a completely different app from the original iPhone app, say AlphaPod iPad, but then users would need to pay separately for both apps.

Can I instead have one single build/app and open different html files depending on which device it is?

I'm even thinking of having THREE different versions opening depending on each device under one single app:

iphone.html
ipad.html
mac.html (without the Augmented Reality component)

Has anyone done this in Xcode? Once again, thanks in advance!

BTW, if anyone is interested in checking out the iPhone app, you can download it here:
http://alphapodapp.com/

1 Like
2

So, I make Widgets (macOS) and Apparatuses (iOS/iPadOS) and it's basically the same HTML/CSS/JavaScript code for both apps — except for when I want to make customizations for a specific platform.

The trick is detecting which platform is in use. Then, you can do all sorts of things to customize the code. As an example, the iOS / iPadOS version loads a specific ios.css file to customize the styling for iPhone / iPad.

So, you just need device detection. While I have pretty much the same web code, the Swift code is split into two Xcode projects. While I'm not happy about the code duplication, this does make it easier to add platform specific customizations.

There's a nasty bug on iPad, which causes the zoom not to function. So, that feature is disabled on iPad. The code looks like this...

    // Zoom Disabled on iPad 😕
    if UIDevice.current.name.range(of:"iPad") != nil {
        self.wv.evaluateJavaScript("""
            document.getElementById("fieldset-zoom").style.display = "none";
            document.getElementById("fieldset-zoom-target").style.display = "none";
        """)
    }

Swift can be used to run JavaScript in the WKWebView. It's a bridge between the two worlds, which unlocks all sorts of cool features... Notifications, Contacts, Music.. There's so much potential here — and I'm just getting started. As an example, I've been considering adding a "Reminders" widget. With Swift, it's not too difficult to plug into that data. But in a web browser, I'm not sure if it's even possible.

So, perhaps that's the next step you're looking for... to bridge the gap between your swift and web code... to improve your platform detection.

Even if you don't want to use Swift, you can detect the platform with just JavaScript.

1 Like
3

THank you. I'll give this a try.

Another option I was thinking is to use css to hide/show one DIV or other depending on device. One Div would have a starter Hype file that would open iPhone, and the other DIV would open iPad. I think it could work as well

4

That's exactly what the sample Swift code is doing... style... display... none.

You don't have to do that though. Specific HTML can be written right into the WKWebview. That's how the "Contacts" widget and the "System Stats" widget works. In regular web mode, it's basically an empty box. Swift is then used to fetch the data and then add it to the box.

And since this is Hype-land, another way to do it could be to load a specific scene in Hype... or even a separate Hype project entirely.

5

Not read all of the above. So the answer may be in there but I would Just let the Xcode/swift side detect the device and then use a post message to the project to call the scenes or indeed the correct hype project html file/folder if you add more than one to the Xcode project