5 Ways to Make Mobile Frontend Look Like a Native App

#css #webdev #pwa #mobile

When I create a PWA, hybrid app, or even just mobile markup, I want the interface to feel like a native app. It's difficult to achieve native smoothness on the web, that's true. But even fast and beautiful web apps are easily distinguishable from native ones due to the browser-specific UX.

In this article, I will show several tricks that might even make experienced users doubt that they are not facing a native interface. I used these tricks in the mobile version of Timestripe, examples in the article will be from there.

Adding a Manifest

The Web App Manifest is part of the Progressive Web Application (PWA) technology.

A PWA is a web application that can be installed on a device and launched without a browser interface in its own window. A good PWA is awesome. Instant installation, access to native APIs, offline-first, and so on.

To turn a site into a top-notch offline-first PWA, it's not a one-sprint job. But for starters, you can simply add a manifest.json to the static folder, then when adding the application to the desktop, it will launch separately from the browser! Then, you can tweak the rest of the PWA features, read about it here.

More about web app manifests at MDN.

And here you can see the tiny manifest of Timestripe.

Setting Transparent -webkit-tap-highlight-color

The -webkit-tap-highlight-color property determines the color of semi-transparent rectangles that appear above interactive UI elements during pressing.

This feature is necessary just in case, so that the user understands that an interaction with the interface has occurred. Therefore, if your UI elements have no issues with visual feedback, you can confidently make these highlights transparent:



body {

  -webkit-tap-highlight-color: transparent;

}

Fixing hover styles

(pay attention to the "Goal options" button)

There is no hover on touchscreens! Please see my article on the topic.

Disabling pinch-to-zoom

Because native apps do not zoom!

Set user-scalable: 0



<meta 

  name="viewport" 

  content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"

/>

Removing Overscroll in Safari

By overscroll, I mean the visual effect of scroll elasticity. In itself, it's not something bad, but an experienced user will smell the scent of the web at the sight of it.

There is a good article about it.

Bonus: use-gesture

For React applications, there's a superb tool - the use-gesture library which has a very convenient API. With its help, you can easily add support for swipes and other gestures to a React component. The documentation includes beautiful examples, including the use of react-spring. So far, these two libraries (react-spring + use-gesture) have provided me with the best DX for complex interface animations.