5 Ways to Make Mobile Frontend Look Like a Native App
Tags: css, webdev, pwa, mobile
Published: 2023-06-12 13:03:44

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](https://timestripe.com), examples in the article will be from there.

## Adding a Manifest

![Web app Manifest](https://miro.medium.com/v2/resize:fit:438/1*zDJyeq4CJqqVqDHM4q1ivA.gif)

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](https://web.dev/progressive-web-apps/).

[More about web app manifests at MDN.](https://developer.mozilla.org/en-US/docs/Web/Manifest)

And [here](https://timestripe.com/static/v2/manifest.webmanifest.json) you can see the tiny manifest of Timestripe.

## Setting Transparent -webkit-tap-highlight-color

![Transparent -webkit-tap-highlight-color](https://miro.medium.com/v2/resize:fit:1200/1*GDUcq1Vz8rp-OMZZ-6Z2cw.gif)

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:

```css
body {
  -webkit-tap-highlight-color: transparent;
}
```

## Fixing hover styles

![Fixing hover styles](https://miro.medium.com/v2/resize:fit:1200/1*9YkXfRldxMO0uGbGEbeY2w.gif)
_(pay attention to the "Goal options" button)_

There is no hover on touchscreens! Please see [my article on the topic](https://dev.to/topcat/the-correct-hover-5djb).

## Disabling pinch-to-zoom

![Disabling pinch-to-zoom](https://miro.medium.com/v2/resize:fit:438/1*et30Ne_Kqcq68RIrF8flkw.gif)

Because native apps do not zoom!

Set `user-scalable: 0`

```html
<meta 
  name="viewport" 
  content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"
/>
```

## Removing Overscroll in Safari
![Removing Overscroll in Safari](https://miro.medium.com/v2/resize:fit:438/1*8bmSfMejoCkCqFsvhJNCfg.gif)

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](https://www.bram.us/2016/05/02/prevent-overscroll-bounce-in-ios-mobilesafari-pure-css/) 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.

![use-gesture](https://miro.medium.com/v2/resize:fit:1200/1*p4vMYS81V36AusnFOlaRMw.gif)

## Other articles on the topic
- [Make your PWA feel more like an app, Thomas Stainer](https://web.dev/app-like-pwas/)
- [Building Native-like Experiences on the Web with PWAs, Miloš Žikić](https://spicefactory.co/blog/2019/10/18/native-like-pwas/)
- [How you can develop Progressive Web Apps that feel like native mobile apps, Samuele Dassatti](https://medium.com/swlh/how-you-can-develop-progressive-web-apps-that-feel-native-5110fbbcbf4b)

-----
If you find the article useful, please hit reactions and subscribe.

Follow me on [Twitter](https://twitter.com/mishgun_eth), connect on [LinkedIn](https://www.linkedin.com/in/topcatnocap/).

Also make sure to follow [Timestripe on Instagram](https://instagram.com/timestripe.pro), it's awesome!