当我创建PWA，混合应用程序甚至只是移动标记时，我希望该界面感觉像是本机应用程序。确实很难在网络上实现本地平滑度，这是事实。但是，由于特定于浏览器的UX，即使是快速而美丽的Web应用程序也可以与本地的应用程序区分开。

在本文中，我将展示一些技巧，甚至可能使经验丰富的用户怀疑他们不面对本地界面。我在Timestripe的移动版本中使用了这些技巧，本文中的示例将来自那里。

添加清单

Web应用清单是渐进式Web应用程序（PWA）技术的一部分。

PWA是一个Web应用程序，可以在设备上安装并在其自己的窗口中启动而没有浏览器接口。一个好的PWA很棒。即时安装，访问本机API，脱机第一等。

要将网站变成一流的脱机第一pwa，这不是一项单击的工作。但是对于初学者来说，您只需将manifest.json添加到静态文件夹中，然后将应用程序添加到桌面时，它将与浏览器分开启动！然后，您可以调整其余的PWA功能，请阅读有关here的内容。

More about web app manifests at MDN.

和here您可以看到Timestripe的微小清单。

设置透明的-webkit-tap-highlight-color

-webkit-tap-highlight-color属性确定在按下时出现在交互式UI元素上方的半透明矩形的颜色。

此功能是必要的，以防万一，以便用户了解与接口发生的交互。因此，如果您的UI元素对视觉反馈没有问题，则可以自信地使这些亮点透明：

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

修复悬停样式

（请注意“目标选项”按钮）

触摸屏上没有悬停！请参阅my article on the topic。

禁用捏到Zoom

因为本机应用不缩放！

设置user-scalable: 0

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

删除野生动物园的超卷

通过croll，我的意思是滚动弹性的视觉效果。本身并不是很糟糕的，但是有经验的用户会闻到网络的气味。

有关于它的a good article。

奖励：使用势

对于React应用程序，有一个精湛的工具-use-gesture库，它具有非常方便的API。借助它的帮助，您可以轻松地将对刷牙和其他手势的支持添加到React组件中。该文档包括精美的例子，包括使用react-spring。到目前为止，这两个库（react-spring + use-gesture）为我提供了用于复杂接口动画的最佳DX。

有关该主题的其他文章

• Make your PWA feel more like an app, Thomas Stainer
• Building Native-like Experiences on the Web with PWAs, Miloš Žikić
• How you can develop Progressive Web Apps that feel like native mobile apps, Samuele Dassatti

如果您觉得这篇文章有用，请点击反应并订阅。

在Twitter上关注我，在LinkedIn上连接。

还请确保关注Timestripe on Instagram，太棒了！