Search Results for: 带宽

什么是渐进式WEB应用（PWA）？您的网站需要吗？

还记得几年前，所有人都要求网站所有者为智能手机用户实现响应式设计吗？

响应式设计仍然很重要，但移动可用性的目标正朝着进步的网络应用程序（PWAs）的方向发展。

什么是PWAs？

PWAs占据了带有响应式手机显示屏的桌面系统与用户必须下载和安装的完整移动应用程序之间的空间。PWAs加载速度快、准确无误、使用最少的数据、离线工作、发送推送通知以及在用户的主屏幕上放置图标，所有这些都无需对应用程序进行开发投资。

PWA适合您的站点吗？如果合适的话，您怎么设计呢？过程如下。

谷歌有一个明确的PWA标准列表，但简单来说，PWA是一个类似应用程序的网站。PWAs的速度至少是响应式网站的两倍，这意味着即使您有响应式的模板来使您的网站尽可能地方便移动用户，进步的网络应用程序仍然可以提供一些特定的优势，这取决于您的网站的类型和您的目标。

PWAs的优点是什么？

进步的网络应用程序可以让零售商、信息提供商、非政府组织及其用户受益。

 

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添加到您的站点可能很简单也可能是个大项目，这取决于您是使用插件还是编写您的站点的代码。无论哪种方式，花时间付出精力都可以带来更多的销售量，让连接中断或缓慢的用户更容易访问，以及更好的移动用户体验。