什么是渐进式 WEB 应用（PWA）？您的商店需要吗？
还记得几年前，所有人都要求商店所有者为智慧手机使用者实现响应式设计吗？
响应式设计仍然很重要，但移动可用性的目标正朝著进步的网络应用程式（PWAs）的方向发展。
什么是 PWAs？
PWAs 占据了带有响应式手机显示屏的桌面系统与使用者必须下载和安装的完整移动应用程式之间的空间。 PWAs 载入速度快、准确无误、使用最少的资料、离线工作、传送推送通知以及在使用者的主萤幕上放置图示，所有这些都无需对应用程式进行开发投资。
PWA 适合您的站点吗？如果合适的话，您怎么设计呢？过程如下。
谷歌有一个明确的 PWA 标准列表，但简单来说，PWA 是一个类似应用程式的商店。 PWAs 的速度至少是响应式商店的两倍，这意味著即使您有响应式的模板来使您的商店尽可能地方便移动使用者，进步的网络应用程式仍然可以提供一些特定的优势，这取决于您的商店的型别和您的目标。
PWAs 的优点是什么？
进步的网络应用程式可以让零售商、资讯提供商、非政府组织及其使用者受益。
为什么这么多商店都在设计渐进式 WEB 应用
1. PWAs 可以促进销售
许多使用 PWAs 的零售商报告称，移动销售额有所增长，因为 PWAs 有助于克服一些移动购物者在购买前遇到的问题，例如导航困难、载入时间慢以及结账时资料录入繁琐等。
化妆品公司 Lancome 推出其进步的网络应用程式后，美国市场的移动收入增长了 17 % 。总部位于中国的商户市场 AliExpress 的 PWA 上线后，转换率上升了 104 % 。
显然，只要过程简单，顾客就会乐于用他们的手机购物，而且 PWAs 可以做到这一点。
2. PWAs 载入速度快，使用的资料少
大多数智慧手机使用者最多会在您的商店上等待 3 秒钟的载入时间。然后他们就会离开。
PWA 缩短了载入时间，这对所有使用者都有好处，不管他们是想要以最快的速度进行多工处理的急躁的城市居民，还是想要充分利用有限连线的位于农村、穷乡僻壤或发展中国家的居民。
PWA 的一个很好的非零售例子是 UN 的 ReliefWeb 。这个巨大的人道主义危机资讯入口商店有一个完整的商店（左下图），上面还有地图、幻灯片、 Twitter 摘要等等。对于位于西方主要城市，使用常见的互联网连线型别的人来说，该站点的载入速度很快。但对于偏远地区和灾区的救援人员来说，它不如 2017 年 12 月释出的 ReliefWeb 的 “精简” 商店（见右下图）有用。 PWA 将内容精简为易于滚动的标题和一个小的导航选单。
3. PWAs 可以离线工作
访问者可以将您的站点新增到智慧手机主萤幕上。即使使用者的装置处于飞航模式，PWA 上的每一个页面也能载入。
如果您希望商店访问者能够滚动您的存档——或浏览您的商店——即使他们真的在飞机上，在隧道里，或由于任何原因无法访问互联网的情况，PWA 也可能是一种选择。
综上所述，如果您执行的站点不销售任何产品或为低频宽区域的使用者服务，并且您的移动站点的载入速度已经非常快，并且易于导航，那么您可能不需要 PWA 。但是由于 PWAs 比应用程式更容易制作，所以无论如何您可能都想拥有一个 PWAs 。
如何为站点构建 PWA？
对于那些不懂代码的商店所有者来说，有一个好讯息——有一个用于 PWAs 的 WordPress 插件外挂。
搜索了我自己的站点（在 Genesis 框架上使用 WordPress）的简单 PWA 转换选项后，我尝试了免费版本的 WordPress Mobile Pack，它附带了一个免费主题，只需几分钟就可以设置好。
在我启用插件外挂并选择 Obliq 主题的最新版本之后，我的桌面站点仍然显示著我已经使用了几年的 Enterprise 主题，而 Obliq 主题则显示在我的手机浏览器上。在我的 WordPress 仪表板上的插件外挂快速启动选单中，我将 PWA 设置为仅在我设置时显示。我可以选择上传使用者主萤幕的图示，我选择了自己喜欢的配色方案。
在 WordPress Mobile Pack 的免费版本中，我唯一没有销售的东西是 Obliq 主题，我认为它对于影象密集型商店比像我这样的文字密集型商店更有效。开发人员提供了一些付费主题，我认为这些主题可以更好地展示我的内容，一旦我准备好使用 PWA 之后，我可能会选择其中一个主题。（相关阅读：怎样选择一个比较好的 WordPress 主题）
如果您想在不使用 WordPress 插件外挂的情况下构建自己的 PWA，该怎么办呢？
这里有一些资源可以帮助您。
Google Codelab 提供了一个 8 步教程，指导开发人员完成将 “过时” 桌面商店转换为 PWA 的基本操作。
Google’s Baseline Progressive Web App Checklist 包括一些非程式设计师也能处理的元素，比如检查 PWA 的移动友好性，验证该站点是否通过 HTTPS 提供服务，以及安装服务人员和网络应用清单等更高阶的任务。
一旦满足了基线要求，Exemplary Progressive Web App Checklist 中就有 20 多个元素，包括模式标记、加速缓存优先网络、需要使用者登入的站点的凭据管理以及大量 UI / UX 元素等。
完成后，您可以在 Chrome DevTools 中使用 Lighthouse 来稽核 PWA，以检视哪些工作正常，哪些需要调整。
将 PWA 新增到您的站点可能很简单也可能是个大专案，这取决于您是使用插件外挂还是编写您的站点的代码。无论哪种方式，花时间付出精力都可以带来更多的销售量，让连线中断或缓慢的使用者更容易访问，以及更好的移动使用者体验。
