PWA渐进式网页应用，已经不是新鲜的东西了，但是从现在来看，它的应用范围也还没预期的那么广，但是它提供的这一种方法，确实让web获得了一次突破，react也让前端做得更好。这篇文章也从十分基础的部分说起，PWA弥补了浏览器中web的不足，并如何像原生应用体验靠近，如果感兴趣，不妨看看原文。
原文链接：Designing For A Browserless Web
原文作者：Mitch Lenton
当我们把web从浏览器中取出时，会发生什么？Google的新的“添加到主屏幕”功能，提供快速、专注的网络体验与本地应用没有太大区别。设计师们可以从早期的采用者如Twitter学习，如何利用现有的设计模式，来解决新的体验挑战。
之前也有不少关于本地和web体验的争论，两者都有各自的优缺点。但浏览器体验中，最大的缺点是，它不像本地应用那样可靠，快速，有沉浸感。
在本文中，我们将介绍设计和开发渐进式web应用（PWAs）的技巧，特别是那些为Android设备添加到主屏幕的应用。首先，让我们来看一些例子。
类似app的体验
简单的说，PWAs就是看起来，和感觉起来像本地应用的网站。在Google I/O发布会上，描述为“更好的web体验，用户也更喜欢参与…”
自福布斯发布PWA版本之后，用户参与度翻了一倍。在电子商务领域也有显著的增长，兰蔻再发布了PWA之后，转化率得到了提升。
这些快速、流畅、近似本地应用的移动体验正是用户想要的，主流市场中也会出现更多的PWAs。加速这一浪潮的另一个功能是“添加到主屏幕”， 这就是一个基本的安装过程。对于用户来说，在主屏幕上添加的PWA就和启动应用是一样的体验。
什么是“添加到主屏幕”？值得做吗？
“添加到主屏幕”就是将PWA安装到Android的主屏幕上的功能，使得PWA可以被立即访问，而无须用户打开浏览器输入URL或使用搜索引擎。（尽管早期的iOS Safari有类似的功能，但用户并不能很多的应用来使用。所以，Safari版本并不是本文的一部分）
正如Google的Lighthouse清单中反映的那样，PWAs的能力分值更高，因此，在搜索结果中会更靠前。
以Twitter Lite的PWA为例子，Twitter发现很难让数百万用户的移动web用户改变，但是自从Twitter Lite提供了PWA版本后，每天有25w的独立用户通过主屏幕启动web应用，平均每天4次。
零售业也看到了成功。在用户将PWA添加到主屏幕后，阿里巴巴的互动率提升了四倍。Flipkart的消费者通过主屏幕进入的转化率提高了70%。
虽然“添加至主屏幕”的用户仅限于Android Chrome，但这种功能以一种沉浸式、更独特的体验-和原生应用扮演一样的角色-来鼓励这一高参与度的少数群体。
渐进式web仅仅是把网站打包成应用吗？
从本质上讲是的，为什么不呢？90%的移动端时间都花费在了应用上，零售行业的转化率提高了120%。
这些统计数据将引领更多零售商参与进来。一个本地应用的平均成本在27w美金左右，“添加到主屏幕”提供了一个更经济的选择。用户根本不关心是原生的，还是web。用户的参与将由体验本身决定：
加载迅速吗？
可离线工作吗？
导航快速吗？
能与设备无缝集成吗？
这些都是应用设计的特点，如果“添加到主屏幕”被采纳，那么也应该与这些特性保持联系。
什么让体验类似原生应用？
“添加到主屏幕”创建的就是专注应用的体验，这个网站和应用一样通过图标启动，没有浏览器的URL或其他导航工具栏，不然就会跳转到外部应用。
这是一个不错的起点，但我们也必须认识到并满足本地应用的一些期望，如果体验像真正的app，就包括：
即时页面跳转；
高性能感知；
离线访问；
完整的设备集成；
应用风格的导航；
回退按钮；
分享功能；
复制URL,打印，下一步；
准备好了吗？我们来深入看看。
即时页面转换
用户希望快速进入应用，每次交互加载后无需等待新的内容。
PWA解决方案
为了让PWA能够通过lighthouse的检查清单，它必须遵循一些提高性能的方案。内容必须在后台缓存，新的页面加载很快，发现不了加载过程。
感知性能
令人惊讶的是，移动端延迟造成的压力与观看恐怖电影的水平一样。本地应用不需要去等待内容。他们也不愿意忍受加载元素造成的脱节体验。
PWA解决方案
PWA加载内容之间的视觉桥梁。下面是一个例子，说明“预加载”如何增强响应速度，达到无缝感知。一个精心设计的PWA会通过占位符来实现这个想法，它模拟了页面的最终状态，并通过延迟加载来减少视图元素，让加载看起来更快。
离线访问
下载的本地应用并不完全依赖互联网连接。
PWA解决方案
Service workers(提高离线体验的技术)可以在低或不连接的区域显示在线内容。页面内容被缓存在后台，允许在网络较差的环境中访问，就像火车开进隧道一样。
完整的设备集成
在设备上有一定的占位，用户可以找到并管理应用。
PWA解决方案
PWAs添加到主屏幕后，你可以在Android看到它。包括在程序启动器，任务切换，和系统设置中。这也确保了任何其他链接到PWA的应用，比如Google搜索或社交媒体，都会是打开应用而不是浏览器。推送通知也像本地应用一样。
应用风格的导航
应用共享导航的方法。头部显示当前部分的标题，左上方的后退按钮，任何与场景相关的操作都在右上角。
没有PWA解决方案
这种模式在移动web上并不常见。这些操作可以在浏览器的内置功能中找到。一个应用通常都会从一个屏幕开始。而移动web是通过搜索，社交渠道登录页面。因为这个原因，logo和其他全局操作都会占据标题栏的重要位置。
如果真的要像本地应用一样，那么这个预期就应该被解决。为了做到这一点，设计师必须弄清楚如何恢复在浏览器中丢失的导航模式。
回退按钮
有人会说，因为Android设备本身提供了返回，所以没有必要替换浏览器的后退功能。事实上，这两种操作略有不同。大多数应用会在header中提供一个返回，在页面分层中导航，系统的回退可能会关闭一个窗口模式，或者导航到另一个应用。
解决方案
一个可行的解决方案是，当用户经过初始页面，可以用回退按钮替代左上角的菜单，一旦用户进入到了更深的页面，大多数人本能会通过返回按钮回到主页，在那里打开菜单。
分享按钮
内置在web浏览器的界面上，可以在社交媒体上分享一个页面。
解决方案
设计人员应该通过更多的提示来分享页面中的分享内容。我们发现，在打开菜单之前，用户通常会在页面的顶部寻找分享按钮。如果没有找到该功能，用户会在标题栏中去寻找分享功能。
“更多”图标是一种android式的模式，用来表示更多选项。尝试在菜单内添加分享操作。
复制URL、打印、下一步
不太常见的操作，比如复制和输入，是浏览器的基本功能，不应该被忽略。
解决方案
提供复制URL和打印功能的一种简单方法就是使用Web Share API。或者在更多中以单独选项存在。然后将菜单作为扩展内容。
如何在现实世界中生效
这需要时间来让“添加至主屏幕”成为一种可以接受的方式。下面是一些可以帮助开发的最佳实践。
吸顶并保持操作
“添加到主屏幕”的最早采用者Flipkart和AliExpress都意识到引入新模式的学习成本。他们需要确保用户总是能知道在哪里找到关键操作：所以让操作保持在顶部。
智能提示
自从chrome团队宣布，PWAs可以控制给用户的提示后，“添加到主屏幕”的安装量提升了。Flipkart购买后提示用户的参与度增加了3倍。
压力测试
任何新模式的验证过程，就是在多个应用中进行压力测试。我们发现这种模式很好地适用于边缘场景。兰蔻的PWA标题栏包含了许多操作。兰蔻将“更多”视为简化界面的最佳方法。同时为那些“添加到主屏幕”的用户提供特殊服务。比如关联到忠实度计划。
“添加到主屏幕”得到了哪些支持？
Apple宣布会支持Service workers，但它也承诺过App Store是支持开发者获取收益的地方。这也是为什么iOS的Safari使用PWAs时并不积极。
Samsung的浏览器添加了这个功能，用户可以找到它。
Windows也比“添加到主屏幕”走得更远。任何PWA都可以被列入windows store，作为可下载的应用。这些程序都很轻量，快速安装，方便体验。
结语
“添加到主屏幕”为用户提供了一种沉浸式体验。当用户群和支持设备增长后，可以在更多的成功案例中得到验证，比如Twitter Lite。这些故事都展现了一个更现代，近似应用的web如何满足用户对性能和设计的期望，是积极的。
通过PWA的性能增加，与原生应用的体验直观的组合起来，满足了这些期望。通过这些，我们可以让浏览网页更加现代。
网友评论