from Hacker News

Trying to Recreate iOS on the Web

by plurby on 12/18/24, 11:11 AM with 91 comments

by btown on 12/18/24, 3:38 PM
https://hn.algolia.com/?dateRange=all&page=0&prefix=false&qu... is a parallel saga for mimicking the macOS touchpad behavior on Linux; it's been a full 8 years in the making. It's so much more than acceleration settings!
I really appreciate, and will buy a beverage of choice anytime for, anyone who tries to go down these paths, including OP, whether with web or desktop technology.
Painstakingly mimicking, then eventually improving on, Apple's interactivity/motion design is IMHO one of those things that could make open-source desktops a superior option to both Windows and Apple from a mainstream user viewpoint, and those possibilities should be cherished.
by coder543 on 12/18/24, 1:41 PM
Thinking about what feels different here, there are a couple of things that could be fun to implement:
- On iOS, opening and closing an app also scales and blurs/unblurs the wallpaper at the same time that it’s animating the app entering/exiting the foreground.
- Also, years ago, Apple added a very subtle 3D effect to the Home Screen. Essentially, when you’re looking at the Home Screen, as you tilt the phone, the icons and widgets move a few pixels in the direction of the tilt, which makes it feel like they’re popping out of the screen a little. To study the effect in detail, you can just look at the edge of an icon or the text below an icon and tilt the screen around and notice how it moves relative to the background image. It’s meant to be a very subtle effect, not some garishly dramatic effect.
by yesimahuman on 12/18/24, 1:11 PM
Really nice, and I say that as someone that built a quite popular mobile web framework that duplicated a lot of iOS UI (Ionic). One thing I noticed is the swipe gestures aren’t working. This is all very doable on the web which many people don’t believe. It’s pretty wild what the web platform is capable of, the gap is absolutely with web devs who don’t know how to put the many modern APIs and capabilities into practice.
by jsheard on 12/18/24, 12:14 PM
Remember when optimizing sites for mobile was new and everyones first impulse was to unironically turn their site into a fake iOS app? Those were the days.
by klausa on 12/18/24, 3:10 PM
My main takeaways from this are:
— wow there sure are a lot of subleties in iOS animations and interactions that seem very _very_ hard to replicate
— why is my brain _so good_ and noticing those little things?! I shouldn't be able to notice that the battery indicator is too thick; that the squircles are not continnous, or that the curves on all animations are just ever so slightly off.
by thih9 on 12/18/24, 2:15 PM
Loosely related, there are frameworks for recreating native UI for mobile apps written in JS, e.g: https://framework7.io/
> free and open source framework to develop mobile, desktop or web apps with native look and feel
by nmstoker on 12/18/24, 1:13 PM
Authentic in so far as there's no back button and using it in Android backs you out of the whole site!
by jaegerpicker on 12/18/24, 4:24 PM
Interesting bug: if you swipe on screen with the mouse button pressed and slide of screen to release the mouse button the on screen swipe action stays attached to the mouse cursor. Only sort of a bug because it's only because it runs in a web page vs on an actual phone. Still would be interested in how to fix that in general.
Overall it looks cool, I'm a native mobile app guy so I'm always skeptical about mobile web. This doesn't change that for me but I can see growth in the web platform for mobile.
by redbell on 12/18/24, 5:42 PM
From a design perspective, this is really impressive. However, I noticed a few basic functionalities seem to be missing—at least for me—like the ability to return to the home screen from an app.
On a related note, Try Galaxy (https://news.ycombinator.com/item?id=35886033) is another fascinating project. It offers a web-based One UI clone, and when installed as a PWA, the experience becomes even more seamless.
Speaking of web-based UI clones, I can’t resist giving an honorable mention to Puter (https://news.ycombinator.com/item?id=33838179) and DaedalOS (https://news.ycombinator.com/item?id=38830132). I believe they are exceptional projects that deserve recognition.
by roblh on 12/18/24, 4:37 PM
There's a really specific behaviour that iOS has with its collapsible top bars that I've been trying off and on to nail with CSS for ages as a little puzzle, but for some reason it's always not quite right. As you scroll down or up, the bar remains perfectly in place and only starts moving up once it's fully revealed or down once it's fully gone. There should be a way to do it with `position: sticky` but whether you use some javascript or not, it's always slightly jerky or wrong, especially on safari. Apple really does pay attention to these little things in ways others don't.
And then they go and release that recent photos app update and make me seriously want to leave their ecosystem completely.
by Jackknife9 on 12/18/24, 1:29 PM
They really missed the opportunity to show a gorilla or something when you flip the camera.
by tgma on 12/18/24, 6:50 PM
We have come full circle. Kids these days forget that the official application framework for iPhone OS in 2007 was a bunch of HTML/CSS/images that mimicked iPhone OS UI as a web application (basically poor man's PWA).
The jailbreak community reverse-engineered iPhone headers and developed an unofficial toolchain based on llvm-gcc right away to build iPhone applications and they had an app store which still lives as Cydia (saurik et al) before Steve believed in that. Apple only threw the towel half a year later with an official beta SDK after the product-market-fit was so strong that they had no choice.
Now we recreate the whole OS in browser.
by jballer on 12/18/24, 6:33 PM
Does anyone else remember the online User’s Manual for early iPhones? It was web-based, but had a full JavaScript reimplementation of UINavigationController, UIScrollView, and UITableView.
I always suspected it was part of some bigger project that never panned out (maybe just prototyping?).
by deanc on 12/18/24, 1:27 PM
I once did something like this for Nokia when their phones moved to Windows Phone. The devil is in the details, and 90% of the time was spent mimicking the animations and transitions.
by reddalo on 12/18/24, 5:24 PM
It's impressive, but it's completely broken on Macs with a normal mouse connected and Firefox, because scrollbars appear everywhere and they break the layout.
by wruza on 12/18/24, 4:48 PM
Why does it stutter and flash black screen first time you open an “app” or even switch tabs in e.g. clock app? Does it use react as a renderer?
by oefrha on 12/18/24, 3:19 PM
Nice, the most jarring difference to me is when you scroll up in Photos or Settings, the topmost area isn’t blurred.
by mentalgear on 12/18/24, 2:20 PM
Well done! This reminds me of my own recreation (11 years ago!) of the iOS 7 homescreen as a webapp! :P
by EugeneOZ on 12/18/24, 3:54 PM
Font size in inputs should be strictly 1rem / 16px. Otherwise, they’ll be zoomed in Safari iOS.
by hk1337 on 12/18/24, 2:30 PM
It even replicates how annoying it is to swipe with a mouse.
by byyoung3 on 12/18/24, 1:37 PM
looks good. Main thing is the swipe gestures need some work
by kookamamie on 12/18/24, 12:11 PM
The icons look blurry.
by maxcruer on 12/18/24, 3:21 PM
at least the calculator should work...
by zghst on 12/18/24, 11:37 PM
Impressive!
by davidavidavid on 12/18/24, 3:54 PM
com
by solarkraft on 12/18/24, 2:26 PM
I thought this would be about the interactions that are so charactetistically iOS and are hard to recreate on the web.
Well, it seems that the things that are hard to recreate have been omitted, making this not all that interesting.
On that note: It would be interesting to see something that actually does this.
by codefeenix on 12/18/24, 1:55 PM
Here I was expecting to see emulated Cisco software