I recently stumbled across "shoelace", which at a glance seems like an example of what the article is hoping for. It's a thoughtfully designed library of UI web components.
replies(3):
- I can't swipe left/right between the tabs
- I can't pull the menu out from the left by swiping the entire page right
Two of the most basic touch navigation metaphors aren't supported. To be fair, Polymer and MDL don't support the above either. But this is why HTML5 apps are still not up to par with native apps. I really want to see a web component library with full touch functionality -- tab swiping, pinch zoom on images, pull to refresh on lists and card lists.
> - I can't swipe left/right between the tabs
> - I can't pull the menu out from the left by swiping the entire page right
Most native apps don't do either of those two things either... at least on iOS. I can't speak to how Android apps behave these days.
Maybe these are your favorite interaction modes, but it really has nothing to do with whether X is "up to par with native apps."
I'm certain these things could be implemented. Clearly they weren't considered desirable by the authors of Shoelace.
What really holds HTML5 apps back is the fact that Apple consistently drags their heels on adopting push notifications for web. It only has to be available for apps that have been added to the home screen, so all the users who complain about getting nagged for notifications as they browse the web would still be perfectly happy not to be getting nagged. Without notification support, the number of companies who seriously invest in HTML5 apps (instead of native apps) is nearly zero, which really hinders investment in HTML5 frameworks targeting mobile app development (not frameworks just targeting mobile website development).
Clearly, Apple benefits from pushing app developers into the App Store where they can require those developers to give them a cut of the profits.
Pulling a menu out from the left certainly cannot be implemented on iOS Safari Mobile, because it doesn’t support https://caniuse.com/css-overscroll-behavior
Supporting swipe left/right fails hard on iOS Mobile Safari because the browser wants to history navigate back/forward if you misplace your finger, and it is easy to inadvertently refresh the page unless you are very careful not to. I don’t think there is any effective workaround.
Well HTML5 apps will never be a good experience on iOS then. On Android you can do almost anything UI-wise with Chrome, which paves the way to HTML5 installable apps.
So, I disagree entirely: iOS can easily support fantastic HTML5 mobile apps... if push notifications ever become available.
From what I remember, Google started switching to bottom tab bars a couple of years ago, even on Android. But, when you have a bunch of features, it's much easier on the developer (not the end user) to just stuff them in a hamburger menu and say "eh, good enough..."
Link that seems relevant, but I've really only skimmed it: https://uxplanet.org/tab-bars-are-the-new-hamburger-menus-91...
The last time I looked they were incredibly fragile to implement on mobile device browsers. Mobile Safari had borkage: rotation or tab addition/deletion changing the page height such that you occasionally lose the bottom bar; input focus loses the bottom bar or leaves the bottom bar occluding elements (position sticky doesn’t recalc when page scrolls). Problems with strange interactions with the browsers own bottom bar. Both have problems when the page is zoomed, which seems to happen sometimes even if explicitly disabled e.g. input focus?
I could make something that looked like it worked, but when actually manually testing it hard, there were show-stopping problems.
There's very little reason for good tools to exist right now, when notifications don't, and this seems intentional on Apple's part. Great tooling could definitely exist for HTML5 mobile apps to make it a good experience to build great apps that way... except for the lack of notification support on iOS. Historically, the Google Play Store is so lax about things that there's no reason not to just submit apps there. You don't even have to give Google a 30% cut on a lot of things, if you provide your own payment mechanisms. So, making HTML5 mobile apps for an Android audience has never been that appealing. But, that might be changing soon. On iOS, there have always been a lot of motivating reasons for companies to release apps as HTML5 Mobile Apps, but the lack of notifications just completely stops the idea flat.
For HTML5 mobile websites, a hamburger menu is often an unfortunate reality, but I think having the most frequently used links always clickable at the top of the page is better than stuffing absolutely everything into the hamburger menu. HN does a great job with this.