26 ms·
Native-like Navigation of Web apps
- butz 5y agoWhen building native-like web apps I noticed that they lack tactile feedback, e.g. tap sound or vibration after pressing button. Is it actually possible to implement with web apps at all?
- chrisdsaldivar 5y agoYou can play sound with the audio API since the user is interacting with the page. However, the vibration API is only implemented in Chrome and Firefox on mobile. Safari removed it from WebKit. https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_A... https://developer.mozilla.org/en-US/docs/Web/API/Vibration_API https://developer.mozilla.org/en-US/docs/Web/API/Vibration_A...
- yesimahuman 5y agoNot when running solely on the web in a browser unfortunately. A tool like Capacitor has haptic feedback support if you deploy your app natively, however: https://capacitorjs.com/docs/apis/haptics https://capacitorjs.com/docs/apis/haptics
- riantogo 5y agoI'm a web developer and typically use bootstrap or materialcss for my projects. I'm looking for a simple css framework that makes my next webapp look and feel like a mobile app. Any suggestions?
- gherkinnn 5y agoIt has little to do with CSS frameworks. Looks are easily imitated. Use whatever you like. It’s all in the feeling. Use design patterns that work on phones. And by god, make it fast. Once that’s set and at the core of your app, think about flourishes. You won’t achieve the level of Airbnb’s native app, but a little will take you very far.
- dariosalvi78 5y agocheck https://onsen.io/ https://onsen.io/
- dariosalvi78 5y agoalso: https://framework7.io/ https://framework7.io/
- kylecordes 5y agoI am often impressed by how native some web-rendered mobile apps can feel. But as of a few years ago, as I understand the top N most popular, best-selling, highest revenue, etc. apps for both iOS and Android were mostly native apps, build with the primary native tooling/language/etc per-platform. Presumably this is because that last little bit of being native pays off in a highly competitive environment. I wonder if that is still true.
- VWWHFSfQ 5y agoIt's definitely still true. I can spot a mobile app built with web tech pretty much instantly. It just feels very slightly crappy. I don't think there's any kind of library or framework that will ever fix that. Native is pretty much the only way to go if you really want the app to look/feel good.
- martini333 5y agoNo, you cannot.
- slater 5y agoYes, you can.
- afavour 5y agoI’m less sure about that. You can spot a mobile app built with crappy web tech, because it is very slightly crappy. An app using web tech well would be indistinguishable from a native one. Case in point: years ago the Instagram activity feed was rendered in a webview. The only way I ever found out was because they clearly did a faulty deploy that was missing CSS: it rendered in Times New Roman with blue links, etc. But up until that point I didn’t have a clue and I do this stuff for a living. On iOS at least there are a ton of WKWebView APIs that aid native integration, you can even do force touch context menus and the like. It’s just that by and large people don’t.
- marcellus23 5y ago
- deleted 5y ago[deleted]
- felixthehat 5y agoOh this is so timely for me! I'm just building a mobile-first webapp with Vue and have been trying to solve this exact issue. Does it work with Nuxt?
- gondo 5y agoThe title is (slightly) misleading. This is some kind of plugin for Vue.js framework.
- karmakaze 5y agoYes, the posted title is actually a subtitle for "History Navigation Vue"
- elwell 5y agoAnd the title should mention "mobile" somewhere as well
- hezedu 5y agoThe desktop also supports
- hezedu 5y ago"History Navigation" is before "Vue"，Is it still like a plugin? I think it’s a good idea to reduce the font size of "Vue".
- jitl 5y agoThe animated transitions don’t work very well with iOS’s built-in “swipe from left edge” back gesture. The animation appears to double-play, since the Safari back gesture implements the reveal animation in native code, then once it sends the back event to the browser, the library plays its own animation. See video here: https://jitl.notion.site/Back-gesture-iOS-3c44da9f8d13491d86052f6d64f5dab6 https://jitl.notion.site/Back-gesture-iOS-3c44da9f8d13491d86...
- afavour 5y agoThis is my test for any “app-like” transition library in terms of attention to detail. It’s very difficult to get right. I wish we were able to tap into native OS transitions but alas.
- yesimahuman 5y agoThe reality is you can't do this kind of transition when running in Safari browser because the browser gestures get in the way. It really has nothing to do with the web being able to do this or not and everything about browser chrome getting in the way. However, it's much, much better when running in a native web app container like Capacitor.
- the_gipsy 5y agoThere is also no alternative, thanks to apple restricting all appstore browsers to the safari webkit engine.
- yesimahuman 5y agoNo, the browser itself that wraps the WebKit web view is the culprit here. WebKit has nothing to do with it. Other browsers on iOS can and do implement gestures like this differently
- warning26 5y agoYup -- it's annoying that Safari does this, but that's Apple for you. Ensuring that webapps have a worse experience than native ones is presumably considered a feature.
- pcr910303 5y agoA bit different, but I really appreciate when web apps use the HTML5 history API to implement back buttons, e.g. Twitter. It makes the history queue that appears when long-clicking the back button so much more useful.
- aaaaaaaaaaab 5y agoToo bad that other sites use the same API to forbid you from going back where you came from, by filling the back stack with hundreds of bogus entries.
- rudian 5y agoI remember some browser blocking that at some point, but I still occasionally see it. I can’t believe there’s no way to “go back to the previous website” in most browsers. Safari iOS for example just clips the history so you can’t even hold the back button and scroll up if there are dozens of entries.
- ivan_gammel 5y agoWhen I checked the previews in the Guide section, some of them did not work in the latest Firefox as expected. Also, looks like there's only an implementation for the Back button, but what about Forward?
- hezedu 5y agoNative does not seem to 'forward' either.
- ivan_gammel 5y agoIn browsers good UX means to support both.
- deleted 5y ago[deleted]
- yesimahuman 5y agoIf you're interested in bringing native navigation patterns to web apps, take a look at Ionic Framework which has had this for a long time (and recently added Vue support). Demo of some of these patterns (screen needs to be wide enough to display the phone): https://ionicframework.com/docs https://ionicframework.com/docs
- abishekg 5y agoIonic used to do this. But in angular they stopped supporting this type stacked page transitions. Do they do this with vue or react?
- yesimahuman 5y agoIonic still supports stacked page transitions in Angular! Where did you hear that?
- The_rationalist 5y agoThe problem is already solved by Ionic
- The_rationalist 5y agoThe "normal router" issue is BIG and make browsing github issues/PRs on mobile an awful experience.
- krono 5y agoThis modifies a lot of platform-specific behaviour as described by their respective specifications. It also hijacks system-level user customisations, possibly also accessibility-related ones. Whilst it looks like a solid technical implementation, in its current form at least, makes for a very frustrating user experience. Edit: Which means to say it's very much salvageable! :)
- _def 5y agoIt's amazing that we're often using interfaces without this feature in 2021.
- ComputerGuru 5y agoThe only client-side rendered webapp I enjoy using is GitHub’s and that’s because it’s indistinguishable from a regular server-side website (until a page fails to load or takes forever to load, but I’ll give them a pass on that).
- Jcampuzano2 5y agoI might be wrong or misunderstanding your description, but I don't think Github's webapp is client side rendered. They use rails extensively as far as I know unless things have changed, and add additional enhancements on the client side using plain JS. Certain things are loaded on the client, but for example when viewing a repo it's server rendered. Whereas on the home page, the app shell is loaded on the server, but the feed is fetched on the client. But all navigation is not done on the client.
- noisem4ker 5y agoContent is rendered server-side, but navigation is done client-side. It's not the browser which loads pages, instead it's a script that loads the page content through AJAX, updates the current view with it, and pushes a new state to the history API. I think the exact library they use is Pjax. And yes, it inevitably collides with native navigation in that going backwards sometimes brings up stale page states, forcing you to refresh.
- gherkinnn 5y agoHave to disagree. State is constantly out of sync and I hate when popup menus have to first fetch their content and show you a spinner instead.
- Nextgrid 5y agoThis is the reason why I always hit refresh as soon as the URL bar updates. A full page load of the next destination is often faster than their shitty client-side navigation. Now that I think of it, I can't think of any website where client-side navigation is actually an improvement.
- m4r35n357 5y agoOMG how much more hideousness are we going to throw at this non-problem?
- tootie 5y agoI've been doing web dev for 20 years and still have no idea what "native" controls means. Controls on every web/desktop/mobile app I use are different. And aside from the labels being legible and the selected states being visible, they're all pretty much the same to me.
- jjtheblunt 5y agodoes "native" mean not realized through a javascript engine?
- tubby12345 5y agono it means vaguely what the person you've responded to is alluding to - window controls and such that mimic the controls that the user's OS uses. incidentally I agree with the person you've responded to - what's the point if all apps are different anyway (despite uniformity in window controls). but i realize i'm an outlier - 90% of tech users probably don't have the patience to learn new UIs over and over again.
- dotancohen 5y agoAnd honestly, why would someone want "native-like" controls in a web app? "Native-like" simply means "close enough to make you think it works the same, but subtly doesn't". That's pretty much the definition of uncanny valley.
- _qbjt 5y agoWhat’s the accessibility story for these kind of mobile UIs?
- austincheney 5y agoI have always found the SPA abuse of the term router deeply frustrating. Routers are devices that connect separated networks. The SPA use of the term merely performs a fetch for content and then shows/hides some content on the screen in concert with the page address. Not even remotely close to functionality or challenges associated with an actual router. Is this abuse of terminology because front-end developers have no idea how this stuff actually works or is that they don't care and want to sound smart? Actual routers: https://en.wikipedia.org/wiki/Router_(computing) https://en.wikipedia.org/wiki/Router_(computing)
- hezedu 5y agoThank you all for your feedback. Currently, there are differences between different devices, I will continue to improve as soon as possible.